Spotify 音轨克隆

Question

我正在尝试克隆Web Spotify，我的项目位于Github。我一直在使用的框架是 Vue.js。

现在我正在尝试克隆this page，用户可以在其中单击曲目，播放列表中的相应曲目。现在我可以为每个轨道获取一个对象，并且有一个preview url，例如"preview_url" : "https://p.scdn.co/mp3-preview/4839b070015ab7d6de9fec1756e1f3096d908fba", 我可以使用音频标签来播放音乐的预览。

问题是当点击相应的播放按钮时，我不知道如何播放给定的曲目。

<track-display v-for="track in tracks" :track-title="TITLE" :artist="artist" :album="ALBUM"></track-display>

track-display 是我创建的一个组件，它假设包含曲目标题、艺术家和专辑，如下所示：

现在，我有一个数组tracks，它存储了所有的轨道对象。如何检测点击了哪个轨道元素并播放相应的轨道？

Answer 1

您将需要使用 Vue.js Custom event。而且您还需要接受一个附加参数trackNum，以便父级知道单击了哪个轨道。你的代码应该变成这样：

<track-display v-for="(track, index) in tracks" :track-title="TITLE" :artist="artist" :album="ALBUM" :trackNum="index"></track-display>

当您发出事件时，您将需要以下内容：

methods: {
  togglePlayState() { this.$emit('togglePlay', trackNum); },
}

您需要在父级中捕获事件并播放tracks 数组中对应的preview-url，因为trackNum 对应于tracks 中的位置。