在JavaScript中实现随机循环播放音轨的问题求助

问题描述 #

我尝试用Audio()从音轨列表随机选一首播放，播完自动换下一首（允许重复）。当前脚本在IE浏览器能运行，但会阻塞页面其他脚本；Chrome和Edge浏览器完全没有反应。预期效果是用户与页面交互后，持续循环播放音频。

原代码如下：

<script>
// ------------------------------------
// Play audio tracks randomly hopefully
// ------------------------------------

    // User interacts with web page
    window.alert("The Voyage of The Ink");

    // Define an array of music tracks
    const tracks = [ "thunder_step.mp3", "witches_dance.mp3", "old_ship_2.mp3", "triste_coeur.mp3", "grumbledrums.mp3"];

    // Create a new Audio element
    var audioElement = new Audio();

    // Define a function to play the next track
    function playNextTrack() {

        // Generate a random number between 0 and the number of tracks in the array
        var randomNumber = ((Math.floor(Math.random() * 5))+1);

        // Use the random number to select a track from the array
        const track = tracks[randomNumber];

        // Set the src property of the Audio element to the selected track
        audioElement.src = track;

        // Play the track
        audioElement.play();
        }

    // Set the onended event of the Audio element to call the playNextTrack function
    audioElement.onended = playNextTrack;

    // Start playing the first track
    playNextTrack();
</script>

问题根源 #

1. Chrome/Edge无响应原因

   • 随机数生成错误：Math.floor(Math.random() *5)+1会得到1-5的数字，但数组索引从0开始（范围0-4），导致tracks[randomNumber]经常拿到undefined，音频没有有效源自然无法播放。
   • 现代浏览器自动播放限制：window.alert()不算用户主动交互（比如点击、触摸），浏览器会阻止非用户触发的play()调用。

2. IE阻塞页面原因
   IE的Audio对象采用同步播放逻辑，旧版本浏览器没有异步处理音频的机制，播放时会卡住页面其他脚本执行。

修复后的代码 #

// 监听用户点击页面的主动交互，符合浏览器自动播放政策
document.addEventListener('click', function initAudio() {
    // 只执行一次初始化，移除监听避免重复触发
    document.removeEventListener('click', initAudio);

    // 音轨列表
    const tracks = ["thunder_step.mp3", "witches_dance.mp3", "old_ship_2.mp3", "triste_coeur.mp3", "grumbledrums.mp3"];
    let audioElement = new Audio();

    function playNextTrack() {
        // 生成正确的数组索引（0到数组长度-1）
        const randomIndex = Math.floor(Math.random() * tracks.length);
        const selectedTrack = tracks[randomIndex];
        
        audioElement.src = selectedTrack;
        // 捕获播放错误，避免中断循环
        try {
            audioElement.play();
        } catch (error) {
            console.log('音频播放失败:', error);
            // 播放失败时自动重试下一首
            playNextTrack();
        }
    }

    // 音频播放完毕后自动触发下一首
    audioElement.onended = playNextTrack;
    // 启动第一首播放
    playNextTrack();
});

关键改动说明 #

• 用户交互触发：用页面点击事件替代alert，满足现代浏览器对音频自动播放的限制，解决Chrome/Edge不播放的问题。
• 正确的随机索引：用tracks.length动态获取数组长度，生成0到长度-1的索引，避免拿到无效的undefined。
• 错误处理：添加try-catch捕获播放异常，防止因文件路径错误等问题导致播放循环中断。
• 单次初始化：初始化函数执行后移除点击监听，避免用户多次点击触发多个音频播放实例。

内容的提问来源于stack exchange，提问作者Joseph Walton