Howler.js: Sounds not playing in Vue.js

Created on 18 Apr 2019 · 2Comments · Source: goldfire/howler.js

Posted about this in #1157, but creating a new issue since I haven't been able to fix it. My end-goal is to play an audio file that I've downloaded from IPFS, but when that didn't work I resorted to testing with a 'local' file (placed inside the public directory of my Vue project).

I've included the required Howler just below my script tag along with properly installing via npm: import { Howl } from 'howler';

And in my mounted() lifecycle hook, I have the following code:

var sound = new Howl({
      src: ['../../public/see.mp3'],
      html5: true,
      autoplay: true,
      volume: 1.0,
      format: 'mp3',
      onload: function() { console.log('song loaded!')},
      onloaderror: function(id, error) { console.log('loadError: ' + id +' - ' + error); }
})

I can successfully play the mp3 file when using the HTML5 audio player, so I know the path is correct and there's nothing wrong with the file. If I change the source to a URL (e.g. https://gateway.pinata.cloud/ipfs/Qmbzg4XXtaZwSNkn5WUVdWwQ6kU2GaCJnL9Ehqi4hakq5V) Howler has no issue playing it. I've also tried placing the mp3 file in different directories (e.g. assets) and using variations of the file path (/public/see.mp3) to no avail. However, I continue to receive an error when referencing the correct file path:
loadError: 1002 - 4

Created a brand new project to test this, so pretty stumped as to what I could be doing wrong here. Would expect the file to load successfully, and haven't found any helpful documentation/forums that explain what an error code of '4' means. It seems like others do not have this issue, so hoping someone can shed some light here.

Thanks <3

Source