Así que tengo este código para cargar un archivo de audio y reproducirlo:

 export function Note(props) { const [played, setPlayed] = useState(false); const noteDiv = useRef(); const play = useRef(); const [isPlaying, setIsPlaying] = useState(false); const note = useRef(); const audioContext = useRef(new (window.AudioContext || window.webkitAudioContext)()); // gets the file as an Audio Buffer useEffect(() => { fetch(props.filePath) .then(data => { // console log goes here return data.arrayBuffer(); }) .then(arrayBuffer => { const decode = audioContext.current.decodeAudioData(arrayBuffer); return decode; }) .then(decodedAudio => { note.current = decodedAudio; }); }, []); const playNote = async () => { if (audioContext.state === "suspended") { await audioContext.current.resume(); } const play = audioContext.current.createBufferSource(); play.buffer = note.current; play.connect(audioContext.current.destination); play.start(); }; // This component constantly renders as its state changes constantly while the playhead moves useEffect(() => { setPlayed(isPlayed(props.progress)); }, [props.progress]); useEffect(() => { if (played) { playNote(); } else { stopNote(); } }, [played]); return ( <div></div> ); }

Básicamente, un cabezal de reproducción se mueve por la pantalla, y cuando hay una nota debajo, la nota reproduce un archivo de audio.

Por alguna razón, cuando ejecuto el código y el cabezal de reproducción comienza a moverse, no se escucha ningún sonido a pesar de que se llama a play.start() .

Pero, si cambio algo en el código, funciona por alguna razón. Por ejemplo, si agrego un registro de la consola donde indiqué y vuelvo a mi navegador, se reproduce el sonido.

¿Esto se debe a que el componente Note se está volviendo a renderizar? ¿Por qué no se está reproduciendo nada simplemente haciendo que play.start() se llame a sí mismo?

La ruta del archivo es correcta y puedo ver que se carga un archivo y que se crea un AudioBufferSourcenode con él. Es solo el método start() que no funciona.