javascript - Web Audio API 执行失败 'createMediaElementSource'

Question

我正在尝试使用网络音频 Api 同时播放多个音轨(最终目标是创建一个基于地理定位的地理空间声音引擎)

我无法设法将两个或多个 html5 音频源正确连接到音频上下文。但在非常简单的用例中，它适用于命令式代码。

这里有两个例子:

第一个不可扩展但在 Chrome 中工作:

window.addEventListener('load', async function(e) {

    let file = await stansardAudioLoader('./assets/fire.mp3')
    let file1 = await stansardAudioLoader('./assets/pluie.wav')

    let source = audioContext.createMediaElementSource(file)
    let source1 = audioContext.createMediaElementSource(file1)

    source.connect(audioContext.destination)
    source1.connect(audioContext.destination)

    file.play()
    file1.play()

 }, false);

第二个更易于管理并且非常接近第一个但不起作用。

   const loadAndPlay = (ctx) => async (url) =>{

    const file = await stansardAudioLoader(url)
    const source = ctx.createMediaElementSource(file)

    source.connect(ctx.destination)
    file.play()
}

window.addEventListener('load', async () => {

    const audioContext = new (AudioContext || webkitAudioContext)();
    const loader =  loadAndPlay(audioContext)

    loader('./assets/fire.mp3')
    loader('./assets/pluie.wav')

 }, false);

这是两个过于简化的示例，以便于测试和重现。我的完整代码使用 OOP 和基于类的方法。可以加载、播放和更新数百个文件。

有两件事对我有帮助:

• 如何在不使用 context.decodeAudioData 的情况下使用网络音频 api 同时播放两个或多个声音
• 关于如何使用网络音频 API 处理大量文件和空间音频的一般指南

感谢您的帮助!

Answer 1

如果您可以从音频中提取/解码 Float32 样本，则可以一起避免 decodeAudioData。 fetch-stream-audio示例显示了如何在 block 的基础上立即对 Opus 和 WAV 文件进行处理。 (我还建议使用 Opus 而不是 WAV 和 MP3。)

对于空间音频，您可以使用 AudioBufferSourceNode.start() 安排多个音频同时播放