Javascript:: 通过 HTML5 Audio Player 播放列表播放多个音频文件答案

【问题标题】：Javascript:: Play multiple audio files via HTML5 Audio Player playlistJavascript:: 通过 HTML5 Audio Player 播放列表播放多个音频文件
【发布时间】：2015-04-01 23:09:59
【问题描述】：

我目前正在编写播放 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 个问题需要解决。

我希望能够将当前按下的按钮上的类名从播放更改为暂停，反之亦然。
我希望能够在选择其他轨道时（仅）完全禁用所有其他音频文件。

[可选]::是否可以使用纯javascript创建ogg音频文件回退（与使用html堆叠<source>标签相同）？

【问题讨论】：

tip : this 在 function(){} 事件指向点击按钮后。只需使用this.className = "foo" 替换类名即可。
我更喜欢纯 JavaScript。
每个问题一个问题，请更新您的标题以反映您选择的问题。标签列表不合适。

标签： javascript css html audio

【解决方案1】：

将您的 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。

【讨论】：