18

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?

3
  • 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()). Mar 26, 2017 at 19:21
  • 1
    Ok, I tried that. I get: Uncaught (in promise) DOMException: The element has no supported sources. Mar 26, 2017 at 19:26
  • 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. Jun 14, 2017 at 15:19

1 Answer 1

11

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.