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
歴史から学ぶ「Why PHP？」 PHPを書く理由を改めて理解する / Learning from History: “Why PHP?” Rediscovering the Reasons for Writing PHP
Avatar for shiro seike seike460
PRO
0
160
最新のDirectX12で使えるレイトレ周りの機能追加について
Avatar for Pocol projectasura
0
300
Level up your Gemini CLI - D&D Style!
Avatar for Riccardo Carlesso palladius
1
110
全員アーキテクトで挑む、 巨大で高密度なドメインの紐解き方
Avatar for Agata Naomichi agatan
7
9k
「文字列→日付」の落とし穴 〜Ruby Date.parseの意外な挙動〜
Avatar for sg4k0 sg4k0
0
260
Doc Translate - LLMを活用したコードドキュメント自動翻訳VSCode拡張機能
Avatar for kmuto eycjur
0
110
生成AIを活用したリファクタリング実践 ~コードスメルをなくすためのアプローチ
Avatar for raedion raedion
0
120
AIを駆使して新しい技術を効率的に理解する方法
Avatar for nogu nogu66
1
660
「AWS CDK入門」の前日譚/Prequelto-Introduction-To-AWSCDK
Avatar for tyumugiko tyumugi1113
0
100
手軽に積ん読を増やすには？/読みたい本と付き合うには？
Avatar for hideki kinjyo o0h
PRO
1
110
CloudNative Days Winter 2025: 一週間で作る低レイヤコンテナランタイム
Avatar for ternbusty ternbusty
7
1.7k
30分でDoctrineの仕組みと使い方を完全にマスターする / phpconkagawa 2025 Doctrine
Avatar for Takashi Kanemoto ttskch
2
440

Featured

See All Featured
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.4k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
73
11k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
118
20k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
359
30k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.1k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
4.9k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
34
2.3k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
25k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k

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