$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

    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