相关疑难解决方法(0)

尝试使用 Vue.js 播放 mp3

目标:

  • 尝试使用具有播放暂停状态的本地文件向我的项目添加背景声音。

加载外部 URL 文件似乎没问题并且播放/暂停正常,但不是本地文件。

问题:

  • 另外,URL http://....mp3 文件可以播放而我的本地文件不能播放的确切原因是什么?

问题:

  • 网络状态为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>
Run Code Online (Sandbox Code Playgroud)

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 …
Run Code Online (Sandbox Code Playgroud)

javascript html5-audio vue.js

5
推荐指数
1
解决办法
9742
查看次数

标签 统计

html5-audio ×1

javascript ×1

vue.js ×1