問題描述

我有一個基本的音頻播放器:

I have a basic audio player:

<audio controls="controls" autoplay="true" loop="loop">
<source src="song.php" type="audio/mpeg" />
</audio>

而不是直接指向 MP3 文件的源代碼，我讓它指向一個 PHP 文件，然后該文件指向 MP3 文件，該文件有效.但是，當當前曲目結束時，PHP 文件將指向一個新的 MP3 文件.所以，我遇到的問題是，當播放器使用新的 MP3 文件循環播放時，它完全停止工作.有沒有辦法解決?有沒有辦法通過播放列表或任何其他播放器來做到這一點?

And instead of the source pointing directly to the MP3 file I have it pointed at a PHP file which then points to the MP3 file, which works. But, when the current track is over the PHP file is pointing to a new MP3 file. So, the problem that I have is that when the player goes to loop, with the new MP3 file, it completely stops working. Is there any way around this? Is there a way to do this with a playlist or any other players?

推薦答案

復制自您的重復問題:

對于初學者來說，每次單擊元素時都會附加一個新的事件處理程序.如果有人經常暫停音樂，他們就會遇到問題.

For starters, you are attaching a new event handler every single time the element is clicked. If someone frequently pauses the music, they will run into problems.

相反，試試這個:

<audio id="audio" autoplay controls src="song.php" type="audio/mpeg"></audio>
<script type="text/javascript">
    document.getElementById('audio').addEventListener("ended",function() {
        this.src = "song.php?nocache="+new Date().getTime();
        this.play();
    });
</script>

我假設 song.php 是一個返回音頻數據的 PHP 文件.nocache 查詢參數將確保每次實際調用該文件.

I'm assuming that song.php is a PHP file that returns the audio data. The nocache query parameter will ensure that the file is actually called every time.

這篇關于具有動態源的 HTML5 音頻元素的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！