Howler.js:声音不加载

Question

遵循basic example in the docs，但是声音不能播放。我在Network选项卡中看到了mp3文件，但它的大小是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>

Answer 1

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

1. 资产URL需要为required，以便Webpack解析文件的实际URL。

1. 错误将被静默忽略，但您可以设置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 })
      }
    })
  }
}