播放由 jquery 更改的新音频源

Posted 2023-02-25

【中文标题】播放由 jquery 更改的新音频源

【英文标题】：Playing new audio source changed by jquery

【发布时间】：2012-03-07 14:43:28

【问题描述】：

大家

我写了一个简单的音乐播放器，但我有一个问题。我使用 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>

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

【参考方案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">

【讨论】：

布莱恩，感谢您的快速回答。我之前考虑过自动播放，即使我尝试在第一首歌曲结束时将其放入代码中，但它也不起作用。我已经检查了你的建议，但播放器在第一首歌之后仍然停止，这是我的网站：wovich.net46.net/musicon 也许它只会让我生气：D

您尝试加载的第二个 MP3 有问题 (http://wovich.net46.net/musicon/music/rap/Lady Leshur Lego.mp3)。尝试在浏览器中点击该 URL，您会看到该文件无法播放。我从您的页面获取代码并将其放在我的服务器上，如果您使用有效的音频文件更新 src，它可以正常工作。

考虑到代码中的问题，我不敢相信一个有效的来源花了我两周时间。再次感谢您的帮助，解决方案非常接近。