Howler.js 无法识别音频文件的 src 路径

使用 HTML5 内置音频标签成功播放音频文件后，我尝试切换到使用嚎叫者.js反而。

我已经验证 howler.js 已正确安装，并且正在使用 console.log 调用创建/播放我的歌曲的方法，但我很困惑为什么此处无法识别该路径：

new Howl({src: ['../music/lofi.mp3']}) 

而同样的路径在这里工作得很好：

<audio autoplay>
    <source src="../music/lofi.mp3" type="audio/mpeg" id="track"/>
</audio>

export default {
    name: "HelloWorld",
    methods: {
        pickRandomSong() {
            var sound = new Howl({
                src: ['../music/lofi.mp3']
            })
            sound.play()
            console.log('shoulda played that sound!')
        beforeMount() {
            this.pickRandomSong()
        }

...

我还尝试将 lofi.mp3 放在与此 vue 文件相同的目录中并更新相应的路径（lofi.mp3），但这似乎也不起作用。

想知道是否与调用的方法有关beforeMount()。第一次尝试vue，还不是很了解

没有看到组件结构的完整实现，我怀疑数据未在组件中初始化，或者应该绑定到 src:src.

然而，有一个 Vue-howler 实现可以作为 mixin 工作。

安装：npm install vue-howler --save

创建音频播放器组件：

<script>
import VueHowler from "vue-howler";

export default {
  mixins: [VueHowler]
};
</script>

<template>
  <div>
    <span>Total duration: {{ duration }} seconds</span>
    <span>Progress: {{ progress * 100 }}%</span>
    <button @click="togglePlayback">{{ playing ? "Pause" : "Play" }}</button>
    <button @click="stop">Stop</button>
  </div>
</template>

在您的视图实例中使用它：

<script>
import AudioPlayer from "./components/audio-player.vue";

export default {
  components: {
    AudioPlayer
  },

  data() {
    return {
      audioSources: ["http://www.hochmuth.com/mp3/Haydn_Cello_Concerto_D-1.mp3"]
    };
  }
};
</script>

<template>
  <div><audio-player :sources="audioSources" :loop="true"></audio-player></div>
</template>

代码沙箱：Demo https://codesandbox.io/s/k905r41rqv