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

以 JavaScript 實作簡易 Audio Sprites

Zhusee
May 18, 2013
Programming
1
270

以 JavaScript 實作簡易 Audio Sprites

以 Bumbler to Speech 為例

Zhusee

May 18, 2013
Tweet

More Decks by Zhusee

See All by Zhusee
Doing MVC with Baman.js
zhusee2
0
150
TubeNews.in @ WebConf Taiwan 2013
zhusee2
7
610

Other Decks in Programming

See All in Programming
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
46
17k
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
130
CloudNativePGがCNCF Sandboxプロジェクトになったぞ！ 〜CloudNativePGの仕組みの紹介〜
nnaka2992
0
230
Grafana Cloudとソラカメ
devoc
0
170
仕様変更に耐えるための"今の"DRY原則を考える / Rethinking the "Don't repeat yourself" for resilience to specification changes
mkmk884
0
110
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
0
190
Honoとフロントエンドの 型安全性について
yodaka
7
1.1k
Ruby on cygwin 2025-02
fd0
0
140
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
2
550
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
210
時計仕掛けのCompose
mkeeda
1
290
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
130

Featured

See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
A designer walks into a library…
pauljervisheath
205
24k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
A Philosophy of Restraint
colly
203
16k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Into the Great Unknown - MozCon
thekraken
35
1.6k
A Tale of Four Properties
chriscoyier
158
23k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k

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