Audio Fundamentals - HTML5 Audio

Workshop slides for an exploration of HTML5 Audio.

Transcript

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

   View Slide

2. View Slide

3. http://chromium.googlecode.com/svn/trunk/samples/audio/shiny-drum-machine.html
   

   View Slide

4. Web History
   ● Browsers in the 90s - #FAIL
   ● Plugins save the day?
   ● Flash, Java (urgh!!)...
   

   View Slide

5. Plugin Free Web!
   ● Why?
   ● Lean Stack
   ○ Website > Browser > OS
   ○ Website > Plugin > Browser > OS
   ● Less breakable parts
   ● Reliance on single party (Adobe)
   

   View Slide

6. Web And Audio
   ● Before
   ○ Flash.
   ○ Java (urgh!)
   ● After
   ○ HTML5 Audio
   ○ WebAudio
   ○ WebRTC*
   ○ WebMIDI*
   

   View Slide

7. HTML5 Audio
   ● / HTMLAudioElement()
   ● Part of the DOM Elements.
   ● Allows basic playback of Audio files.
   ● Basic functionality support in all Major
   browsers.
   

   View Slide

8. HTML5 Audio Example.
   
   
   Your browser does not support the audio element.
   
   
   Your browser does not support the audio element.
   
   
   
   
   

   View Slide

9. HTML5 Audio Features
   HTML Attributes :
   ● autoplay
   ● preload
   ● controls
   ● src
   ● loop
   ● mediagroup
   http://www.w3.org/wiki/HTML/Elements/audio
   

   View Slide

10. HTML5 Audio Features
    IDL Attributes :
    ● canPlayType()
    ● load()
    ● currentTime
    ● defaultPlaybackRate
    ● playbackRate
    Read Only :
    ● startTime
    ● duration
    ● paused
    ● played
    ● seekable
    ● ended
    ● currentSrc
    ● buffered
    ● seeking
    

    View Slide

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")
    //""
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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()
    

    View Slide

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();
    

    View Slide

16. https://developer.mozilla.org/en-US/docs/HTML/Supported_media_formats
    

    View Slide

17. NOT! SO! FAST!!
    http://textopia.org/androidsoundformats.html
    

    View Slide

18. Code Challenge
    ● Sine Tone Player
    ○ Slider to adjust 'pitch'
    ○ Play/Pause Buttons
    ○ Loop Checkbox
    ● Sources :
    http://bit.ly/spsinewav
    http://bit.ly/spsinemp3
    

    View Slide