Este código funciona bien en Vanilla JS, pero cuando está en un componente de React audioContext.decodeAudioData (buffer) devuelve el error:

"DOMException no detectada (en promesa) DOMException: The buffer passed to decodeAudioData contains an unknown content type. (Necesita un arrayBuffer)

Cuando registro el búfer que paso al decodificador, de hecho es un ArrayBuffer . He intentado crear ArrayBuffer de diferentes maneras, como usar diferentes tipos de archivos, pero nada ha funcionado.

Construí esta siguiente documentación y algunos ejemplos, hasta ahora creo que podría ser un problema con React.

Si alguien tiene una solución alternativa o alternativa, sería increíble. Gracias por tomarte el tiempo.

 import { audioContext, primaryGainControl } from "../App"; const Channel = () => { /*console.log(audioContext); console.log(primaryGainControl);*/ const [volume, setVolume] = useState(80); const channelGain = audioContext.createGain(); channelGain.gain.setValueAtTime(0.8, 0); channelGain.connect(primaryGainControl); //Global variables var startTime = 0; var offsetToResume = 0; var pauseTime = 0; var isPlaying = false; var songSource = audioContext.createBufferSource(); var rate = 1; var isPlaying = false; var FILE_URL = "271417__soneproject__hats-6.wav"; const playAudio = async () => { if (isPlaying) return; channelGain.gain.setValueAtTime(volume / 100, audioContext.currentTime); const response = await fetch(FILE_URL); const buffer = await response.arrayBuffer(); const songBuffer = await audioContext.decodeAudioData(buffer); //Here is where the error occurs ^ ^ songSource = audioContext.createBufferSource(); songSource.buffer = songBuffer; songSource.connect(channelGain); startTime = audioContext.currentTime; songSource.start(audioContext.currentTime, offsetToResume); isPlaying = true; }; ...