Воспроизведение одного аудио за раз в VueJS

Question

Я пытаюсь воспроизвести один звук одновременно с другим источником звука в V-for. То, что я пытаюсь сделать, - это когда я нажимаю кнопку воспроизведения на одной дорожке, воспроизводимая пауза останавливается и т. Д. c.

. sound

он - мой шаблонный код, получающий исходный код из API-вызова deezer и получающий их как 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>

thx

Answer 1

я удалил элементы управления аудио и обработал это, используя btn самостоятельно

  stopOthers(newTrack, index) {
      if(this.currentTrack == null ){
        let refName = `player-${newTrack}`;
        let player = this.$refs[refName][0];
        player.play();
        this.playerPlaying = player
        this.currentTrack = newTrack;
        this.thisTrackisPlaying = true
        this.indexOfTrack  = index
      } else if (this.currentTrack == newTrack) {
        var current = this.currentTrack
        let refName = `player-${current}`;
        let player = this.$refs[refName][0];
        this.currentTrack = null;
        this.playerPlaying = player
        player.pause();
        player.currentTime = 0
        this.thisTrackisPlaying = false
      }
      else if (this.currentTrack != newTrack) {
        var player2 = this.playerPlaying
        player2.pause()
        this.thisTrackisPlaying = false
        let refName = `player-${newTrack}`;
        let player = this.$refs[refName][0];
        this.playerPlaying = player
        player.play();
        this.currentTrack = newTrack;
        this.thisTrackisPlaying = true
        this.indexOfTrack  = index
      }

    //  this.currentTrack = newTrack;
    },

Answer 2

Это было забавное маленькое испытание, спасибо! Просто попытался воспроизвести ваш код в песочнице кода. Кроме изменения

<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>

Надеюсь, я правильно понял ваш вопрос, и это решение работает для вас