Web 音频 APi 无法执行“createMediaElementSource”答案

【问题标题】：Web Audio APi Failed to execute 'createMediaElementSource'Web 音频 APi 无法执行“createMediaElementSource”
【发布时间】：2019-12-29 04:50:33
【问题描述】：

我正在尝试使用网络音频 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 的情况下使用 web audio api 同时播放两个或多个声音
关于如何使用网络音频 api 处理大量文件和空间音频的一般指南

感谢您的帮助！

【问题讨论】：

标签： javascript audio web-audio-api

【解决方案1】：

如果您可以从音频中提取/解码 Float32 样本，则可以同时避免 decodeAudioData。 fetch-stream-audio 示例展示了如何在块的基础上立即使用 Opus 和 WAV 文件完成此操作。（我还建议使用 Opus over WAV 和 MP3。）

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

【讨论】：