On the Vue3 page below, I have successfully integrated a player that displays a "play" icon when the player is stopped and a "pause" icon when it's playing.
Now, my goal is to allow the player to repeat n times by placing it in a table.
The challenge I am facing is that I currently use the "ref" of the player ("audioPlayer") as input for the "compute". When I repeat the player n times, I cannot hard-code the player's ref, so I need to dynamically evaluate the "isPlaying" status for the audioPlayer in each respective row.
I have attempted to utilize methods and higher-order functions (as mentioned here), but I haven't been able to find a solution.
Any guidance on this matter would be greatly appreciated.
Thank you.
P.s. The example provided works fine; however, I am struggling with inserting the player within the repetition loop, as I can't seem to compute the isPlaying property correctly depending on which row I'm in.
<template>
<div v-for="index in 3" :key="index">
{{ index }}. Player should be placed here <p></p> <!-- <<<<<<<<< The player should repeat in this section -->
----------------------------------
</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>