尝试使用 Vue.js 播放 mp3答案

【问题标题】：Trying to play mp3 using Vue.js尝试使用 Vue.js 播放 mp3
【发布时间】：2020-07-11 12:53:20
【问题描述】：

目标：

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

加载外部 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>

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");
        }
      },
    }

【问题讨论】：

stackoverflow.com/questions/21737224/…

标签： javascript vue.js html5-audio

【解决方案1】：

我只是将音频 src 添加到 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>

【讨论】：