如何实现鼠标悬停图片时播放音频、移出时停止播放的功能

你只需要新增一个音频暂停函数，再替换图片上的绑定事件即可，完整修改后的代码如下：

</head>
<body>
   <script>
       function play(){
           var audio = document.getElementById("audio")
           audio.play();
       }
       // 新增停止播放函数
       function pause(){
           var audio = document.getElementById("audio")
           audio.pause();
           // 把播放进度重置到开头，下次悬停会从头开始播放，不需要这个效果可以删掉这行
           audio.currentTime = 0;
       }
   </script>
    <!-- 把原来的onclick替换为悬停和移出两个事件 -->
    <img src="moolikeacow.jpg" value="PLAY" onmouseover="play()" onmouseout="pause()">
    <audio id="audio" src="rickroll.mp3"></audio>
</body>

内容的提问来源于stack exchange，提问作者Anam Siraj