Question 295196 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – vue3 – dynamic ref in computed status // repeating a player n times in a table and having a play/pause button

on the vue3 page below I have integrated a player that shows a "play" icon when the player is stopped, and a "pause" icon when it’s playing.

What I am now trying to do is to let the player repeat n-times by including it in a table.

The difficulty I have is that I currently use the "ref" of the player ("audioPlayer") below as input to the "compute", and since when I repeat the player n-times I can’t hard-code the player’s ref, I need to find a way how the "isPlaying" is evaluated dynamically for the audioPlayer in the respective Row.

I tried to use methods, higher-order functions (as explained here) but have not been able to figure it out.

Any pointers would be appreciated.

Thank you

P.s. The below example works; What is missing is sticking he player in the repeating , since there I have not been able to figure out how to compute the isPlaying correctly depending on which row I am in

<template>
  <div v-for="index in 3" :key="index"> 
    {{ index }}. player should go here <p></p> <!-- <<<<<<<<< The player below should be repeated here -->
    ----------------------------------
  </div>

  <div v-if="!isPlaying" class="audio__play-start"  @click.stop="this.$refs.audioPlayer.play"><q-icon name="play_circle"></q-icon></div>
  <div v-else class="audio__play-pause" @click.stop="this.$refs.audioPlayer.pause"><q-icon name="pause_circle"></q-icon></div>
  
  <div>
    <audio-player
      ref="audioPlayer"
      :audio-list="['./api/soundfiles?path=/tmp&filename=rock.mp3']"
      theme-color="black"
      :show-prev-button="false"
      :show-next-button="false"
      :show-play-button="false"
      :show-volume-button="false"
      :show-playback-rate="false"
    />
  </div>
</template>

<script lang="ts">
import { ref, computed } from 'vue';

export default {
  
  setup () {
    const audioPlayer =  ref(Object)
    const isPlaying = computed(() => {  
      return audioPlayer.value.isPlaying
    })

    return {
      audioPlayer,
      isPlaying
    }
  },

}
</script>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thank you @moon and @yoduh.

    Your solution works, @yoduh, but unfortunately I have additional events (such as playing on the "progress bar" that can start the playing of the file, thus using the variable "isPlaying" to track which ones are playing does not work for me.

    I used the suggestion by @yoduh and solved it via a method. Thanks again to both of you for your time and kind pointers.

    <template>
  <div v-for="index in 3" :key="index"> 
    {{ index }} ---------------------------------- <p></p> 
    {{ isPlaying(index) }}

    <p></p>
  <div v-if="!isPlaying(index)" class="audio__play-start"  @click.stop="audioPlayerRefs[index].play()"><q-icon name="play_circle"></q-icon></div>
  <div v-else class="audio__play-pause" @click.stop="audioPlayerRefs[index].pause()"><q-icon name="pause_circle"></q-icon></div>
  <div>
    <audio-player
      ref="audioPlayerRefs"
      :audio-list="['./api/soundfiles?path=/tmp&filename=rock.mp3']"
      theme-color="black" :show-prev-button="false" :show-next-button="false" :show-play-button="false" :show-volume-button="false" :show-playback-rate="false" :show-play-loading="false"
    />
  </div> </div>
</template>

<script lang="ts">
import { ref } from 'vue';
import AudioPlayer from '@liripeng/vue-audio-player'
export default {
  
  setup () {
  const audioPlayerRefs = ref([Object])
    return {
      audioPlayerRefs
    }
  },

  methods: {
    isPlaying(index) {
      if (this.audioPlayerRefs[index] == undefined){return false}
      return this.audioPlayerRefs[index].isPlaying
    }
  }

}
</script>

  2. 0 
    <template>
  <div v-for="index in 3" :key="index"> 
    {{ index }}. player should go here <p></p> <!-- <<<<<<<<< The player below should be repeated here -->
    ----------------------------------
  </div>

  <div v-if="!isPlaying[index]" class="audio__play-start"  @click.stop="playerRefs[index].play(),isPlaying[index]=true"><q-icon name="play_circle"></q-icon></div>
  <div v-else class="audio__play-pause" @click.stop="playerRefs[index].pause(),isPlaying[index]=false"><q-icon name="pause_circle"></q-icon></div>
  <div>
    <audio-player
      :ref="(el)=>setPlayerRef(el, index)"
      :audio-list="['./api/soundfiles?path=/tmp&filename=rock.mp3']"
      theme-color="black"
      :show-prev-button="false"
      :show-next-button="false"
      :show-play-button="false"
      :show-volume-button="false"
      :show-playback-rate="false"
    />
  </div>
</template>

<script lang="ts">
import { ref, computed } from 'vue';

export default {
  
  setup () {
  const playerRefs= {}
  const setPlayerRef = (el, key) => {
     if (el) {
        playerRefs[key] = el
      }
   }

    const isPlaying = ref({1:false,2:false,3:false})
    return {
      isPlaying,
      setPlayerRef,
      playerRefs
    }
  },

}
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search