Estoy creando una aplicación normal que tiene 2 botones, cada uno reproducirá 1 archivo de audio WAV cuando se haga clic.
Aquí está el código:
import React from "react"; function Test() { const play = (note) => { new Audio(document.getElementById(note).src).play(); }; return ( <> <div>TEST</div> <button onClick={() => play("C5")}>Play C5</button> <button onClick={() => play("C#5")}>Play C5 sharps</button> <audio id="C5" src="./audio/C5.wav" /> <audio id="C#5" src="./audio/C#5.wav" /> </> ); } export default Test; El archivo C5 se reproduce normalmente. Pero parece que React no puede reproducir el archivo C#5 y aparece este error:
index.js:1 Uncaught Error: The error you provided does not contain a stack trace. at L (index.js:1) at Y (index.js:1) at index.js:1 at index.js:1 at l (index.js:1) L @ index.js:1 Y @ index.js:1 (anonymous) @ index.js:1 (anonymous) @ index.js:1 l @ index.js:1 localhost/:1 Uncaught (in promise) DOMException: Failed to load because no supported source was found. ¿Es por el # en la ruta del archivo? ¿Cómo puedo arreglar esto sin cambiar el nombre del archivo?
Todos los archivos de audio se colocan en una carpeta pública si eso ayuda. Por favor, ayúdame en esto. Muchas gracias.
El signo de almohadilla ('#') indica el comienzo de un identificador de fragmento en la URL. Ni la marca hash ni los caracteres que la siguen se envían al servidor cuando se realiza una solicitud HTTP.
Puede intentar codificar por ciento el signo hash-used-as-sharp en la URL como
src="./audio/C%23.wav" Alternativamente, cambie el nombre del archivo para que no use caracteres especiales, por ejemplo, csharp.wav
Intente reemplazar # con %23 ya que es la secuencia de escape HTML para # .
Normalmente, en una URL, una marca de almohadilla ( # ) apunta al navegador a un lugar específico en una página o sitio web. Se utiliza para separar la URI de un objeto de un identificador de fragmento. Entonces necesitas escapar usando %23 .
Puedes hacerlo así:
<audio id="C5" src={"./audio/C#5.wav".replace('#', '%23')} />O si desea llamar solo a este archivo:
<audio id="C5" src="./audio/C%235.wav" />