使用 ReactAudioPlayer 重现多个音轨

Question

我成功地使用react-audio-player重现了一个音轨；现在我需要重现多首曲目，并可能按顺序重现它们（但没有自动播放：我需要手动启动第一个，然后自己开始下一个）。可以这样做吗？

我做了什么：

<ReactAudioPlayer
     src="https://www.examplelink1.com/example1.mp3"
     controls
/>

我需要的：

<ReactAudioPlayer
     src=["https://www.examplelink1.com/example1.mp3", "https://www.examplelink2.com/example2.mp3"]
     controls
/>

Answer 1

如果您阅读文档，src 属性类型是“String”，所以您不能传递数组。

一种简单的方法是为每个曲目创建一个播放器组件，使用 onEnded 属性捕获当前的结束曲目并相应地更改应用程序状态。

您的状态将有一个 currentIndex: 0 属性，它是当前曲目的索引。 当您映射曲目数组时，您检查数组的当前元素索引是否等于 currentIndex 作为自动播放属性值。

在 onEnded 回调中增加索引。