Motive:
- My objective is to incorporate a background sound into my project using a local file that can be played and paused.
While loading an external URL file works fine and allows for play/pause functionality, I am encountering issues with the local file.
Inquiry:
- What could be causing the discrepancy between playing a URL http://....mp3 file successfully versus my local file?
Challenge:
- The network status shows
Status Code: 206 Partial Content - The console error indicates
Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().
HTML:
<div class="music-player">
<audio
ref="audio"
preload="auto"
volume="0.1"
muted
loop
>
<source :src="file" />
</audio>
<div @click="toggleSound(file)" class="toggle-sound paused"></div>
</div>
JS:
data: () => ({
...,
file: "/public/audio/bg-music.mp3"
}),
methods: {
toggleSound() {
let audio = this.$refs.audio;
if (
audio.paused &&
document.querySelector(".toggle-sound").classList.contains("paused")
) {
console.log("play it")
audio.play();
document.querySelector(".toggle-sound").classList.remove("paused");
} else {
console.log("pause it")
audio.pause();
document.querySelector(".toggle-sound").classList.add("paused");
}
},
}