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

以 JavaScript 實作簡易 Audio Sprites

Avatar for Zhusee Zhusee
May 18, 2013
Programming
1
270

以 JavaScript 實作簡易 Audio Sprites

以 Bumbler to Speech 為例

Avatar for Zhusee

Zhusee

May 18, 2013
Tweet

More Decks by Zhusee

See All by Zhusee
Doing MVC with Baman.js
Avatar for Zhusee zhusee2
0
160
TubeNews.in @ WebConf Taiwan 2013
Avatar for Zhusee zhusee2
7
630

Other Decks in Programming

See All in Programming
re:Invent 2025 のイケてるサービスを紹介する
Avatar for maroon1st maroon1st
0
160
脳の「省エネモード」をデバッグする ～System 1（直感）と System 2（論理）の切り替え～
Avatar for HideyukiKitao panda728
PRO
0
130
JETLS.jl ─ A New Language Server for Julia
Avatar for abap34 abap34
2
470
AI 駆動開発ライフサイクル(AI-DLC):ソフトウェアエンジニアリングの再構築 / AI-DLC Introduction
Avatar for kanamsasa kanamasa
11
5.1k
クラウドに依存しないS3を使った開発術
Avatar for しめさば simesaba80
0
220
The Art of Re-Architecture - Droidcon India 2025
Avatar for Sid Patil siddroid
0
160
React 19でつくる「気持ちいいUI」- 楽観的UIのすすめ
Avatar for Hiroshi Morishige himorishige
11
4.7k
AI Agent Tool のためのバックエンドアーキテクチャを考える #encraft
Avatar for izumin5210 izumin5210
6
1.6k
ThorVG Viewer In VS Code
Avatar for Nor-s nors
0
660
愛される翻訳の秘訣
Avatar for Kishikawa Katsumi kishikawakatsumi
3
370
Claude Codeの「Compacting Conversation」を体感50%減！ CLAUDE.md + 8 Skills で挑むコンテキスト管理術
Avatar for Kazuki Murahama kmurahama
1
710
Context is King？ 〜Verifiability時代とコンテキスト設計 / Beyond "Context is King"
Avatar for r-kagaya rkaga
10
1.5k

Featured

See All Featured
HDC tutorial
Avatar for Michiel Stock michielstock
1
310
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
76
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.7k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
130
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
410
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.9k
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
160
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
19k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.5k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
73
5k
A Soul's Torment
Avatar for Nat Ma seathinner
2
2.1k

Transcript

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

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

  3. Audio Source

  4. Audio Source Ұ ೋ ࡾ ࢛ ޒ ࿡ ࣣ ീ

    ۝ े lँँେՈɼ੥࠱z
  5. None

  6. “Speak” a number 42 d4 d10 d2 ೋ ࢛ े

    Array

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

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

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

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

  11. Controlling <audio> Element ✤ var audio = document.querySelector(‘audio’) ✤ audio.pause()

    ✤ audio.currentTime = 2.45 #(sec) ✤ audio.play()

  12. Summary ✤ Combine your audio files ✤ Write down time

    information of each partial clip ✤ Control play/pause/position with JavaScript

  13. http://bit.ly/bumbler