Howler.js: No sound/file not playing - Vue.js

[DerekCrosson]

Hello,

I'm creating a web app in Vue.js and when I try to add Howler the method runs but sounds aren't working. This is my code:

<template>
  <div class="dashboard">
    <section class="section">
      <div class="container">
        <button v-on:click="playSound('click.mp3')">
          Test
        </button>
      </div>
    </section>
  </div>
</template>

md5-cbd506e9e86192fb17f8acf59b4b9b26



console.log(sound.state());



md5-d61c929b48670d27e235fe9a55017379



sound.play();

and the output is "loading".

So I'm assuming that everything in my code is correct but the file just isn't being loaded? Is this correct?

[darren-dev]

Looks like you skipped the fundamentals of asset loading. From your code it looks like you're trying to load an audio file from the assets folder - that means you're trying to load a _dynamically imported file_ in a static manner.

If you want to load audio like that, and have it work, then you need to move your audio to the public or static folder (Whichever is your public folder) OUTSIDE your src folder, because then the assets inside won't be bundled and you can easily get them at runtime.

[DerekCrosson]

Looks like you skipped the fundamentals of asset loading. From your code it looks like you're trying to load an audio file from the assets folder - that means you're trying to load a _dynamically imported file_ in a static manner.

If you want to load audio like that, and have it work, then you need to move your audio to the public or static folder (Whichever is your public folder) OUTSIDE your src folder, because then the assets inside won't be bundled and you can easily get them at runtime.

Thanks, @darren-dev!

Moved my assets to the public folder and it works now :) Is it a good idea to store these in the public folder or should I rather try to have the assets imported in the project?

[fpauser]

@DerekCrosson This issue should be closed as it is working now.

[DerekCrosson]

@fpauser, I'll close it now...

[darren-dev]

@DerekCrosson You're welcome :)

So the main reason you'd want to include anything in the assets folder is if you're looking to turn your site into a PWA. If you're not interested in that, or have no idea what that means (Please read about it), then keeping everything in public will work out fine for you.

Assets in your assets folder will be bundled WITH your application as "apart of the source". They will be versioned with your app (Which is why simply referencing anything in assets won't work), so you will need to literally import them (Like you would with any other source file) to have a proper reference to them.

The explanation is beyond the scope of this issue though.

[DerekCrosson]

Thanks, @darren-dev! The mobile versions will be native apps so I think public folder should be fine :)

[jzstern]

I know this issue is closed... but before creating another does anyone know why this loading issue would occur with a file located in my public folder?

From my mounted() lifecycle hook:

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

my console outputs:
loadError: 1001 - 4

see.mp3 is in my public directory and spelled correctly. this same code works if I swap the src path with a URL. the audio file also plays when using vanilla HTML5 audio. literally created a new project to test this and haven't been able to figure out why...

[darren-dev]

Just a quick note, I don't think you need to use the HTML5 player - as far as I can tell it causes more issues than it solves.

Also, there should be error.message that should give you more info.

If your last statement is true, then it's merely a reference issue (As the ../../ might not lead to the file). Try just using /public/see.mp3 as the single forward-slash should denote the root of the URL.

[jzstern]

Yeesh, sorry about the code formatting - didn't realize how poor it looks until just now. In any case, thanks for the speedy reply!

My goal is to avoid the HTML5 audio player, but I just tried to play my audio file with it to make sure that there was nothing wrong with the mp3 file & that my specified path was correct. The HTML5 player works with my original path (../../public/see.mp3) but Howler.js just gives me an error code of 4.

Tried printing error.message but it's undefined. If I understand correctly, the documentation for onloaderror says the function receives an ID & an error, although the error that is being returned is simply '4'