Using the HTML5 audio tag in Reactjs

Question

I'm trying to use the HTML5 <audio> tag in React but it isn't being rendered.

This is my first time using React, so I might be missing something obvious.

I'm taking an existing Drupal frontend and re-building it in React.

All my other HTML is working, but the HTML5 <audio> tag is not.

Here's my simplest component to show the problem:

  const NoData = () => (
    <audio controls="" controlsList="nodownload">
      <source src="/sites/default/files/fruits/apples.mp3" type="audio/mpeg" />
    </audio>
  );

When I view the page, the HTML is there, but it doesn't get rendered.

This HTML was copied from another part of my site verbatim, so it should work.

The React app is embedded in a Drupal page, so I copied the <audio> tag into the Drupal page itself, and it works there. It just doesn't show up inside React itself.

The file in the <source> tag is being read; if I change the file to one that is invalid, I get a warning in the Chrome dev tools.

So how do I use the HTML5 <audio> tag in React?

question from:https://stackoverflow.com/questions/65599275/using-the-html5-audio-tag-in-reactjs

Answer 1

Just leave controls like this:

const App = () => (
  <div>
    <audio src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" controls />
    <audio controlsList="nodownload" controls>
     <source src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" type="audio/mpeg" />
    </audio>
  </div>
)
ReactDOM.render(<App />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>