Audio Fundamentals - HTML5 Audio

Workshop slides for an exploration of HTML5 Audio.

Transcript

1. Audio Fundamentals Web Audio #1 Chinmay Pendharkar, Sonoport, 2013
3. http://chromium.googlecode.com/svn/trunk/samples/audio/shiny-drum-machine.html
4. Web History • Browsers in the 90s - #FAIL • Plugins save the day? • Flash, Java (urgh!!)...
5. Plugin Free Web! • Why? • Lean Stack ◦ Website > Browser > OS ◦ Website > Plugin > Browser > OS • Less breakable parts • Reliance on single party (Adobe)
6. Web And Audio • Before ◦ Flash. ◦ Java (urgh!) • After ◦ HTML5 Audio ◦ WebAudio ◦ WebRTC* ◦ WebMIDI*
7. HTML5 Audio • <audio> / HTMLAudioElement() • Part of the DOM Elements. • Allows basic playback of Audio files. • Basic functionality support in all Major browsers.
8. HTML5 Audio Example. <!-- Simple audio playback --> <audio src="http://developer.mozilla.org/AudioTest.ogg" autoplay> Your browser does not support the <code>audio</code> element. </audio> <audio controls="controls"> Your browser does not support the <code>audio</code> element. <source src="foo.wav" type="audio/wav"> <source src="foo.mp3" type="audio/wav"> <source src="foo.ogg" type="audio/wav"> </audio>
9. HTML5 Audio Features HTML Attributes : • autoplay • preload • controls • src • loop • mediagroup http://www.w3.org/wiki/HTML/Elements/audio
10. HTML5 Audio Features IDL Attributes : • canPlayType() • load() • currentTime • defaultPlaybackRate • playbackRate Read Only : • startTime • duration • paused • played • seekable • ended • currentSrc • buffered • seeking
11. HTML5 Audio Features Examples var a = document.createElement('audio'); a.canPlayType("audio/mp3") //"maybe" a.canPlayType("audio/wav") //"maybe" a.canPlayType("audio/ogg") //"maybe" a.canPlayType("audio/aac") //""
12. HTML5 Audio Features Examples var a = document.createElement('audio'); a.src = "http://www.therecordist. com/assets/sound/mp3_13/Fire_Matchbook_Burst .mp3" a.play() //undefined a.playState() a.currentTime //12.821689
13. HTML5 Audio Features Examples a.played //TimeRanges {length: 1, start: function, end: function} [a.played.start(0), a.played.end(0)] //[0, 12.821689] a.seeking //false a.duration //12.821689
14. HTML5 Audio Features Examples var a = document.createElement('audio'); a.src = "http://ia700306.us.archive. org/32/items/eml011/03_Ikram_Choudhury_- _Dance_World_Pineapple_Zone_64kb.mp3" a.playbackRate = 2; //2 a.play()
15. HTML5 Audio Features Examples var a = document.createElement('audio'); a.src = "http://www.therecordist. com/assets/sound/mp3_13/Fire_Matchbook_Burst .mp3" a.loop = true; a.play();
16. https://developer.mozilla.org/en-US/docs/HTML/Supported_media_formats
17. NOT! SO! FAST!! http://textopia.org/androidsoundformats.html
18. Code Challenge • Sine Tone Player ◦ Slider to adjust 'pitch' ◦ Play/Pause Buttons ◦ Loop Checkbox • Sources : http://bit.ly/spsinewav http://bit.ly/spsinemp3