GET http：// localhost：3000 / components / t.mp3 net :: ERR_ABORTED 404（未找到）

Question

我想问为什么我不能同时使用Howler和Html5从本地PC播放mp3文件，但是却可以使用HTML5播放URL。它说它无法以任何方式（咆哮或html5）找到我的本地mp3文件。我尝试添加'./components/t.mp3''../components/t.mp3''src / components / t.mp3'仍然无法正常工作。可能是因为NuxtJs吗？尝试添加类型：“ audio / mpeg”（适用于html5），并且尝试使用其他浏览器，但问题仍然存在。

我在浏览器控制台中得到的错误消息：

获取http://localhost:3000/components/t.mp3净值：: ERR_ABORTED 404（未找到）

代码：

<template>
  <div
    class="test"
  >
    <v-btn
      @click="playSound()"
    />
  </div>
</template>
<script>
require('howler')
export default {
  methods: {
    playSound () {
      const sound = new Audio('/components/t.mp3')
      // const sound = new Howl({   --- it doesn't work either.
      //   src: '/components/t.mp3'
      // })
      sound.play()
    }
  }
}
</script>
<style>
.test{
  margin: auto;
}
</style>

YES.mp3也是如此

Answer 1

您必须将文件添加到Assets目录（其中有静态文件），然后需要该文件。如果您不想保存在静态文件中，也可以使用任何其他路径进行操作。

示例：

/assets/music/file.mp3

data(){
    return {
        music: require('@/assets/music/file.mp3')
    }
},
methods:{
    playMusic(){
       const sound = new Audio(this.music)
       sound.play()
    }
}

然后您可以在this.music中使用您的方法

如果使用Webpack，则必须使用文件加载器，将其添加到规则中，如该线程中的解释：Serving mp3 files using the webpack file loader