1

I'm trying to play an audio file using Howler.JS on a Vue page. Due to the Chrome AudioContext policy issue, I decided to wait for user interaction which will fire a method to start playing the audio file. However, no audio is played. I've checked and confirmed that the method is running so it seems to be something wrong with the Howler.JS part of the code.

I'm running the page on Chrome 75.0.3770.100 (Official Build) (64-bit) on macOS Mojave 10.14.5 (18F132) with Vue.JS 2.6.10 and Howler.JS 2.1.2. I found this solution (have not tried it) Howler.js doesn't recognize src path to audio file but it is not applicable as vue-howler is unmaintained.

<script>
import { Howl, Howler } from 'howler';

export default {
  name: 'Lobby',
  data() {
    return {
      userInteracted: false,
    }
  },
  methods: {
    interacted: function () {
      this.userInteracted = true

      var sound = new Howl({
        src: [require('../assets/waiting.mp3')]
      });

      sound.play();
    }
  }
};
</script>
Niaz M. Sameer
  • 13
  • 1
  • 4
  • The question doesn't contain all information that is necessary to replicate it. It should contain https://stackoverflow.com/help/mcve . Debug what `require('../assets/waiting.mp3')` is, since it's specific to your build. See https://www.npmjs.com/package/howler#src-arraystring--required , it's supposed to be *URLs or base64 data URIs*. – Estus Flask Jun 22 '19 at 13:07

2 Answers2

2

You should set property html5=true in howl object,so it looks

   var sound = new Howl({
    src: [require('../assets/waiting.mp3')],
    html5:true

  });
Kamalakar
  • 389
  • 2
  • 9
0

You can play sounds the same way via HTML5 Audio

register playSound() as a global method

    Vue.prototype.$playSound = (path, volume = 1) => {
      var audio = new Audio(path);
      audio.volume = volume
      audio.play();
}

this.$playSound('sounds/click.wav')

 <button @click="$playSound('sounds/click2.wav')">Click me!</button>
Ryker
  • 51
  • 5