Howler.js doesn't recognize src path to audio

Question

After successfully playing an audio file with the HTML5 built-in audio tag, I'm trying to switch to use howler.js instead.

I've verified that howler.js is properly installed and that the method which creates/plays my song is being called with a console.log, but I'm confused as to why the path isn't recognized here:

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

while the same path works just fine here:

<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()
        }

...

I've also tried putting lofi.mp3 in the same directory as this vue file and updating the corresponding path (lofi.mp3) but that doesn't seem to work either.

Wondering if it has something to do with the method being called in the beforeMount(). First time experimenting with vue and don't have a great understanding of it yet

Answer 1

Not seeing the full implementation of your component structure, I suspect the data is not initialized in the component or the binding to src should be :src.

However, there is a Vue-howler implementation that works as a mixin.

install: npm install vue-howler --save

create audio player component:

<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>

use it in your view instance:

<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