5

重複の可能性：
動的ソースを使用したHTML5オーディオ要素

現在のトラックが終了したら、プレーヤーに新しいトラックをリロードさせようとしていますが、何か間違ったことをした可能性があります。

これはプレーヤーです：

<audio id="audio" autoplay controls="controls" onclick="start()">
<source src="song.php" type="audio/mpeg" />
</audio>

スクリプトは次のとおりです。

function start(){
    var audio = document.getElementById('audio');
    audio.play();
    audio.addEventListener('ended',function(){
        $.post("song.php", function(result){
        audio.src = result;
        audio.pause();
        audio.load();
        audio.play();
    });
    });
}

スクリプトをこれに変更すると、機能します...しかし、ページ全体をリロードしたくありません。

function start(){
    var audio = document.getElementById('audio');
    audio.play();
    audio.addEventListener('ended',function(){
        window.location = 'player.html';
    });
}
4

1 に答える 1

12

手始めに、要素がクリックされるたびに新しいイベントハンドラーをアタッチします。誰かが頻繁に音楽を一時停止すると、問題が発生します。

代わりに、これを試してください：

<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、ファイルが実際に毎回呼び出されることを保証します。

于 2013-01-11T03:19:38.180 に答える