以 JavaScript 實作簡易 Audio Sprites

以 Bumbler to Speech 為例

Transcript

1. Ҏ JavaScript ؆қመ࡞ Audio Sprites
   Zhusee
   zhusee2@gmail.com
   

   View Slide

2. Ҏ JavaScript ؆қመ࡞ Audio Sprites
   Zhusee
   zhusee2@gmail.com
   ၛ#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