时间戳

首页 > 解决方案 > 如何访问 Audio Src 以便 Src 的任何更新都会触发音频播放？

javascript - 如何访问 Audio Src 以便 Src 的任何更新都会触发音频播放？

问题描述

我有一个包含组件的ReactJS NextJS应用程序。Audio每当source更新时，我希望应用程序load()以及play()新选择的曲目立即（用户不需要自己单击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);
        }
    };

此函数更新源，但它只是一个不影响播放状态的 React 钩子：

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

如何play在选择新曲目时触发？我想我需要在 src 更改时useEffect重新load()使用togglePlayPausefn ，但我不完全确定如何。

标签： javascriptreactjsnext.jshtml5-audio

解决方案

推荐阅读