[Vuejs]-Play one Audio at the time in VueJS

This was a fun little challenge, thank you! Just tried replicating your code in a code sand box. Other than changing

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

to

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

The rest of my solution was to hook into the play event of the audio element and using $ref to target the audio players pause function like so:

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

Hopefully I under stood you question correctly, and this solution works for you

i deleted controls of the audio and handle this by using btn on my own

  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;
    },

I added the following to the player.pause(); line from Chad Roberts’ answer below because I couldn’t get the players to restart after I paused them:

if (newTrack == this.currentTrack) {} else {player.pause()}

I also used urls instead of track titles for the stopOthers argument and refs because they were more unique.

This solution should also work for videos.