Tengo una API de diccionario que tiene una función de pronunciación (?). Aquí hay un ejemplo con la palabra ciudad "https://api.dictionaryapi.dev/media/pronunciations/en/city-us.mp3"
No tengo idea de cómo puedo renderizarlo. pensé que era algo como
const [input, setInput] = useState(""); const soundApi = async () => { try { const soundData = await axios.get( `https://api.dictionaryapi.dev/media/pronunciations/en/${input}-us.mp3` ); console.log(soundData); } catch (error) {} };Y luego el useEffect debajo de él
useEffect(() => { dictionaryApi(); soundApi(); }, [input]);Si desea renderizar un elemento de audio, puede hacerlo así
<audio controls src="https://api.dictionaryapi.dev/media/pronunciations/en/city-us.mp3" > Your browser does not support the <code>audio</code> element. </audio>No estoy seguro de haber entendido bien, pero no es necesario obtener esta URL para mostrar los elementos de audio.
Como dijo Damian Busz, no es necesaria una solicitud de API para obtener un archivo de audio. Pero, suponiendo que necesita autenticación para obtener este audio y está usando axios para obtenerlo, podría hacer lo siguiente:
const [audioURI, setAudioURI] = useState(""); const [input, setInput] = useState(""); const soundApi = async () => { try { const response = await axios.get({ url: `https://api.dictionaryapi.dev/media/pronunciations/en/${input}-us.mp3`, method: 'GET', responseType: 'blob', }); // This will create a Local URL that can be used on an audio source const audioUrl = window.URL.createObjectURL(new Blob([response.data])); setAudioURI(audioUrl); console.log(soundData); } catch (error) {} };En su componente de audio:
{!!audioURI && ( <audio controls src={audioURI}> Your browser does not support the <code>audio</code> element. </audio> )}También puede devolver el valor de la URL desde la función soundAPI.