Browsers at play

Questions? Please tweet @webstandards

Hello

I'm Ruth

UX, Design, Front End Dev

@rumyra

Work in The Lab at O2

Winamp

My name is Ruth and I am a VJ

“VJing is a broad designation for realtime visual performance” - Wikipedia

I was thinking

CSS Animations

Web Audio API (+ others)

Can we recreate my old uni days?

Two Things

Moving visual

Analysed sound wave

Creating CSS Animation


@keyframes flashing {
  0%   { opacity: 0; }
  50%   { opacity: 1; }
  100% { opacity: 0; }
}

.lights i {
	animation:flashing 2s infinite;
}
					

You'll need vendor prefixes :)

List of animatable properties: http://oli.jp/2010/css-animatable-properties/

State of CSS Animations

Expanding on the light

Web Audio API

All The Things

Control volume


//Control volume
myAudioContext.createGain();
					

Create filters


//Create filter
myAudioContext.createBiquadFilter();
					

Create sound


//Create sound
myAudioContext.createOscillator();
					

The Web Audio API O'Reilly book by Boris Smus is free to read online!

Analysing

We can do that :D


//create instance
var analyser = myAudioContext.createAnalyser();

//get data
analyser.getByteFrequencyData();
analyser.getFloatFrequencyData();
analyser.getByteTimeDomainData();
					

More magic (& some code)

Loop through our lights, match them to a frequency and set them alight

//get light elements
var lights = document.getElementsByTagName('i');
var totalLights = lights.length;

for (var i=0; i 160){
    lights[i].style.opacity = "1";
  } else {
    lights[i].style.opacity = "0.2";
  }
}
					

State of audio

State of getUserMedia

New web APIs

Geolocation

Web RTC

getUserMedia

Vibration API

Ambient Light API

Proximity

Web Speech API

Game Pad API

https://wiki.mozilla.org/WebAPI

See For Yourself

Android device - latest Chrome or Firefox browser

http://dancing.rumyra.com/shake-n-track

http://dancing.rumyra.com/vibrate

State of vibrate

State of speech

Hello gamepad API

I have ALWAYS wanted to try you!

State of game

Go forth and play!

Thank you

@rumyra

dancing.rumyra.com

Questions? Pls tweet @webstandards