HowlerJS loading issue on build

[kimonmeier]

Dear Rajaniraiyn

Im currently using svelte-sound in my project Repo. While running the vite dev server everything works as intended without any errors. But as soon as im trying to build the project with the static or node adapter the whole thing falls apart. It looks like the howler core couldn't be correctly loaded. I created an empty project to test the behaviour. Empty Repo. Still the same issue. Do you have any idea what could be wrong?

Steps to reproduce:

• Use svelte-sound only programmaticly
• Build with node or static adapter
• npm preview
• Open the Page and look in the console

Btw. Thanks for your awesome project <3

[Rajaniraiyn]

Hi @kimonmeier,

Thank you for reaching out and for your support!

I've tested the repo to reproduce the issue you mentioned. It appears that the problem arises because you are attempting to play audio within onMount without any user interaction.

To enable autoplay behavior, specific conditions must be met. You can find these requirements detailed in the Autoplay Guide.

Below is the modified code that works by playing audio on user interaction (click):

If this helps resolve your issue, please close this thread. If you are still facing any problems, feel free to continue the discussion here or open a new issue.

[kimonmeier]

Thank you so much for answering so fast.

I changed my example in the Testing Repo so it meets the autoplay guide. Sadly, it still doesn't work. I want to further clarify that the problem only appears if i build the project with an adapter, the issue doesn't appear if I just start the dev server with npm run dev. For it to appear, I need to build it and then run it with npm run preview. I think it has something to-do with the dynamic import. I would appreciate it if you could take another look over it.

[Rajaniraiyn]

@kimonmeier Thanks for getting back. I got the bug and started working on it. its just double bundling of howlerjs. I'll update you with some temporary fix as well as update the library with fixes

[kimonmeier]

Hey @Rajaniraiyn

Hope you had a great time so far. I just wanted to ask if you've got any eta on the fix.

Kind Regards

[IamAlexandros]

Had the same issue after building with vite.

I installed howler in my project bun install howler and made a simple patch that looks like this

diff --git a/dist/svelte-sound.js b/dist/svelte-sound.js
index 7f7eb48e9246e4ce611d2164dcabb94aedcca7f7..9c0adb92845747d2c559f17f1a2083b0af27a29d 100644
--- a/dist/svelte-sound.js
+++ b/dist/svelte-sound.js
@@ -4,6 +4,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
+const DEV = process.env.NODE_ENV === "development";
 class Sound {
   /**
    * Creates a new SyntheticSound instance.
@@ -21,9 +22,16 @@ class Sound {
    * Creates the Howl instance for the sound.
    */
   async create() {
-    const { Howl } = await import("./howler.core-e669a980.js").then((n) => n.h);
+    let _Howl;
+    if (DEV) {
+      const { Howl } = await import("./howler.core-e669a980.js").then((n) => n.h);
+      _Howl = Howl;
+    } else {
+      const {Howl} = await import("howler")
+      _Howl = Howl;
+    }
     const { loop, volume } = this.options;
-    const sound2 = new Howl({
+    const sound2 = new _Howl({
       src: this.src,
       loop: loop || false,
       volume: volume || 1,

And patched it with bun using
bun patch --commit 'node_modules/svelte-sound'
You can also use npm with the "patch-package" package with
npx patch-package svelte-sound

Hope that helps until the actual fix comes along!