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

以 JavaScript 實作簡易 Audio Sprites

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
Rust 製のコードエディタ “Zed” を使ってみた
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
190
Honoを使ったリモートMCPサーバでAIツールとの連携を加速させる！
Avatar for とすり tosuri13
1
180
AI時代の認知負荷との向き合い方
Avatar for OptFit Corp. optfit
0
160
プロダクトオーナーから見たSOC2 _SOC2ゆるミートアップ#2
Avatar for Kenta Suzuki kekekenta
0
220
360° Signals in Angular: Signal Forms with SignalStore & Resources @ngLondon 01/2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
130
HTTPプロトコル正しく理解していますか？ 〜かわいい猫と共に学ぼう。ฅ^•ω•^ฅ ﾆｬ〜
Avatar for ♛Heitor Hirose hekuchan
2
690
Best-Practices-for-Cortex-Analyst-and-AI-Agent
Avatar for ryotaro.ikeda@finatext.com ryotaroikeda
1
110
MDN Web Docs に日本語翻訳でコントリビュート
Avatar for uutan1108 ohmori_yusuke
0
650
疑似コードによるプロンプト記述、どのくらい正確に実行される？
Avatar for kokuyouwind kokuyouwind
0
390
AI によるインシデント初動調査の自動化を行う AI インシデントコマンダーを作った話
Avatar for azukiazusa azukiazusa1
1
740
LLM Observabilityによる 対話型音声AIアプリケーションの安定運用
Avatar for Hiroyuki Moriya gekko0114
2
430
ノイジーネイバー問題を解決する 公平なキューイング
Avatar for Shoichi Ochi occhi
0
110

Featured

See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
830
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
5.8k
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
320
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.9k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
310
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
500
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
110
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
Between Models and Reality
Avatar for mayunak mayunak
1
190

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