Question

在成功播放带有HTML5内置音频标签的音频文件后，我尝试切换为使用 howler.js 。

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

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，但对它还没有很好的了解

Answer 1

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

但是，有一个Vue-howler实现可用作混合。

安装：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>

codesandbox：Demo

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

1 个答案: