Howler.js：声音不加载

问题描述

跟随basic example in the docs，但没有播放声音。我在 mp3 标签中看到 Network 文件，但它是 90KB 而不是 5MB，所以我想它没有正确加载。

我尝试了不同的路径：src: ['@/assets/audios/test.mp3']，`src: ['../assets/audios/test.mp3']。什么都行不通。没有控制台错误。为什么它不起作用？

<template>
  <div class="container">
    <button @click="play">
      PLAY
    </button>
  </div>
</template>

<script>
import { Howl,Howler } from 'howler'

export default {
  data () {
    return {
      sound: ''
    }
  },mounted () {
    this.sound = new Howl({
      src: ['test.mp3']
    })
  },methods: {
    play () {
      this.sound.play()
    }
  }
}
</script>

解决方法

听起来您正在尝试加载 src 的资产 URL。

资产 URL 需要 required 以便 Webpack 解析文件的实际 URL。
错误会被默默忽略，但您可以设置 onloaderror 来处理它们。

export default {
  mounted () {
    this.sound = new Howl({
      // 1
      src: [
        require('@/assets/audios/test.mp3')
      ],// 2
      onloaderror(id,err) {
        console.warn('failed to load sound file:',{ id,err })
      }
    })
  }
}