Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Audio Fundamentals - HTML5 Audio

Audio Fundamentals - HTML5 Audio

Workshop slides for an exploration of HTML5 Audio.

Avatar for Chinmay Pendharkar

Chinmay Pendharkar

August 28, 2013
Tweet

More Decks by Chinmay Pendharkar

Other Decks in Technology

Transcript

  1. Web History • Browsers in the 90s - #FAIL •

    Plugins save the day? • Flash, Java (urgh!!)...
  2. Plugin Free Web! • Why? • Lean Stack ◦ Website

    > Browser > OS ◦ Website > Plugin > Browser > OS • Less breakable parts • Reliance on single party (Adobe)
  3. Web And Audio • Before ◦ Flash. ◦ Java (urgh!)

    • After ◦ HTML5 Audio ◦ WebAudio ◦ WebRTC* ◦ WebMIDI*
  4. HTML5 Audio • <audio> / HTMLAudioElement() • Part of the

    DOM Elements. • Allows basic playback of Audio files. • Basic functionality support in all Major browsers.
  5. 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>
  6. HTML5 Audio Features HTML Attributes : • autoplay • preload

    • controls • src • loop • mediagroup http://www.w3.org/wiki/HTML/Elements/audio
  7. HTML5 Audio Features IDL Attributes : • canPlayType() • load()

    • currentTime • defaultPlaybackRate • playbackRate Read Only : • startTime • duration • paused • played • seekable • ended • currentSrc • buffered • seeking
  8. 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") //""
  9. 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
  10. 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
  11. 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()
  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.loop = true; a.play();
  13. Code Challenge • Sine Tone Player ◦ Slider to adjust

    'pitch' ◦ Play/Pause Buttons ◦ Loop Checkbox • Sources : http://bit.ly/spsinewav http://bit.ly/spsinemp3