Audio Fundamentals - HTML5 Audio

Audio Fundamentals - HTML5 Audio

Workshop slides for an exploration of HTML5 Audio.

Bb5482b3806c6fe891e6270b99597a71?s=128

Chinmay Pendharkar

August 28, 2013
Tweet

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