Web Vs Native

Or

What the browser can do for us now

Hello

I'm Ruth

The Lab @ O2

@rumyra

Web Technologist

Winamp

I was thinking

CSS Animations (also Web Animation API now)

Web Audio API (also Web MIDI API)

Can we recreate my old uni days...

In a browser?

Minimal Requirements

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/

More lights...

Web Audio API

All about nodes

Input node - sound in

Modification and anlyser nodes

Output node - sound out (usually speakers)

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";
  }
}
					

dancing.rumyra.com/simple

dancing.rumyra.com/complex

Web Audio API + Web MIDI API

iOS Core Audio Frameworks: (inc. AudioToolbox, AudioUnit, CoreAudio, CoreMIDI)

Android: android.media

Windows: XAudio2, WASAPI

Not direct match, but similar functionality to native platforms.

So... back to our demo

Enter Another Web API

getUserMedia

Picks up on devices camera and microphone

dancing.rumyra.com/linein

getUserMedia API

iOS: UIImagePickerController,

Android: android.hardware.camera, android.media (recorder object)

Windows: Microsoft.Xna.Framework.Audio.Microphone

There's lots more Web API's

Let's play with our code

Vibration API

Causes your device to vibrate (if it has the appropriate hardware)

navigator.vibrate([30,200]);	
					

Polyfill

Non-vibrating devices

codepo8.github.io/mozVibrate-polyfill

See For Yourself

Android / Firefox OS

Latest Chrome or Firefox browser

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

http://dancing.rumyra.com/vibrate

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

Use 'Web API's' a lot - but what are they?

Collective term for new browser API's

Also known as Browser API's

Sometimes simply Javascript API's

Loads of them!

Web Audio

getUserMedia

Vibration API

Web RTC

Geolocation

Game Pad API

Ambient Light API

Proximity API

Screen Orientation API

...and more...

Device Orientation API

Web Speech API

Battery Status API

Simple Push API

Network Information API

File System API

Clipboard API

Full Screen API

Alarm API

...and more

Resources

W3C on Github

Mozilla WebAPI Docs

caniuse.com

HTML5 Rocks (Articles & Tutorials)

Interlude

VJ needs video

dancing.rumyra.com/videomix

VJ needs to control video

Web Speech API

Two parts

Speech synthesis

Speech recognition

Speech Recognition

var recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.start();
recognition.onresult = function(event){
  var results = event.results;
}
					

dancing.rumyra.com/voice

Web Speech API

(Doesn't have a persona... yet)

Siri

OK Google

Cortana

Voice is big - Amazon Echo, Samsung Smart TV

Gamepad API

HTML5 rocks gamepad tester http://www.html5rocks.com/en/tutorials/doodles/gamepad/

Buttons & Axes

gamepad.buttons[1]

gamepad.axes[0]
					

dancing.rumyra.com/gamepad

Other controllers?

Keyboard

Device Orientation API

function deviceOrientation() {
  window.addEventListener('deviceorientation', function(event) {
    
    // compass direction
    var alpha = event.alpha;
    
    // vertical tilt
    var beta = event.beta;
    
    // horizontal tilt
    var gamma = event.gamma;
    
  });
}
					

Have a look

dancing.rumyra.com/video-tilt

Review

Web API's

Web Audio

getUserMedia

Recreated software in a browser

Vibration, speech, device orientation

A word about support

The web is open.

It is a living standard, constantly changing.

Plus - we contribute & it is free.

Web vs Native

Web API's based on native functionality

Is Web better than Native?

No

Is Native better than Web?

No

We're asking the wrong questions

Should Web be Native?

It can be

But it doesn't have to be

They are different things.

The web needs connectivity.

Native needs a device.

Should you use Web to replace Native?

You can, but I wouldn't suggest it

The one takeaway:

Every project is different.

Not just about technology - requirements, functionality, resources, processes.

Go forth and play!

Thank you :)

@rumyra

dancing.rumyra.com