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.

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