Solution 1 :

Just leave controls like this:

const App = () => (
    <audio src="" controls />
    <audio controlsList="nodownload" controls>
     <source src="" type="audio/mpeg" />
ReactDOM.render(<App />, document.getElementById("react"));
<script src=""></script>
<script src=""></script>
<div id="react"></div>

Problem :

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" />

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?


Comment posted by Patrick Kenny

Thanks, that solved the problem. Drupal outputs

Comment posted by b3hr4d

No problem, in