2

我正在制作一个聊天应用程序，其中一个功能是发送声音。发送的 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>

第一次发送时，“自动播放”工作正常。所以现在我需要一个播放/停止链接来再次听到你想要的声音。我有以下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() 。我可能会以完全错误的方式进行此操作？

任何帮助或建议表示赞赏。

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

4

1 回答 1

4

为什么不使用音频标签的准备使用控件。它会达到你的目的。

试试这个代码：

<!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>
于 2013-06-29T14:47:26.040 回答