Web音频API不一致无法解码音频数据DOMException

编程问答 2022-07-25

问题描述

从昨天开始，我一直在浏览所有SO帖子中出现的错误，并且在尝试了一些建议的操作后，没有一个解决了该问题。由于该错误在各种类型的流中不一致，因此很难找到根本原因。我希望在这里分享我的问题，也许有人会看到一个模式或找到解决方案。

  • 首先，本地托管的文件和Web托管的Steam在HTML5 audio标签内运行良好。看到我们可以假设路径可以。
  • 第二，我还注意到下面的代码在我最喜欢的互联网广播电台WeFunkRadio上可以正常工作，但是在为完全不同的目的开发应用程序时，我不想对它们进行ping操作。
  • 使用以下代码在Node.js服务器的/public文件夹中托管的公共域mp3始终返回错误：DOMException: Unable to decode audio data

我尝试使用来自WikiCommons hosted public domain file的媒体将代码缩减到复制问题所需的最低限度。我目前正在开发最新的Chrome 85.0.4183.102。

StreamURL ='https://upload.wikimedia.org/wikipedia/commons/transcoded/9/90/JesusWalkedThatLonesomeValley.ogg/JesusWalkedThatLonesomeValley.ogg.mp3',const options = {
    headers: new Headers({ 'content-type': 'audio/mp3' }),mode: 'no-cors',cache: 'default',};

const getAudioData = () =>
    fetch(StreamURL.url,options)
        .then((response) => response.arrayBuffer())
        .then((arrayBuffer) => audioCtx.decodeAudioData(arrayBuffer))

async function createAudioStream() {
    try {
        let playback = audioCtx.createBufferSource();
        playback.buffer = await getAudioData();
        playback.connect(audioCtx.destination);
        playback.start(0);
    } catch (err) {
        console.error(err);
    }
}

audioContainer.addEventListener('click',createAudioStream);

人们可以在开发人员控制台的“网络”标签中看到数据确实进入了浏览器，但是，它仍然返回解码错误。现在的错误使我无法使用Web Audio API对音频进行进一步的处理。

enter image description here

解决方法

您的代码段不完整。我必须对其进行一些修改才能使其运行。

在致电console.log(arrayBuffer)之前放置decodeAudioData。我得到一个空的arrayBuffer，因此decodeAudioData自然无法解码。

我不知道为什么arrayBuffer为空。

audiojavascriptweb-audio-api