使用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?。它可以幫助你！