Блог

Главная - Вопросы по программированию - Как я могу получить доступ к аудио Src, чтобы любое обновление Src запускало воспроизведение звука?

Как я могу получить доступ к аудио Src, чтобы любое обновление Src запускало воспроизведение звука?

#javascript #reactjs #next.js #html5-audio

Вопрос:

У меня есть ReactJS NextJS приложение, в котором есть Audio компонент. Всякий source раз, когда он обновляется, я хочу, чтобы приложение load() , а также play() недавно выбранный трек немедленно (без необходимости пользователю самому нажимать play . В настоящее время обновление исходного кода просто загружает новую дорожку в плеер и не запускает воспроизведение.

Значение source на index странице задается через a hook , доступ к которому осуществляется через React Context API :

 const [trackToPlay, setTrackToPlay] = useState("SELECT A CHAPTER");

Ниже приведен аудиокомпонент. На Index странице, source из плеера устанавливается динамически:

 <audio ref={audioPlayer} preload="metadata" id="a1" src={{
                    "/": `${trackToPlay}.mp3`,
                }[router.asPath]
                }
                    type="audio/mpeg"
                ></audio>

Ниже приведена togglePlayPause функция, которая обращается к audioPlayer Ref hook , но, как вы можете видеть, она не запускается при включении Src . Это срабатывает при user нажатии play :

     const togglePlayPause = () => {
        const prevValue = isPlaying;
        setIsPlaying(!prevValue);
        if (!prevValue) {
            audioPlayer.current.play();
            animationRef.current = requestAnimationFrame(whilePlaying);
        } else {
            audioPlayer.current.pause();
            cancelAnimationFrame(animationRef.current);
        }
    };

Эта функция обновляет источник, но это просто крюк реакции, который не влияет на статус воспроизведения:

 <div
   className={styles.track}
      onClick={() => {
         changeTrack(d.chapter);
         changeTrackTime(d.time);
      }}
   >
        <--trackName-->
</div>

Как я могу инициировать play выбор нового трека? Я думаю, что мне нужно использовать useEffect для повторного load() togglePlayPause ввода fn всякий раз, когда src меняется, но я не совсем уверен, как это сделать.

Метки: ,