CODEWITHSUNDEEP
reactjsaudio
Ulysse_118
Ulysse_118

Reputation: 19

Play audio from non-imported src

I want to play an audio with reactjs and the src comes from a database and change the src dynamicaly.
So fare I can play an audio that I import but if I don’t import it I get the error:

HTTP "Content-Type" of "text/html" is not supported. Load of media resource http://localhost:3000/audio-lib/soundTest.mp3 failed.

How can I replace this: state = { audioSrc: soundTest}; By something like this: state = { audioSrc: "../audio-lib/soundTest.mp3"};

This code works but I want to remove the import:

// I don't want this import
import soundTest from "../audio-lib/soundTest.mp3"
...
 state = { audioSrc: soundTest};
...
  render () {
        return(
            <audio
                controls
                ref={ ref => this.player = ref} >
                <source src={this.state.audioSrc} type="audio/mp3"/>
            </audio>        
        );
    }

Upvotes: 1

Views: 181

Answers (1)

Ulysse_118
Ulysse_118

Reputation: 19

To solve this problem I used the react-sound package. With this component it's easy to load a sound from a url passed as props. npm doc: https://www.npmjs.com/package/react-sound

Upvotes: 1

Related Questions