Audio Fundamentals - HTML5 Audio

Transcript

1. Audio Fundamentals Web Audio #1 Chinmay Pendharkar, Sonoport, 2013

2. None

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