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

以 JavaScript 實作簡易 Audio Sprites

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
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
tsserverとは何だったのか、これからどうなるのか
Avatar for Ryota Nakamura nowaki28
1
430
脅威をエンジニアリングの糧にして――現場編 / Turning Threats into Engineering Fuel — Field Edition
Avatar for nrs nrslib
0
230
IBM Bobを活用したレガシーアプリの最新化
Avatar for Akira Onishi (IBM) oniak3ibm
PRO
0
120
AI 時代のソフトウェア設計の学び方
Avatar for 増田 亨 masuda220
PRO
29
11k
TypeSpec で繋ぐ複数プロダクトの型安全
Avatar for Mitsui maroon8021
1
310
AIエージェントと協働するCLI開発 — BunとOpenClawで学んだこと
Avatar for よしこ yoshikouki
1
230
These Five Tricks Can Make Your Apps Greener, Cheaper, & Nicer
Avatar for Holly Cummins hollycummins
0
260
The Arts and Crafts of Work in the AI Era — Toward Mastery in Software Development
Avatar for Yoshihito Kuranuki / 倉貫義人 kuranuki
1
700
Copilot CLI の継戦能力を高める コンテキスト管理
Avatar for Nozomuts nozomutu
1
1.2k
Inside Stream API
Avatar for Yuichi.Sakuraba skrb
1
540
密結合なバックエンドから TypeScript のコードを生成する
Avatar for kemuridama kemuridama
1
610
不変条件と整合性境界—ビジネスが決める設計判断と実現パターン / Invariants and Consistency Boundaries
Avatar for nrs nrslib
13
3.2k

Featured

See All Featured
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
15k
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
610
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6.2k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.7k
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
200
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
560
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.2k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
76
5.2k
Design in an AI World
Avatar for tapps tapps
1
220

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