javascript - 在 VueJS 中同时播放一个音频

Question

我正在尝试同时播放一个音频，同时在 v-for 中有不同的音频源。
我想要做的是当我点击播放一首轨道时，播放暂停等。

我尝试通过单击外部按钮来切换播放，但无法暂停声音

他是我的模板代码，从对 deezer 的 api 调用中获取源代码并将它们作为 Prop

<template>
  <div>
  <div v-for="(track,index) in listTrack" :key="track.title">
    <div>
      <p class="pl-5">
        {{track.track_position}} - {{track.title}}
        <Notation :idTrack="track.id" :index="index" :connectedUserorNot="ifConnected"></Notation>
      </p>
      <audio controls>
        <source :src="track.preview" type="audio/mpeg">
        </audio>
    </div>
    </div>
  </div>
</template>

谢谢

Answer 1

这是一个有趣的小挑战，谢谢!刚刚尝试在代码沙箱中复制您的代码。除了改变

<audio controls>
    <source :src="track.preview" type="audio/mpeg">
</audio>

到

<audio 
    controls
    :src="track.preview" 
    type="audio/mpeg"
>
</audio>

我的解决方案的其余部分是连接到音频元素的播放事件并使用 $ref 来定位音频播放器暂停功能，如下所示:

<template>
  <div id="app">
    <img width="25%" src="./assets/logo.png">
    <h1>Orginal code example</h1>
    <div v-for="track in listTrack" :key="track.title">
      <div>
        <audio
          :ref="`player-${track.title}`"
          controls
          :src="track.audioURL"
          type="audio/mpeg"
          @play="stopOthers(track.title)"
        ></audio>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      listTrack: [
        {
          audioURL:
            "http://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3",
          title: "test"
        },
        {
          audioURL:
            "http://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3",
          title: "test2"
        },
        {
          audioURL:
            "http://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3",
          title: "test3"
        },
        {
          audioURL:
            "http://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3",
          title: "test4"
        }
      ],
      currentTrack: null
    };
  },
  methods: {
    stopOthers(newTrack) {

      if (this.currentTrack) {
        let refName = `player-${this.currentTrack}`;
        let player = this.$refs[refName][0];
        player.pause();
      }
      this.currentTrack = newTrack;
    }
  }
};
</script>

希望我正确理解了您的问题，并且此解决方案对您有用