intelligent 4 track balance handler

[tonum]

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

[justsomeguy]

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.

[tonum]

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 March 16, 2018 by tonum

[tonum]

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

[justsomeguy]

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

 

[tonum]

Thanks for this, man! Looks awesome. Gonna dive into it soon!