播放第二首曲目后，Ajax HTML5 音頻播放器無法加載下一首曲目

Question

這是這篇文章的后續問題......

使用 php/jquery 在曲目結束時自動將新歌曲加載到 HTML 5 音頻播放器中

感謝@Roko C. Buljan 的貢獻，我能夠使用以下腳本將新曲目加載到 div#player 中。 當曲目結束時，我使用 ajax 函數 loadurl 模擬了一次點擊，然后將新曲目加載到 div#player 中。 這播放沒問題，它應該在它結束時加載新曲目，但它不起作用。

<script type="text/javascript">

const audio = document.querySelector('#myAudio');

audio.addEventListener("ended", () => {

        loadurl.call(this,'player.php?random=1','player');

    }); 

</script>

我認為 addEventListener 無法識別通過 ajax 加載的 player.php 文件。

Answer 1

查看您使用的代碼，我可以看到很多錯誤：

• <source>標簽應該自動關閉；
• <source>標簽應該是<audio>標簽的子標簽
• tha <audio>標簽不得具有loop屬性，否則永遠不會調用已ended事件； 您甚至必須從 player.php 腳本中刪除此屬性。

我認為您已經從實際代碼中刪除了loop屬性，否則即使第一次也無法正常工作。

現在，由於這一行出現問題：

document.getElementById(targetID).innerHTML = XMLHttpRequestObject.responseText;

因為您正在刪除當前的音頻對象並用新的對象替換它。 當軌道結束時，它會在沒有附加事件處理程序的新音頻對象上引發ended事件。 您之前定義的事件處理程序將不再被調用。

正確的做法是不要替換音頻對象，而只需將其src屬性替換為新的軌道名稱。

編輯

所以你可以改變你的 player.php 以返回文件名和其他沒有 html 標簽的數據，例如以 json 格式：

$track = array('file'=>$file, 'image'=>$image);
echo json_encode($track);

並將上面的行替換為：

var track = JSON.parse(XMLHttpRequestObject.responseText);
audio.src = track.file;
document.querySelector('#image').src = track.image;
document.querySelector('#download').href = track.file;

其中image和download是<img/>和<a>download</a>元素的 ID。

另一種選擇是在每次替換 html 時重新綁定已ended事件，但我強烈反對這種方法。 無論如何，如果你選擇走這條路，你必須這樣做：

function loadurl(dest, targetID) {
    ...
    document.getElementById(targetID).innerHTML = XMLHttpRequestObject.responseText;
    var audio = document.querySelector('#myAudio');
    audio.addEventListener("ended", () => {
        loadurl.call(this,'player.php?random=1','player');
    });
    ...
}

var audio = document.querySelector('#myAudio');
audio.addEventListener("ended", () => {
    loadurl.call(this,'player.php?random=1','player');
});

請注意， audio符號必須是可變的，而不是常量，否則您無法將其值替換為新的音頻元素。