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
640

Other Decks in Programming

See All in Programming
AIとペアプロして処理時間を97%削減した話 #pyconshizu
Avatar for Kashun Yoshida kashewnuts
1
210
Geminiの機能を調べ尽くしてみた
Avatar for yosshi naruyoshimi
0
200
go directiveを最新にしすぎないで欲しい話──あるいは、Go 1.26からgo mod initで作られるgo directiveの値が変わる話 / Go 1.26 リリースパーティ
Avatar for Arthur arthur1
2
520
RubyとGoでゼロから作る証券システム： 高信頼性が求められるシステムのコードの外側にある設計と運用のリアル
Avatar for free_world21 free_world21
0
250
今更考える「単一責任原則」 / Thinking about the Single Responsibility Principle
Avatar for philomagi tooppoo
3
1.6k
Go 1.26でのsliceのメモリアロケーション最適化 / Go 1.26 リリースパーティ #go126party
Avatar for mazrean mazrean
1
370
ふつうの Rubyist、ちいさなデバイス、大きな一年
Avatar for bash0C7 bash0c7
0
780
Railsの気持ちを考えながらコントローラとビューを整頓する/tidying-rails-controllers-and-views-as-rails-think
Avatar for MOROHASHI Kyosuke moro
5
390
AI時代のソフトウェア開発でも「人が仕様を書く」から始めよう-医療IT現場での実践とこれから
Avatar for kouki.miura koukimiura
0
140
Claude Code の Skill で複雑な既存仕様をすっきり整理しよう
Avatar for yuichiro_takahashi yuichirokato
1
360
2026年は Rust 置き換えが流行る！ / 20260220-niigata-5min-tech
Avatar for girigiribauer girigiribauer
0
230
ベクトル検索のフィルタを用いた機械学習モデルとの統合 / python-meetup-fukuoka-06-vector-attr
Avatar for monochromegane monochromegane
2
370

Featured

See All Featured
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
66k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
2.6M
Visualization
Avatar for Eitan Lees eitanlees
150
17k
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
280
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
970
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
2.8k
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
3
2.8k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.1k
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
190
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
100

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