播放由 jquery 更改的新音频源

Question

大家

我写了一个简单的音乐播放器，但我有一个问题。我使用 ajax 从文件 php 中获取新的源代码，效果很好，但我不知道如何播放新歌。简单的 audio.play() 不起作用。我尝试修复这是我的代码：

    function timer(){
    timeleft = $("span#timeleft");
    slider = $("div#slider");
    $(audio).bind('timeupdate', function(){
        var rem = parseInt(audio.duration - audio.currentTime, 10),
        pos = (audio.currentTime / audio.duration) * 315,
        mins = Math.floor(rem/60, 10),
        secs = rem - mins*60;

        timeleft.text('- ' + mins + ':' + (secs > 9 ? secs : '0' + secs));
        slider.css({width: pos + 'px'});
    });
}

$(document).ready(function(){
    audio = $("audio#audio-player-header").get(0);

    $("div#controls").click(function(){
        $(this).toggleClass("pause");
        if(audio.paused){
            audio.play();
            timer();
        }else{
            audio.pause();
        }
    });

    audio.addEventListener("ended", function(){
            $.post("php/player.php", function(result){
                audio.src = result;
            });
            audio.play(); // here is the problem
            timer();
    });
});

还有 HTML：

<div id="player">
                    <div id="controls" class="play"></div>
                    <div id="music-title">
                        <div id="slider">
                            <div id="wrap-music-title">
                                <p id="music-title">Jamie T - Chaka Demus</p>
                            </div>
                        </div>
                    </div>
                    <span id="timeleft"></span>
                    <div id="player-header">
                    <audio id="audio-player-header" src="music/rock/Jamie T - Chaka Demus.mp3">
                    </audio>
                    </div>
                </div>

我在 stackoverflow 和 web 上找到了一些解决方案，但这里没有任何效果。提前感谢您的帮助。

Answer 1

您已经创建了一个竞争条件，您在 ajax 调用返回之前调用 audio.play()。您可以 (A) 监听音频 canplay 事件然后触发播放或 (B) 只需设置音频标签的 autoplay 属性。

选项 A：

audio.addEventListener("ended", function(){
    $.post("php/player.php", function(result){
        audio.src = result;
    });
});

audio.addEventListener("canplay", function(){
    audio.play();
});

选项 B：

<audio autoplay id="audio-player-header" src="music/rock/Jamie T - Chaka Demus.mp3">