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

Question

我想問一下為什么我不能用 Howler 和 Html5 從我的本地電腦播放 mp3 文件，但我可以用 HTML5 播放 URL。 它說它無法找到我的本地 mp3 文件（howler 或 html5）。 我試過添加 './components/t.mp3' '../components/t.mp3' 'src/components/t.mp3' 仍然無法讓它工作。 可能是因為 NuxtJs 嗎？ 嘗試添加類型：“audio/mpeg”（對於 html5），並且嘗試了不同的瀏覽器，但問題仍然存在。

我在瀏覽器控制台中收到的錯誤消息：

GET http://localhost:3000/components/t.mp3 net::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

您必須將文件添加到資產目錄（靜態文件所在的位置），然后需要該文件。 如果您不想保存在靜態文件中，您也可以使用任何其他路徑執行此操作。

例子：

/資產/音樂/file.mp3

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

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

如果您使用 webpack，則必須使用 file-loader 將其添加到您的規則中，就像在此線程中解釋的那樣： Serving mp3 files using the webpack file loader