Javascript 在NextJS应用程序中更改播放器的音频源

我在NextJS（React）应用程序中编写了两个功能组件。其中一个组件提供“从曲目列表中选择曲目”

fn

，另一个组件--

player

组件--具有自定义HTML5

audio

元素，其中源

src

通过上下文挂钩由

tracklist

组件上选择的曲目更新

问题是，尽管（我认为）从

轨迹列表

中单击

轨迹

，更新了

src

，但在选择新的

轨迹

后，没有调用

.load（）

方法，这可能就是为什么

src

实际上没有改变-如果按“播放”，相同的初始化曲目将继续播放：

• 在页面加载时，初始化的曲目将播放（当我单击

  播放

  时）。如果我选择了一个新曲目，如果我按play（即使我选择了一个新的

  曲目

  ），相同的初始化曲目将继续播放-显然，

  音频

  元素的

  src

  没有实际更新

以下是“应该”更新

src

值的插值字符串：

/[..]/[..]/${track}.mp3

我“认为”这条路径是正确的，因为我可以

控制台.log

跟踪

，并且它确实正确地更新了

onClick

。但是，当用户选择一个新的源代码时，播放器似乎并没有实际更新其源代码

src

如何更新源？

旁白：播放器有一个

播放

按钮和一个

暂停

按钮。单击其中一个会触发一个单独的函数。有没有办法为

播放

和

暂停

创建钩子？e、 g.通过

useState

或

useffect

---

代码： 我看到的挑战是通过上下文挂钩设置

src

（即

URL

参数），但我不完全确定如何设置

背景基本上是这样的：

const [trackToPlay, setTrackToPlay] = useState("Track-1");
const changeTrack = (chapter) => setTrackToPlay(chapter);

下面的代码显示了如何从曲目列表中选择曲目

{[
    { chapter: "1" },
    { chapter: "2" },
              ].map((d) => (
                <div>
                  <div onClick={() => changeTrack(d.chapter)}>
                    <span className={styles.trackChapter}>{d.chapter}</span>{" "}
                  </div>
                </div>
))}

{[
{第章：“1”}，
{第章：“2”}，
].map（（d）=>(
变更跟踪（d章）}>
{d.章}{”“}
))}

您在哪里处理单击事件以选择新曲目？另外，您可以共享

AudioContext

代码吗？

trackNames

是通过上下文挂钩设置状态以播放单击的曲目的所有按钮。当前，

play

按钮触发

onLoad（）

，但这意味着每次单击

play

（例如在

pause

之后），

曲目将重新从头开始。“其中一个组件提供了一个“从曲目列表中选择曲目”fn”-我们还需要查看该组件的代码。我更新了问题中的代码部分。
const [trackToPlay, setTrackToPlay] = useState("Track-1");
const changeTrack = (chapter) => setTrackToPlay(chapter);

{[
    { chapter: "1" },
    { chapter: "2" },
              ].map((d) => (
                <div>
                  <div onClick={() => changeTrack(d.chapter)}>
                    <span className={styles.trackChapter}>{d.chapter}</span>{" "}
                  </div>
                </div>
))}