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

以 JavaScript 實作簡易 Audio Sprites

Avatar for Zhusee Zhusee
May 18, 2013
Programming
280
1

以 JavaScript 實作簡易 Audio Sprites

以 Bumbler to Speech 為例

Avatar for Zhusee

Zhusee

May 18, 2013

More Decks by Zhusee

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

Other Decks in Programming

See All in Programming
Vue × Nuxt × Oxc どこまで使える？実運用の現在地
Avatar for ANDPAD inc andpad
0
330
Even G2とAWSで推しのエージェントを召喚しよう！
Avatar for Har1101 har1101
1
140
技術的負債解消で開発者の未来を開く- AIの力でコード刷新
Avatar for Kato Ryo kmd2kmd
0
130
なぜ型を書くのか？ TSKaigi2026で改めて考える #tskaigi_smarthr
Avatar for Takuma Kajikawa kajitack
0
180
Language Server 使ってる？ 〜VSCode と Zed の場合〜 / Are you using a Language Server? ~For VS Code and Zed~
Avatar for NAGATA Hiroaki handlename
0
820
Developing with AI Agents — Codex, Claude Code & Cowork Practical Guide
Avatar for Daisuke Masuda x5gtrn
PRO
0
1.3k
ランチタイムLT会3周年！ランチタイムLT会を3年間続けられたお話
Avatar for y-ohgi y0hgi
1
120
Hunting Vulnerabilities in Symfony with LLMs
Avatar for Vincent Amstoutz vinceamstoutz
0
570
[2026年度第1回ORセミナー] 計画最適化ベンチャーと競技プログラミング人材
Avatar for terry-u16 terryu16
0
280
Vite+ Unified Toolchain for the Web
Avatar for Naoki Haba naokihaba
0
410
生成AI時代にこそ効くGo | Why Go Works in the Age of Generative AI
Avatar for mom0tomo mom0tomo
8
3.4k
act1-costs.pdf
Avatar for Sumedh Bala sumedhbala
0
140

Featured

See All Featured
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
550
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
570
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
210
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
240
Between Models and Reality
Avatar for mayunak mayunak
4
360
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
250
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
15k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
380
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.9k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
210
Leo the Paperboy
Avatar for Maya Tellez mayatellez
7
1.9k

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