$30 off During Our Annual Pro Sale. View Details »

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. 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