尝试使用 Vue.js 播放 mp3 [英] Trying to play mp3 using Vue.js

问题描述

目标:

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

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

问题:

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

问题:

• 网络状态为状态代码:206 部分内容
• 控制台错误是 Uncaught (in promise) DOMException: The play() 请求被调用 pause() 中断.

HTML:

 
<音频ref=音频"预加载=自动"体积=0.1"静音环形><源代码:src=文件"/><div @click="toggleSound(file)";class="toggle-sound paused"></div>

JS:

 数据:() =>({...,文件:/public/audio/bg-music.mp3"；}),方法: {切换声音(){让音频 = this.$refs.audio;如果 (audio.paused &&document.querySelector(".toggle-sound").classList.contains("paused")){console.log(播放")音频播放()；document.querySelector(".toggle-sound").classList.remove("paused");} 别的 {console.log("暂停")音频暂停()；document.querySelector(".toggle-sound").classList.add("paused");}},}

解决方案

我只是将音频源添加到 audio 标签中，如下所示，它起作用了！

<音频ref=音频"src="@/assets/audio/bg-music.ogg";预载环形id=音频"静音></音频><div @click="toggleSound()";class="toggle-sound"></div>

Goal:

• Trying to add a background sound to my project with a local file that has a play pause state.

Loading an external URL file seems ok and plays/pauses fine, but not local file.

Question:

• Also what is the exact reason a URL http://....mp3 file plays and my local does not?

Issue:

• Network status is Status Code: 206 Partial Content
• Console error is 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");
        }
      },
    }

解决方案

I simply added the audio src to the audio tag like the below and it worked!

<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>

这篇关于尝试使用 Vue.js 播放 mp3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！