Question

我想在光标击中图像时播放声音。我尝试使用javascript。 <audio>标签有效，当我说<audio autoplay>时，声音文件已播放。参见下面的代码。

另外，我希望声音只要一直悬停就可以重复。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
	
  <div id="div4">
    <img class="bottom" src="dcim/20190202_102432 copy.jpg" />
    <img class="top" src="dcim/20190202_102432.jpg" />
    <audio>
      <source src="div4.mp3"></source>
    </audio>
  </div>
		
<script>
var audio = $("#div4.mp3")[0];
$("div4").mouseenter(function() {
audio.play();
});
</script>
		
</body>

Answer 1

您需要定位div <div id="div4">：

$("#div4").mouseenter(function() {...});

您的音频应该是音频<audio>：

var audio = $("audio");

Answer 2

这是工作代码：

将ID /类添加到<audio>，然后在脚本中选择DOM作为var audio = $("#audio")[0];
使用<source src="..."/>而不是<source src="..."></source>
检查您的src是否有效

var audio = $("#audio")[0];
$("#div4").mouseenter(function() {
audio.play();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div4">
    <img class="bottom" src="dcim/20190202_102432 copy.jpg" />
    <img class="top" src="dcim/20190202_102432.jpg" />
    <audio id="audio">
      <source src="https://css-tricks.com/examples/SoundOnHover/audio/beep.ogg"/>
    </audio>
  </div>

编辑您的评论

1）我希望声音一直在徘徊；

2）当鼠标离开图像时，我希望声音停止

    var audio = $("#audio")[0];
    $("#div4").mouseenter(function() {
    audio.play();
     audio.loop = true;
    });
    $("#div4").mouseleave(function() {
    audio.pause();
    });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="div4">
        <img class="bottom" src="dcim/20190202_102432 copy.jpg" />
        <img class="top" src="dcim/20190202_102432.jpg" />
        <audio id="audio">
          <source src="https://css-tricks.com/examples/SoundOnHover/audio/beep.ogg"/>
        </audio>
 </div>

Answer 3

您需要将eventListener附加到应该触发音频播放的对象，如下所示：

{{1}}

悬停播放声音

3 个答案: