Upgrade to Pro — share decks privately, control downloads, hide ads and more …

以 JavaScript 實作簡易 Audio Sprites

以 JavaScript 實作簡易 Audio Sprites

以 Bumbler to Speech 為例

Zhusee

May 18, 2013
Tweet

More Decks by Zhusee

Other Decks in Programming

Transcript

  1. Ҏ JavaScript ؆қመ࡞ Audio Sprites
    Zhusee
    [email protected]

    View Slide

  2. Ҏ JavaScript ؆қመ࡞ Audio Sprites
    Zhusee
    [email protected]
    ၛ#VNCMFSUP4QFFDI㬪২

    View Slide

  3. Audio Source

    View Slide

  4. Audio Source
    Ұ ೋ ࡾ ࢛ ޒ ࿡ ࣣ ീ ۝ े
    lँँେՈɼ੥࠱z

    View Slide

  5. View Slide

  6. “Speak” a number
    42 d4 d10 d2

    ࢛ े
    Array

    View Slide

  7. “Speak” a number
    .playPartial()
    d10 d2
    d4

    View Slide

  8. “Speak” a number
    .playPartial()
    d10 d2
    d4

    View Slide

  9. “Speak” a number
    .playPartial()
    d10 d2

    View Slide

  10. “Speak” a number
    .playPartial()
    d2

    View Slide

  11. Controlling Element
    ✤ var audio = document.querySelector(‘audio’)
    ✤ audio.pause()
    ✤ audio.currentTime = 2.45 #(sec)
    ✤ audio.play()

    View Slide

  12. Summary
    ✤ Combine your audio files
    ✤ Write down time information of each partial clip
    ✤ Control play/pause/position with JavaScript

    View Slide

  13. http://bit.ly/bumbler

    View Slide