使用 JavaScript 动态控制 HTML5 音频

Question

我有一个包含大约 10 个缩略图的画廊，每个缩略图代表一首歌曲。为了控制每个播放，我设置了一个播放按钮以通过 jQuery 淡入。在对 Apple 的开发中心进行了一番挖掘之后，我发现了一些用于控制音频的原生 JavaScript。它工作得很好，但是是为一次控制一个对象而编写的。我想做的是将它重写为一个动态控制您选择的缩略图的播放/暂停的函数。

下面是我找到的代码..可以，但是写10次会是很多不必要的代码。

感谢您的帮助和建议，永远！

HTML：

    <div class="thumbnail" id="paparazzixxx">
        <a href="javascript:playPause();">
            <img id="play" src="../images/icons/35.png" />
        </a>
        <audio id="paparazzi">
            <source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" />
            <source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
            Your browser does not support HTML5 audio.
        </audio>
    </div>

JavaScript：

<script type="text/javascript">
       function playPause() {
       var song = document.getElementsByTagName('audio')[0];
       if (song.paused)
           song.play();
       else
           song.pause();
       }
</script>

Answer 1

jQuery 非常适合这种事情。它使您能够根据元素与 DOM 树中其他元素的关系轻松操作元素。在您的示例中，您希望能够使 <a> 元素在单击时仅影响它们旁边的 <audio> 元素。

您当前的 Javascript 代码的问题在于它实际上只抓取了整个页面上的第一个音频元素。

以下是更改代码以支持无限数量的<a> & <audio> 对的方法。

1. 将类添加到<a> 标签（在我的示例中为“播放”）
2. 将 href 属性替换为“#”
3. 然后使用 jQuery 将处理程序附加到具有该类的元素的单击事件。

HTML

<div class="thumbnail" id="paparazzixxx">
    <a class="playback" href="#">
        <img id="play" src="../images/icons/35.png" />
    </a>
    <audio id="paparazzi">
        <source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" />
        <source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
        Your browser does not support HTML5 audio.
    </audio>
</div>

Javascript

<script type="text/javascript">
   $(function() {
     $(".playback").click(function(e) {
       e.preventDefault();

       // This next line will get the audio element
       // that is adjacent to the link that was clicked.
       var song = $(this).next('audio').get(0);
       if (song.paused)
         song.play();
       else
         song.pause();
     });
   });
</script>