JavaScript实现音频文件无需等待播放完成即可重复播放的方法

问题描述 #

我正在开发一个随机生成旋律的音频播放程序：音符播放间隔为1-5秒，单音频文件时长约4秒；程序启动时预加载40-80个音符音频，需要时直接调用audioFile[编号].play()播放。但遇到同一音符连续播放（或短时间内重复播放）的情况时，第二次播放会等待第一次播放完成，导致只能听到一次声音，无法实现重叠播放。

现有代码片段 #

播放音高函数

let loadedAudioArr=[];
function playPitch(y){ //y = pitch int 
    loadedAudioArr[y].play();
}

加载音效函数

function loadSounds(x,r,rr){ //x = instrument; r = range lower; rr = range upper
    for (var z=r; z<=rr; z++){
        loadedAudioArr.push(new Audio ("../audio/"+x+"/"+z+".mp3"));
    }
}

音符序列播放逻辑

for (var i=0; i<=sequencedNotes-1; i++) {
  (function(num){
      setTimeout(function(){
          playPitch(pitches[num*2]);
          playPitch(pitches[(num*2)+1]);
      }, eval(tempo) * (i+1)); 
  })(i);  
} 

解决方案 #

方法1：克隆Audio实例（快速适配现有代码） #

问题根源是同一个Audio元素实例无法同时播放，第二次play()调用会被阻塞。只需在播放时克隆预加载的音频实例，每次播放都是独立的音频对象，即可实现重叠播放。

修改playPitch函数：

function playPitch(y){
    // 克隆预加载的音频实例，参数true表示克隆所有关联资源
    const audioClone = loadedAudioArr[y].cloneNode(true);
    audioClone.play();
    // 可选：播放结束后清理克隆实例，避免内存占用过高
    audioClone.addEventListener('ended', () => {
        audioClone.remove();
    });
}

此方法无需修改预加载逻辑，直接适配现有代码，适合快速解决问题。

方法2：使用Web Audio API（更高效灵活） #

如果需要更精细的音频控制（如音量调节、音效叠加、混音），推荐使用Web Audio API。预加载时将音频解码为AudioBuffer，每次播放创建新的AudioBufferSourceNode，性能更优。

步骤1：初始化AudioContext并预加载音频

const audioContext = new (window.AudioContext || window.webkitAudioContext)();
let loadedAudioBuffers = [];

async function loadSounds(x, r, rr) {
    for (let z = r; z <= rr; z++) {
        const url = `../audio/${x}/${z}.mp3`;
        const response = await fetch(url);
        const arrayBuffer = await response.arrayBuffer();
        const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
        loadedAudioBuffers.push(audioBuffer);
    }
}

步骤2：播放音频的函数

function playPitch(y) {
    const buffer = loadedAudioBuffers[y];
    if (!buffer) return;
    
    // 创建新的音频源节点
    const source = audioContext.createBufferSource();
    source.buffer = buffer;
    source.connect(audioContext.destination);
    source.start();
    
    // 播放结束后自动清理节点
    source.onended = () => {
        source.disconnect();
    };
}

注意：首次调用playPitch前需要触发用户交互（如点击按钮）来唤醒AudioContext，这是浏览器的自动播放限制要求。

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