使用JavaScript动态控制HTML5音频

Question

我有一个有10个左右缩略图的画廊，每个画面都代表一首歌曲。为了控制每个播放，我设置了一个播放按钮，通过jQuery淡入。经过对苹果开发中心的挖掘后，我发现了一些原生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. 以“＃”
3. 然后使用jQuery处理程序附加到点击事件的元素替换href属性那个班。

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> 

Answer 2

Javascript/Jquery to control HTML5 audio elements - 检查此链接 - 解释How to handle/control the HTML5 audio elements?。它可以帮助你！