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 解析为文件。

2. 错误会被忽略，但您可以设置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 })
      }
    })
  }
}