HTML 音频播放/停止答案

【问题标题】：HTML Audio Play/StopHTML 音频播放/停止
【发布时间】：2013-06-29 14:30:06
【问题描述】：

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

感谢任何帮助或建议。

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

【问题讨论】：

标签： audio playback

【解决方案1】：

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

试试这个代码：

<!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>

【讨论】：

我得到了自定义播放按钮的代码播放
感谢您的回复，但这并不真正适合我提供的代码。只需要在我提供的 jQuery 函数中定位特定音频元素的方法。