Jump to content
Sign in to follow this  
tonum

intelligent 4 track balance handler

Recommended Posts

Hello there,

Here’s a question from a composer of modern music cq webdesigner with basic knowledge of html/css and scratching the surface of javascript.
I'm a newbie here.


I would very much like to build something like this (of course this is merely schematic):



A1                                A2

                   L


A3                               A4



A1,2,3,4 stands for Audio 1,2,3,4 (These are four tracks that should be playing simultaneously.)
L is the "Listener".
Now, one should be able to move the "L" by cursor or finger (phone, tablet), towards
the different corners, which then should effect the volume. 
Moving close to A1, one should hear that track louder and the other tracks softer.
Moving in between A1 and A2, one should hear these tracks at the same volume,
but louder than A3 and A4, etc. The volume transitions need to be smooth.

Could anyone give me a hint as to how to start building something like this?
Any help would be highly appreciated!

Thanks

Share this post


Link to post
Share on other sites

I guess I would start with the HTML audio elements, just getting multiple things to play at the same time.  Once I did that, you're probably talking about setting up a canvas or something to have your graphics on it, so you could look into the canvas and adding your images or whatever you want to that.  For the drag and drop on the canvas, if you can get the position of the dragged object then you should be able to use some basic trigonometry to figure out the pixel distance between the object and the four corners, and set some scale for volume for each of them however you want that to scale.

Share this post


Link to post
Share on other sites

Thank you, justsomeguy! 

You make it sound manageable :-)

I'm working on step 1 and 2 now, which seem doable. I will post the result of my labour later on.

 

 

 

Edited by tonum

Share this post


Link to post
Share on other sites

Hi there, justsomeguy and other readers,

In the meantime I built something, within my limited possibilities (not really knowing javascript and all), which kind of does exactly what I want. Except that, unfortunately, the audio files are not precisely synced... :-((

I read that in order to get them sync I would have to organize them in a mediagroup, but I really don't understand the explanations of the mediaGroup property. I can't seem to find a clear demo of how to actually use it. After grouping my 4 mp3's in a mediaGroup, how do I control that whole thing??

Any hint is highly appreciated.

 

4audio_volume.html

Share this post


Link to post
Share on other sites

It sounds like, for browsers that support it, when you control one item in a media group it will control all of them, but that probably also means volume, it means you wouldn't be able to set different volumes for each item.  This may help, this is part of a wrapper for media objects where you can nest them inside each other, so you could have 4 audio items nested into one item that can control for playback, but probably still change the volume of each individual item.

https://github.com/brianchirls/popcorn-inception

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×