Building a Simple App that Syncs Audio Files

I’m trying build a simple Hype document where a handful of different audio loops at the same tempo could be synced together on different elements clicked.

I do not have the expertise to pull this off but I’m guessing I would need some kind of javascript library.
Here is a simple example that I would be going for:
https://forestmist.org/blog/web-audio-api-loops

Here is another example but I would not need anything this elaborate. I’m planning to have this be something I can help my high school students make with Hype.

Here is another tutorial on this subject:
http://www.html5rocks.com/en/tutorials/audio/scheduling/

I’m certainly not skilled enough to do this alone but if someone would like to help me get started that would be awesome. I’ve provided a Hype document that has a few audio files all at the same tempo.

syncAudioApp.hype.zip (1001.3 KB)

Hi Matt, I can help you if you want. I’m thinking that a basic document would start all audio files and depending on the element clicked would set the volume for that loop thus having them play together. For this to work all your audio files have to be an exact loop of 4 bars or 8 or whatever. No gaps.

D

Thanks. That idea would almost do it. I’d need to have the functionality as in my first example above (Building a Loop Demo) where when a new loop is triggered it would start at the beginning of the loop rather then just raising the volume. My students will be building loops that fit together but the magic would happen as they trigger the start point to begin in a new place with the loops already playing.
I know this is much more complicated. Thank you though!

In the example you give above the loops are synced so when you click the buttons it simply toggles the loops volume to 100%. I’m not sure I’m understanding you correctly.

D

How about this…

The Elements used for the click have an id name of the Audio files. i.e Blues

The clicking these Elements will run a javascript that uses the id with the word ‘Audio’ appended to it, to find the correct audio element to play/pause/loop


The Audio elemenys are off scene

Each Audio has an id of the Audio file name + Audio. i.e. BluesAudio


testloop copy.hype.zip (517.9 KB)


if you want the loop to always start from the beginning on play, change the Conditional Ternary operator to:

isPlaying  ? (theLoop.currentTime = 0, theLoop.play() ) :   theLoop.pause() ;

Thanks @MarkHunte and thanks @DBear. I stand corrected, you are correct my examples are simply changing the volume.

I wonder if there is some way to incorporate the Web Audio Clock as talked about in this article
http://www.html5rocks.com/en/tutorials/audio/scheduling/

The idea would be to have the loops synced to some kind of clock so that whenever the user presses play they would always be synced.

If this is not possible I understand and maybe should just pursue the idea of having all of the loops continually playing and simply fade them in or out.

Thanks guys!

Thanks @MarkHunte. Do you know why I hear a slight delay before the audio loops again? I know that the file is perfectly timed to loop without any space.
Thanks!

Did you set isPlaying ? (theLoop.currentTime = 0, theLoop.play() ) : theLoop.pause() ;

or is it just pausing.

It is set to:
isPlaying ? (theLoop.currentTime = 0, theLoop.play() ) : theLoop.pause() ;

but on looping there seems to be a gap either way.

Are you able to post with the loops you are using ?. I am not really detecting a delay in mine as some of them fade at the end any way.

It’s a buffering problem with the way the audio is played. There is a slight delay therefore stopping you from using gapless looping. It’s a known problem.

D

1 Like

Her is the file with the loops. testloop copy.hype.zip (1.1 MB) I’m creating them in Logic and they definitely are exactly 8 beats in length. When loaded back into Logic after export there is no space at the end.

There will be nothing wrong with your loops :wink: it’s the way the browser or even Quicktime! loops them. For some reason it adds a buffer.

The Web Audio API I believe gets around this problem by creating offsets and loading the sounds into a buffer. It’s a lot of code to do it.

D

Thanks. You are correct about the buffers etc. It is a lot of code. I’ve found the gist of it here:
https://forestmist.org/blog/web-audio-api-loops

and here

http://catarak.github.io/blog/2014/12/02/web-audio-timing-tutorial/

But I cannot figure out how to get it set up in Hype.

Here’s something to get you going :wink:

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..

Ah,

The answer is for Safari is:

source.noteOff(0);

Found the Apple Doc for their Audio API

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)