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播放多个音频文件音频播放器播放列表

回答

相关问题