目标:
加载外部 URL 文件似乎没问题并且播放/暂停正常,但不是本地文件。
问题:
问题:
Status Code: 206 Partial Content
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");
}
},
}
最佳答案
我只是将音频源添加到 audio
像下面这样的标签,它起作用了!
<div class="music-player">
<audio
ref="audio"
src="@/assets/audio/bg-music.ogg"
preload
loop
id="audio"
muted
></audio>
<div @click="toggleSound()" class="toggle-sound"></div>
</div>
关于javascript - 尝试使用 Vue.js 播放 mp3,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62824950/