HTML sound element not getting its source from a url passed from react

October 22, 2022

I am building this drumpad in react in codepen. But when I pass a prop, to the audio element’s source child, it doesn’t seem it gets any link to an audio file. I tried putting in the url where the props.audioSource is in , and then it worked.

Is some quirk in react, that does so you can’t pass url’s to html’s audio element?

The project on codepen

const DrumTileComponent = (props) => {
  return (
    <div className=".drum-pad" id="{props.drumPadId}">
      <div> 
        <audio className="clip" id="{props.drumPadId}" controls> 
          <source src="{props.audioSource}"  type="audio/mp3" />
          Your browser does not support the audio element.
        </audio>
      </div>
    </div>
  );
};

const DisplayComponent = (props) => {
  return (
    <div id="display">
      
    </div>
  );
};

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      
    }
  }
  
  render() {
    return (
      <div id="drum-machine">
        <DrumTileComponent drumPadId="A" audioSource="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3" />
        Hello
      </div>
    );
  };
};
ReactDOM.render(<App />, document.getElementById("App"));

>Solution :

You can pass source as a variable without wrapping it with string

const DrumTileComponent = (props) => {
  return (
    <div className=".drum-pad" id="{props.drumPadId}">
      <div> 
        <audio className="clip" id="{props.drumPadId}" controls> 
          <source src={props.audioSource}  type="audio/mp3" />
          Your browser does not support the audio element.
        </audio>
      </div>
    </div>
  );
};