前言：

这个js特效是昨天群友看到的，然后我看了一下还不错，鼠标指针触碰到图片就会触发音乐音效，点击一下也会触发另外一种音效。话不多说直接上代码，下面有源码演示示例。

原理：

• 
  

  <img src="b79e2fce3c1d3b3d8da5266361751efa.jpeg" id="myImage" onmouseover="playAudioOnEnter()" onmousedown="playAudioOnClick()"/>：定义了一个图像元素，指定了图像的路径，并添加了鼠标悬停和按下时的事件处理函数。

• 
  

  <audio id="audio" src="DM_20240505234337_001.mp3"></audio> 和 <audio id="audio2" src="DM_20240505234337_003.mp3"></audio>：分别定义了两个音频元素，指定了音频文件的路径。

• 
  

  function playAudioOnEnter() 和 function playAudioOnClick()：定义了两个函数，分别在鼠标悬停和按下时播放对应的音频。

分析：

图像交互：通过 onmouseover 和 onmousedown 属性，将图像与音频播放关联起来，实现了鼠标悬停和按下时不同音频的触发。

• 
  

  音频元素：定义了两个不同的音频文件，分别通过 id 进行区分，并在相应的事件处理函数中进行播放控制。

• 
  

  JavaScript 函数：playAudioOnEnter 函数在鼠标进入图像时播放指定的音频，playAudioOnClick 函数在鼠标按下图像时播放另一个音频。

代码：

<img src="b79e2fce3c1d3b3d8da5266361751efa.jpeg" id="myImage" onmouseover="playAudioOnEnter()" onmousedown="playAudioOnClick()" /> <audio id="audio" src="DM_20240505234337_001.mp3"></audio> <audio id="audio2" src="DM_20240505234337_003.mp3"></audio> <script> function playAudioOnEnter() { var audio = document.getElementById('audio'); audio.play(); } function playAudioOnClick() { var audio = document.getElementById('audio2'); audio.play(); } </script>

音频文件下载：

蓝奏云：https://www.lanzoub.com/iOpg21xw6cbg