Как воспроизвести URL-адрес mp3 в фоновом режиме в приложении reactjs?

Как вы добавляете URL-адрес mp3 в свое приложение reactjs и позволяете ему автоматически воспроизводиться в цикле в фоновом режиме?

Я установил пакеты как reactplayer, так и react audio player.

Вот мой код:

      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;
Источник

1 ответ

Вы можете загрузить mp3- файл из аудиоэлемента .

  1. Убедитесь, что вы перемещаете свойmusic.mp3в/publicпапка.
  2. Добавитьaudioэлемент внутри<body>вашейindex.html 
            <audio id="audio" loop autoplay> 
  <source src="%PUBLIC_URL%/music.mp3" type="audio/mpeg">
</audio>

Сделанный!

Если вы хотите управлять звуком дляPlay/Pause/Stopмузыка.

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

audio.pause()

Вы можете вызвать это из любого места, не забудьте удалитьautoplayprop из элемента audio, если вы не хотите, чтобы он воспроизводился при запуске приложения.

Источник
Другие вопросы по тегам