I want to use a simple HTML5 audio tag in my react application. My component looks like this:
import React from 'react'
class AudioPlayer extends React.Component {
render() {
return (
<div>
<audio ref="audio_tag" src="./static/music/foo.mp3" controls autoPlay/>
</div>
);
}
}
export default AudioPlayer;
but it just won't play. I also don't get any errors. I have put the mp3 file in every single folder in my app now, and tried different paths etc. but it just does not seem to recognise it. Am I missing something trivial maybe?
As for whether it mimics HTML4 or HTML5, it depends on what you code, React itself is not limited to any HTML version and it is the browser that needs to worry about which HTML version you are using.
By default, React does not permit you to inject HTML in a component, for various reasons including cross-site scripting. However, for some cases like a CMS or WYSIWYG editor, you have to deal with raw HTML.
I have accidentally used a broken audio file, so this explains why my solution did not "work". The code above is, as Jordan Running points out, fine, so I'll leave this as the answer.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With