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

Question

我目前正在研究播放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個問題需要解決。

1. 我希望能夠將當前按下的按鈕上的班級名稱從播放更改為暫停，反之亦然。

2. 我希望能夠在選擇其他音軌時完全禁用所有其他音頻文件（僅）。

[可選] ::是否可以使用純JavaScript創建ogg音頻文件后備廣告（與使用html堆疊<source>標簽相同）？

Answer 1

1. 將您的audio.pause更改為audio.paused

2. 在播放新曲目之前，請暫停所有曲目

    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"); } 

希望對您有幫助。

至於您的可選問題，您可以使用此線程檢查瀏覽器。 並在創建音頻以檢查瀏覽器時做出if語句。 因此，如果是IE或Safari ，請加載mp3，否則請加載ogg。