如何使用JavaScript实现音频文件无延迟无缝无限循环播放

你当前的实现存在延迟是因为每次音频播放结束后才触发新音频实例的创建、资源加载和初始化播放流程，哪怕资源已经缓存，这个过程也会产生微小间隙。以下是三种可行的解决方案，按实现复杂度从低到高排列：

方案1：使用原生audio元素的loop属性 #

浏览器原生支持的循环播放逻辑，不需要手动监听onended事件，绝大多数场景下可实现无间隙播放：

function playMySong(url) {
    var audio = document.createElement('audio');
    audio.style.display = "none";
    audio.src = url;
    audio.autoplay = true;
    audio.loop = true; // 开启原生无缝循环
    document.body.appendChild(audio);
}

playMySong('whiteNoise.wav');

如果使用该方案仍存在间隙，优先检查音频文件本身是否首尾存在空白帧，可使用音频编辑工具裁剪掉首尾空白后再测试。

方案2：双音频缓冲预加载方案 #

提前创建两个相同的音频实例预加载资源，当前音频即将播放结束时直接触发另一个预加载完成的实例播放，交替循环避免间隙：

// 预创建两个音频实例并提前加载资源
const audio1 = new Audio('whiteNoise.wav');
const audio2 = new Audio('whiteNoise.wav');
let playingAudio = audio1;

// 初始化加载
audio1.load();
audio2.load();

function startLoop() {
    playingAudio.play();
    // 播放进度达到99%时触发下一个音频播放
    playingAudio.ontimeupdate = () => {
        if (playingAudio.currentTime / playingAudio.duration >= 0.99) {
            playingAudio.ontimeupdate = null;
            // 切换到另一个预加载好的音频
            playingAudio = playingAudio === audio1 ? audio2 : audio1;
            playingAudio.currentTime = 0;
            playingAudio.play();
            // 重置上一个音频的状态等待下一次播放
            playingAudio.onended = () => {
                playingAudio.currentTime = 0;
            }
        }
    }
}

startLoop();

方案3：Web Audio API高精度方案 #

直接操作音频缓冲区实现循环，是三种方案中精度最高、完全无播放间隙的方案，适合对延迟要求极高的场景：

async function playSeamlessLoop(url) {
    // 初始化音频上下文
    const AudioContext = window.AudioContext || window.webkitAudioContext;
    const audioCtx = new AudioContext();

    // 加载并解码音频文件
    const res = await fetch(url);
    const buffer = await res.arrayBuffer();
    const audioBuffer = await audioCtx.decodeAudioData(buffer);

    function play() {
        const source = audioCtx.createBufferSource();
        source.buffer = audioBuffer;
        source.connect(audioCtx.destination);
        source.loop = true; // Web Audio原生循环无任何间隙
        source.start(0);
    }

    // 若遇到浏览器自动播放限制，可将play()绑定到用户点击/触摸等交互事件触发
    play();
}

playSeamlessLoop('whiteNoise.wav');

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