» Mix Bot Beta - HTML5 App with vvvv / vvvv.js
This site relies heavily on Javascript. You should enable it if you want the full experience. Learn more.

Mix Bot Beta - HTML5 App with vvvv / vvvv.js

credits www.000.graphics

Hi

I developed this interface for DJ mixing with advanced effects and scratching.

You can try it yourself here. It needs chrome or firefox browser:

http://www.symbioticcube.com/MixBot

I would like to document a little bit the process of making it

The waveform was produced with 'normal' vvvv on a desktop, using the VVVV.Audio nodes.
I also produced the CMS for constructing the HTML for the mixer with all the waveform links and stuff in vvvv. As well as creating a XML file for referencing the filenames for vvvv.js

Then I load vvvv.js in the HTML file and the patch hosting the Audio API and the interface looks liket this

I used pngs for the waveforms 4096x128 resolution. pngs are nicely scalable while jpgs gave a bad look to the scaled waveform. waveform size is under 500kb which is still quite much but i couldnt make a bigger tradeoff. The mp3s are 192kbit dual stream. So it is also a tradeoff in sound quality here.

There is a crossfader, filters delay and you can scratch the audio stream. the scratching effect is actualy a fake scratch achieved with a delay node.

The interface is based on a cms layout of buttons and html5 sliders and partly patched with the Canvas Renderer.

It was a interesting exploration to go that far with those web audio stuff and i must say i am impressed that javascript and vvvv.js can do such things.

it runs mostly in chrome and firefox. in older safari i could not make it run i think its due to webkit has trouble supporting web audio api. so i also have trouble running it as mobile application. which is a little bit of a pitty.

Im happy to hear any input to this topic.

tekcor, Friday, Mar 4th 2016 Digg | Tweet | Delicious 2 comments  
dominikKoller 04/03/2016 - 19:46

dude, this is amazing!

sinus 10/03/2016 - 19:28

wow!

  • 1

anonymous user login

Shoutbox

~2d ago

joreg: vvvvTv S0204 is out: Custom Widgets with Dear ImGui: https://youtube.com/live/nrXfpn5V9h0

~2d ago

joreg: New user registration is currently disabled as we're moving to a new login provider: https://visualprogramming.net/blog/2024/reclaiming-vvvv.org/

~9d ago

joreg: vvvvTv S02E03 is out: Logging: https://youtube.com/live/OpUrJjTXBxM

~11d ago

~13d ago

joreg: Follow TobyK on his Advent of Code: https://www.twitch.tv/tobyklight

~16d ago

joreg: vvvvTv S02E02 is out: Saving & Loading UI State: https://www.youtube.com/live/GJQGVxA1pIQ

~16d ago

joreg: We now have a presence on LinkedIn: https://www.linkedin.com/company/vvvv-group

~23d ago

joreg: vvvvTv S02E01 is out: Buttons & Sliders with Dear ImGui: https://www.youtube.com/live/PuuTilbqd9w

~30d ago

joreg: vvvvTv S02E00 is out: Sensors & Servos with Arduino: https://visualprogramming.net/blog/2024/vvvvtv-is-back-with-season-2/

~30d ago