Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 audio tag in React

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?

like image 439
George Welder Avatar asked Mar 26 '17 19:03

George Welder


People also ask

Can I use HTML5 With React?

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.

Can I use HTML tags in React?

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.


1 Answers

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.

like image 128
George Welder Avatar answered Oct 17 '22 16:10

George Welder