Adding and Playing Audio in ZapWorks Studio

[adam.mccormick]

Hi ZapWorks Community,

This step-by-step tutorial will run you through how to add audio to ZapWorks studio and start using it in your experience - namely how to play audio on user interaction and set it to loop.

---

Importing Audio

1. Drag / Import an audio file into the Media Library.

2. Drag the imported audio file into the root node of the Hierarchy .

---

Playing Audio

We will now set up a ready event that will be play the audio as soon as the experience is launched.

1. Right-click on the root node, and select ‘New’ → ‘Script’ → ‘Ready’ to create a ready script. Following this, drag your audio file (in this case, Sample Audio.ogg) into the top of ready script, and select Insert Local Variable. This will allow us to access the audio node later in the script.

2. In the ready script, add Sample_Audio.ogg.start(); . This means the audio will now start playing once the experience is launched and ready.

Looping Audio

We will now listen out for when the audio is finished, create a function and then use that function to loop your audio.

1. To make the audio loop, we need to add an audio finished function for the audio node and call it. We can do this by adding Sample_Audio_oggogg.on(“finish”, audioFinished), followed by function audioFinished() {} .

2. In the audio finished function, add the snippet Sample_Audio_ogg.restart(), changing the reference to your audio node name.

The audio file will now restart once the audio has finished, and will continue to play as long as the experience is open.

Preview / Publish your project.

---

Playing Audio with a Button

To add interactivity to your experience, you can set your audio file to be played once the user taps a button. Please note, this follows on from the Importing Audio section above.

1. Drag / Import a button (image) into the Media Library.

2. Drag the imported button into the root node of the Hierarchy . You may want to resize your button so the size is relative to the tracking image.

3. Right-click the button node in the Hierarchy, and select ‘New’ → ‘Script’ → ‘Pointerdown’.

4. The pointerdown script allows you to execute functionality when a button is pressed. To set this up, first drag the audio node into the top of the script, and select Insert Local Variable.

5. In the pointerdown script, add the snippet Sample_Audio_ogg.start();. Your audio will now play once the button is pressed in the experience.

Preview / Publish your project.

---

I hope this helps!

Please let us know on this thread if you have any issues getting audio files to play in ZapWorks Studio, we’ll be more than happy to help.

Adam

[planmundo]

Not working, somebody knows why?

[abiro]

I couldn’t tell you the exact reason, but if you’re just trying to restart audio on a loop, you donn’t have to create a separate function. Code something like this should work just fine:

const Audio = symbol.nodes.[YOUR AUDIO];

parent.on("ready", () => {
	Audio.start();	
});

Audio.on("finish", () => {
	Audio.restart();
});

I think it has something to do with how to finish event handler works, but I only know enough to know the code above should work, but not the reason behind it