Here’s something to get you going 
syncAudioApp.hypetemplate.zip (2.5 MB)
D
1 Like
Thanks for this.
I got it looping using a setInterval and the fire time is just over my sound files duration.
But Safari does not support
context.suspend(); or context.resume();
Which works in chrome.
Any ideas..
Thanks so much for this! However, I don’t quite understand it so I’m not sure how to “use” it. I see that the element triggers the kick wav. I don’t understand how I would add other elements to trigger loops…?
If you could just suggest a couple of next steps that would be so helpful… Thank you!
Hi MarkHunte and DBear. After playing around for a while I’m giving up and asking. I can use your example DBear and play my own file, but I need to play 4 at once and in sync then loop them. I think I can do the looping thing through an example I found online, but how do I load all 4 in the syncAudioApp template that you posted?
Thanks.
Ok. I looked at some tutorials in the past and tried using them as well. So here is an attempt that is not working at the risk of having a few people shaking their heads in utter dismay.
I include a a project that has a file set on scene load, that is supposed to start the buffering process and then a function that is supposed to start the 2 audio files paying in sync.
Laugh if you will, but please help me?
audioSync.hype.zip (236.7 KB)
I’m swamped right now but I’ll look into this when I get 5 
Thanks so much.
Another approach - simple coding utilizing the Wad JavaScript Library - jQuery for the ears…
In the “Head” script:
<script type="text/javascript" src="${resourcesFolderName}/wad.min.js"></script>
Function:
var wadAudio1 = new Wad({source : '${resourcesFolderName}/kick.m4a', env : { hold : 8000 }, loop : true });
var wadAudio2 = new Wad({source : '${resourcesFolderName}/synth_short.m4a', env : { hold : 8000 }, loop : true });
wadAudio1.play();
wadAudio2.play();
You’re done.
OnLine Example Here.
Project Example:
wadLoop.hype.zip (237.0 KB)
Thanks JimScott. It is working. It means I can finish the part of my project. I would like to get my teeth in the Web Audio Api as well.
Thanks again.
Hi.
I have a question that is elementary but not obvious. How do I tell them to stop!
Is it supposed to look like this:
var wadAudio1 = new Wad({source : '${resourcesFolderName}/synth_short.m4a'});
wadAudio1.stop();
or just:
wadAudio1.stop();
because is says in github that I can change settings during playback. Really confused.
Has is something to do with the release attribute?
Your help is appreciated.
Follow? Heaven no, but hell it works!
I will see if I can implement?
The “Play” button is now a toggle. Click “Play” it plays, the button name is changed to “Stop”. Click the “Stop” button & the sound stops - button name changed back to “Play”. Note: This operation could be split out into two separate buttons… one that plays the sound & one that stops the sound.
Demo Here.
I have put the sound initialization in two places - in the “Head HTML” & in a function that is called when the Scene loads. Currently the “Head HTML” init is commented out. You do NOT need both - just use one! I took this approach not knowing exactly what your design specs are. Experiment to see what suits You.
As currently set-up: wadLoop_v2.hype.zip (237.1 KB)
The Scene loads and calls the “wadSetup” function (two lines of code):
wadAudio1 = new Wad({source : '${resourcesFolderName}/kick.m4a', env : { hold : 8000 }, loop : true });
wadAudio2 = new Wad({source : '${resourcesFolderName}/synth_short.m4a', env : { hold : 8000 }, loop : true });
Note the “env : { hold : 8000 }” - that 8000 represents the length of @DBear’s music. “8000” = eight seconds. “6000” would be six seconds.
The Play~Stop button toggle is triggered by “On Mouse Click” ( “wadPlayToggle” function).
var playStop = hypeDocument.getElementById('playStopBtn');
if (playStop.innerHTML == "Play") {
wadAudio1.play();
wadAudio2.play();
playStop.innerHTML = "Stop";
}
else if (playStop.innerHTML == "Stop") {
wadAudio1.stop();
wadAudio2.stop();
playStop.innerHTML = "Play";
}@theron_hp Having a quick look at WAD (which is simply a library for the Web Audio API) it might be better to use that as it simply takes away all the hassle of what I did and wraps it nicely in a few simple calls which would make it better for you to follow / understand maybe.
@JimScott just an FYI. Hold is not needed as it relates to an oscillator and it’s sustain length within the envelope. Here we are using audio files so we don’t need it Oh and the music was supplied by @theron_hp so it’s not mine
Hi @DBear and @JimScott. Thanks so much for your help. I implemeted your code @DBear and is working fine. Firefox has a short delay in the loop, which puts my running timeline out of sync a little, but it works fine in the other browsers as well as iOS. The one comment I have about the gain.node in your code is that once one engages it, the max level of sound is about 15% (thumbsuck) less than the initial sound level. It is noticeable and eventually I would like solve this, but it is working right now so I’m in a much better place than last week.
@JimScott, I will also look at your code. The wad library takes a lot of the coding out of the loop which can help me.
Thanks to both of you. It took me a while to ask in the forums because I wanted to see if I could solve it myself, but in the the end you guys came through.
@theron_hp
Glad to help. Even if You elect not to use the Wad Library it is nice to have another tool in the box for future reference.
@DBear - Thanks for the “hold” tip - the less code the better!
Hi DBear!
So I eliminated the "env : { hold : 8000 }" and left in just the loop on the "synth_short.m4a". "Synth" stops after 3 seconds. Perhaps I've missed something here:
wadAudio1 = new Wad({source : '${resourcesFolderName}/kick.m4a', env : { hold : 8000 }, loop : true });
wadAudio2 = new Wad({source : '${resourcesFolderName}/synth_short.m4a', loop : true });
The "no hold" approach was the very first thing I tried - I saw no reason to include it originally. I wrote in to Raphael Serota the initiator of the Wad library project about a week ago to inquire what's up with the "3 seconds of sound". His response was that it was the default behavior - and to use the env: {hold:} technique that matches the length of the sound. (Issue #28 on the Wad GitHub site):
For performance reasons, the default hold period is about 3 seconds long, but if you need to play a whole song as an audio clip, you will need to override the default setting.
The "no hold" version demo here.
"no hold" Hype Project: wadLoop_v3_noHold.hype.zip (237.3 KB)
Note: just using the code in the "Head HTML" in this version - no "Scene Load" script. Both worked the same with the above code.
If it needs to be there then it needs to be there 
I’m not a fan of that though as it doesn’t quite sit right with me
for example, if you play your 1st demo from the earlier post and let it loop say 3 times and then press stop (providing you have headphones or perhaps the volume turned way up) you here a trail very faintly in the background that is pretty much never ending until you close / refresh the tab.
Also, it doesn’t solve the slight gap in Firefox. (for seamless playback)
It seems a good Library though and I wouldn’t discount it.
When I have some more time I’ll look into it a bit more and get some more robust solutions for integration within Hype.
Hi DBear!
Thanks for your reply - just wanted to make sure I wasn’t missing something.
The “trail” - nice catch; only with headphones and the volume up high was it (barely) noticeable for me. I will be mentioning this to Rafael. Compared to the alternative (screens of coding) this is a micro burble.
As to the Firefox gap it also shows up in your hand rolled example as well… I’d say this is a Firefox issue.
https://dl.dropboxusercontent.com/spa/lyxszk5uyjw9g12/Exports/audioSync-vDBear/audioSync-vDBear.html