Howler js strange behavior

howl-sprite-scales.hype.zip (446.9 KB)
As you can see in the zip there is no problem playing the sprites.
However when I integrate Howler in an existing project (my Magic Circle of 5ths) I run into a problem.

I'm pretty sure I have done the same things on both projects.
Any ideas?

Edit:
I copied a scene to a new project. And there it works. Something in the original project must block the path to the mp3 file I guess.

I get an error when I hit the stop button.

Error in undefined: ReferenceError: Can't find variable: scale Thats because the var scale is a local var and not one either in the Hype docs scope or global.

Not getting the error you seem to be getting..
Was the file you posted the original?

Yep, the stop button doesn't work yet.

The posted file is the one that works. The original is too big to post.

The only way I can get the error you get is by removing the .mp3.

The strange thing here is that the posted file works okay. The file in which I integrated the same procedure does not.

I will PM you the original with the problem if that's okay with you

Sure.

It looks like you would be missing the ${resourcesFolderName}/ in referencing the file. I can tell by the URL that it doesn't have the "index.hyperesources" folder as part of the request for the scaleC.mp3. This does exist in the one you attached:

 var scale = new Howl({
        src: ["${resourcesFolderName}/scaleC.mp3"],

I also see this and @MarkHunte is right; you'd need to store the scale var you made in untitledFunction2() in a more global context (like window or hypeDocument.customData) in order to access it in your stop() function.

The funny thing is he does have it in the original.

var scale = new Howl({
src: ["${resourcesFolderName}/scaleAs.mp3"],

I get the same thing if I run it in preview.

But if I export it plays.

In the preview source code I see

}\nvar scale = new Howl({\n src: ["./scaleAs.mp3"],\n

Which does not seem right.

But now it seems to be doing ./

I even see in the preview source.

stuff like this

"4": {
                n: "images/Pasted.png",
                g: "170",
                t: "@1x"
            },
            "30": {
                p: 2,
                n: "media/scaleAs.mp3",
                g: "30990",
                t: "audio/mpeg"
            },
            "13": {
                n: "images/oranje-4.png",
                g: "791",
                t: "@1x"
            },

where as in the export.

  },
            "30": {
                p: 2,
                n: "scaleAs.mp3",
                g: "30990",
                t: "audio/mpeg"
            },
            "13": {
                n: "oranje-4.png",
                g: "791",
                t: "@1x"

And in the preview of the version in this thread. the above stuff looks normal.

 p: 2,
                n: "scaleC.mp3",
                g: "18",
                t: "audio/mpeg"
            },
            "-2": {
                n: "blank.gif"
            },
            "4": {
                p: 2,
                n: "scaleA.mp3",
                g: "19",
                t: "audio/mpeg"
            },

scale = new Howl({\n src: [\"index.hyperesources/scaleC.mp3\"],\n

Maybe you are previewing with an export script? (Export scripts like the Organized Assets one that rewrite resource paths aren't compatible with ${resourcesFolderName} directives)

1 Like

Nope, just hitting the preview icon.
The example in this thread does not do it.

Might be that Javascript ES6 template literal expressions are getting in the way as they share the same notation. Although it would be strange as the quotes are only regular and no back ticks. Update: Don't have the problem. In the stop function scale is referenced as a global but it isn't.

1 Like

Ok my bad. I did not notice I had the OrganisedAssets Ticked. Seems it is persistent between quitting and opening Hype.

Max is right.

The reason I was still getting errors was because I had not realised I had OrganisedAssets checked when previewing.


Update.

So it turns out that the real issue was because @Djon had set the preview of his original file ( not in this thread ) to use the export script Organised Assets.

So the preview was putting the mp3 inside an asset folder, which meant Howl could not find it. This is expected behaviour so long as you realise you are previewing in Export script mode.

Which @Djon had not.

What we did not realise is that the preview mode for export scripts gets saved per document. So because I also have the same export script, my Hype picked up the pref and set it to on and I did not realise it was doing this.

Some where along changing that to none and changing the quotes just put my testing in a muddle. :roll_eyes:

5 Likes