Question

我正在制作聊天应用程序，其中一项功能是发送声音。发送的HTML如下：

<p>
   <audio autoplay>
      <source src="sounds/lol.mp3" type="audio/mpeg">
   </audio>
   LOL
   <a href="#" id="soundStop">Stop</a>
   <a href="#" id="soundPlay" style="display:none;">Play</a>
</p>

'autoplay'第一次发送时工作正常。所以现在我需要一个播放/停止链接，可以根据需要再次听到声音。我有以下Javascript：

$(document).on('click', '#soundStop', function(e) {
    $(this).hide();
    $(this).next("a").show();
    $('audio').each(function(){
        this.pause();
        this.currentTime = 0;
    });
    e.preventDefault();
});

$(document).on('click', '#soundPlay', function(e) {
    $(this).hide();
    $(this).prev("a").show();
    $(this).closest("audio").play();
    //alert("play sound again!");
    e.preventDefault();
});

停止功能有效（虽然我不确定所有'音频'元素的定位是个好主意）。但我坚持如何将音频元素定位到第二个函数中的.play（）。我可能会以完全错误的方式去做这件事吗？

感谢任何帮助或建议。

编辑：只是为了澄清，这些声音可能会有多个实例被发送，这就是为什么我需要一种方法来只为每个声音定位特定的“音频”。

Answer 1

为什么不使用音频标签的Ready to Use Controls。我会满足你的目的。

试用此代码：

<!DOCTYPE html>
<html>
<body>
   <audio autoplay controls>
       <source src="horse.ogg" type="audio/ogg">
   </audio>

</body>
</html>

客户控制

<!DOCTYPE html>
<html>
<body>
 <audio id="player" src="horse.ogg"></audio>
<div>
    <button onclick="document.getElementById('player').play()">Play</button>
    <button onclick="document.getElementById('player').pause()">Pause</button>
    <button onclick="document.getElementById('player').volume+=0.1">Volume Up</button>
    <button onclick="document.getElementById('player').volume-=0.1">Volume Down</button>
</div>
</body>
</html>

HTML音频播放/停止

1 个答案: