Javascript ::通過HTML5播放多個音頻文件音頻播放器播放列表

我目前正在研究播放HTML5音頻文件的代碼。Javascript ::通過HTML5播放多個音頻文件音頻播放器播放列表

讓我們先從代碼開始，這樣會更容易解釋。

這裏是我的代碼：

<style> 
.btn 
{ 
    background:#fff; 
    border-radius:5px; 
    border:1px solid #000; 
    height:25px; 
    width:25px 
} 

.play:after 
{ 
    content:">" 
} 

.pause:after 
{ 
    content:"||" 
} 
</style> 

<button class="btn play" id=HeziGangina-Gravity></button> 
<button class="btn play" id=HeziGangina-PUG></button> 

<script> 


iBtn=document.getElementsByTagName('button'); 

for(j=0;j<iBtn.length;j++) 
{ 
    iBtn[j].addEventListener 
    (
     'click', 
     function() 
     { 
      var audio=new Audio(this.id+'.mp3'); 

      if(audio.pause) 
      { 
       audio.play();  
       iBtn[j].classList.remove("play"); 
       iBtn[j].classList.add("pause"); 
      } 
      else 
      { 
       audio.pause(); 
       iBtn[j].classList.remove("pause"); 
       iBtn[j].classList.add("play"); 
      } 

     },false 
    ); 
} 

</script>

我現在的腳本工作就好播放選定的音頻文件，但我仍然有2點要解決的問題。

我希望能夠將當前按下的按鈕上的類名從播放改爲暫停和副Versa。
我希望能夠在選擇其他音軌時完全禁用所有其他音頻文件（僅限於）。

[可選] ::是否有可能創建一個純JavaScript OGG音頻文件回退（如一樣堆疊<source>標籤與HTML）？

來源

2015-04-01 Hezi-Gangina

你可以使用jQuery嗎？ – Jordumus 2015-04-01 13:28:10

提示：事件指向單擊按鈕後，函數（）{}中的'this'。只需使用'this.className =「foo」'來替換類名。 – KarelG 2015-04-01 13:30:29

我更喜歡純JavaScript。 – 2015-04-01 13:30:58

更改audio.pause到audio.paused

播放之前在新的軌道暫停所有曲目

if(audio.paused) { 
    var audios = document.getElementsByTagName('audio'); 

    for (i = 0; i < audios.length; i++) { 
    audios[i].pause(); 
    } 

    audio.play();  
    iBtn[j].classList.remove("play"); 
    iBtn[j].classList.add("pause"); 
} else { 
    audio.pause(); 
    iBtn[j].classList.remove("pause"); 
    iBtn[j].classList.add("play"); 
}

希望它會幫助你。

至於您的可選問題，您可以使用this thread檢查瀏覽器。在創建音頻以檢查瀏覽器時創建if語句。所以如果是IE or Safari，請加載mp3，否則加載ogg。

來源

2015-04-01 14:54:10

Javascript ::通過HTML5播放多個音頻文件音頻播放器播放列表

回答

相關問題