1

How do you add a mp3 url to your reactjs app and let it autoPlay in loop in the background?

I installed both reactplayer and react audio player packages.

Here's my code:

import "./App.css";
import ReactAudioPlayer from "react-audio-player";

function App() {
  return (
    <div className="App">
      <ReactAudioPlayer
        src="https://www.mboxdrive.com/SolarSymphony.mp3"
        autoPlay
        loop
      />
    </div>
);
}

export default App;
Lars
  • 3,022
  • 1
  • 16
  • 28
nonameno
  • 11
  • 2
  • Have no idea what `ReactAudioPlayer` is, but you can just use a normal audio element for this. – Brad Feb 04 '22 at 22:20
  • It is an nom package installed: https://www.npmjs.com/package/react-audio-player I tried different ways not no luck. nI even added the audio to a mp4 video to run and that didn't work. – nonameno Feb 07 '22 at 21:05

1 Answers1

0

You can load an mp3 file from an audio element.

  1. Make sure you move your music.mp3 into the /public folder. enter image description here
  2. Add an audio element inside the <body> of your index.html 
    <audio id="audio" loop autoplay> 
  <source src="%PUBLIC_URL%/music.mp3" type="audio/mpeg">
</audio>

Done!

If you want to control the audio to Play/Pause/Stop the music.

const audio: Partial<HTMLAudioElement> = document.getElementById('audio')

audio.pause()

You can call this from anywhere, remember to remove autoplay prop from the audio element if you don't want it to play when the app starts.

Kuza Grave
  • 1,256
  • 14
  • 15