I’m working on the Drum Machine project using React.
function Square({ value }) {
const sounds = [
{
value: "Q",
description: "quack",
src: "https://sampleswap.org/samples-ghost/SOUND%20EFFECTS%20and%20NOISES/Sound%20FX%20Zoo%20and%20Nature/455[kb]duck-quacks.wav.mp3"
}
]
const src = sounds.find(sound => sound.value === value).src
function handleClick() {
const playPromise = audioRef.current.play()
if (playPromise !== undefined) {
playPromise.then(() => {
console.log("PLAY")
}).catch(error => console.log(error))
}
}
return (<>
<button className="drum-pad" id={description} onClick={handleClick}>{value}
</button>
<audio
id={value}
// src="https://sampleswap.org/samples-ghost/SOUND%20EFFECTS%20and%20NOISES/Sound%20FX%20Zoo%20and%20Nature/455[kb]duck-quacks.wav.mp3" // WORKS!
// src={src} // Does not work, even though console.log says it's equivalent to string above
ref={audioRef}
streamType="mp3"
crossOrigin = 'anonymous'
/>
</>
);
}
For whatever reason, the audio works fine from the string. When using JSX, I get this error in Chrome:
DOMException: The element has no supported sources.
Same idea in FireFox:
NotSupportedError: The media resource indicated by the src attribute or assigned media provider object was not suitable.
I added crossOrigin = ‘anonymous’ because Stack Overflow says this is a CORS issue - but that doesn’t work and it doesn’t explain why the audio loads from the string.
