HTML5 audio tag in React

Question

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?

See if it works when playing it from within a user event (so, add a button and a handler that plays the audio with .play()). — samsonthehero
Ok, I tried that. I get: Uncaught (in promise) DOMException: The element has no supported sources. — George Welder
The code works fine, which means the problem is probably that the browser can't loading the audio file. Unfortunately, you haven't told us anything about how you're serving the file, so there's no way we can help you. — Jordan Running

George Welder George Welder · Accepted Answer · 2017-06-14T16:11:42

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.

HTML5 audio tag in React

1 Answers