I'm currently developing an audio player using Vue 3 and integrating it with the Napster API.
Project specifications
The player includes a mute/unmute button and the following method:
toggleMute() {
this.player.muted = !this.player.muted;
}
const musicApp = {
data() {
return {
player: new Audio(),
trackCount: 0,
tracks: []
};
},
methods: {
async getTracks() {
try {
const response = await axios
.get(
"https://api.napster.com/v2.1/tracks/top?apikey=ZTk2YjY4MjMtMDAzYy00MTg4LWE2MjYtZDIzNjJmMmM0YTdm"
)
.catch((error) => {
console.log(error);
});
this.tracks = response;
this.tracks = response.data.tracks;
} catch (error) {
console.log(error);
}
},
nextTrack() {
if (this.trackCount < this.tracks.length - 1) {
this.trackCount++;
this.setPlayerSource();
this.playPause();
}
},
prevTrack() {
if (this.trackCount >= 1) {
this.trackCount--;
this.setPlayerSource();
this.playPause();
}
},
setPlayerSource() {
this.player.src = this.tracks[this.trackCount].previewURL;
},
playPause() {
if (this.player.paused) {
this.player.play();
} else {
this.player.pause();
}
},
toggleMute() {
this.player.muted = !this.player.muted;
}
},
async created() {
await this.getTracks();
this.setPlayerSource();
this.playPause();
},
computed: {
isPlaying() {
return !this.player.paused;
},
isMuted() {
return this.player.muted;
}
}
};
Vue.createApp(musicApp).mount("#audioPlayer");Issue at hand
My goal is to dynamically change the volume icon based on whether the player is muted or not. To achieve this, I utilize the isMuted computed property in the template:
<span class="volume" @click="toggleMute">
<i v-show="!isMuted" class="fa fa-volume-up"></i>
<i v-show="isMuted" class="fa fa-volume-off"></i>
</span>
Although the player's mute/unmute functionality works correctly, the volume icon doesn't update accordingly.