Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
実際にSoundJSを使ってみて分かったこと
448jp | OKI Yoshiya
July 29, 2013
Programming
1
3.1k
実際にSoundJSを使ってみて分かったこと
第4回 CreateJS勉強会 発表資料
448jp | OKI Yoshiya
July 29, 2013
Tweet
Share
More Decks by 448jp | OKI Yoshiya
See All by 448jp | OKI Yoshiya
今から始めるFigma超入門
448jp
0
580
零細Web制作会社のリモートワーク事情
448jp
0
100
エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック
448jp
2
430
コーディングを神速化するJetBrains IDEのご紹介~基本機能からHTML/CSSまで~
448jp
0
100
Lottieで始めるWebアニメーション入門
448jp
1
250
Figmaが支えるVue Fes Japanのデザイン
448jp
3
4.6k
Vue Fes Japan 2018のデザインを支えたAdobe XD
448jp
2
1.4k
Dreamweaverで学ぶ、「いい感じ」にするための実践CSSテクニック
448jp
3
1.8k
君は極寒の大地を生き延びられるか
448jp
2
590
Other Decks in Programming
See All in Programming
Jetpack Composeでの画面遷移
iwata_n
0
190
リアルタイムボイスチェンジャーMMVCとVITSの紹介
stealthinu
0
140
ゴーファーくんと辿るプログラミング言語の歴史/history-of-programming-languages-with-gopher
iwasiman
4
2.7k
iOS 16からのロック画面Widget争奪戦に備える
tsuzuki817
0
260
Haskellでオブジェクト指向プログラミング
koheisakata
0
130
heyにおけるCI/CDの現状と課題
fufuhu
3
560
Terraform Plan/Apply結果の自動通知
ymmy02
0
280
設計の学び方:自分流のススメ
masuda220
PRO
10
7.3k
UI Testing of Jetpack Compose Apps, AppDevCon
alexzhukovich
0
170
Improving Developer Experience Through Tools and Techniques 2022
krzysztofzablocki
0
1.2k
Why Airflow? & What's new in Airflow 2.3?
kaxil
0
120
GDG Seoul IO Extended 2022 - Android Compose
taehwandev
0
330
Featured
See All Featured
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
213
11k
Docker and Python
trallard
27
1.6k
Typedesign – Prime Four
hannesfritz
34
1.4k
The Cult of Friendly URLs
andyhume
68
4.8k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
920
Adopting Sorbet at Scale
ufuk
63
7.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
15
36k
4 Signs Your Business is Dying
shpigford
169
20k
Infographics Made Easy
chrislema
233
17k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1M
How GitHub Uses GitHub to Build GitHub
holman
465
280k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
15k
Transcript
実際に SoundJSを 使ってみて分かったこと 沖 良矢(世路庵) 2013.7.26 (Fri) 第4回 CreateJS勉強会
自己紹介 沖 良矢 / OKI Yoshiya @448jp インタラクションデザイナー UNIQLO HAPPY
GIFT (2013) Web Designing (2009~) McCANN WG JAPAN (2012)
今日話すこと SoundJS、基本の「き」 サウンドを再生する仕組み ファイル形式に注意!
SoundJS、基本の「き」 とりあえず音を鳴らしてみよう
SoundJSを 使ったことありますか?
サウンドを再生する createjs.Sound.addEventListener("fileload", fileLoadHandler); createjs.Sound.registerSound("bgm.mp4"); function fileLoadHandler(e) { createjs.Sound.play(e.src); console.log(e); //
{target: function, type: "fileload", src: "bgm.mp4", id: undefined, data: 2} };
SoundJSの動作に canvas要素やEaselJSは不要です。 (もちろん使ってもOK)
複数のサウンドを再生する createjs.Sound.addEventListener("fileload", fileLoadHandler); createjs.Sound.registerSound("bgm.mp4", "bgm"); createjs.Sound.registerSound("se.mp3", "se"); function fileLoadHandler(e) {
createjs.Sound.play("bgm"); //createjs.Sound.play("se"); };
PreloadJSとの組み合わせ var queue = new createjs.LoadQueue(false); queue.installPlugin(createjs.Sound); queue.addEventListener("complete", handler); var
manifest = [ {src: "bgm.mp4", id: "bgm"}, {src: "se.mp3", id: "se"} ]; queue.loadManifest(manifest); function handler(e) { queue.removeEventListener("complete"); createjs.Sound.play("bgm"); }
サウンドを再生する仕組み 動作原理を理解しよう
ところで、 SoundJSは どうやって サウンドを 再生しているのでしょう?
SoundJSのプラグイン HTMLAudioPlugin WebAudioPlugin FlashPlugin
SoundJSを支える3つのテクノロジー <audio> Web Audio Flash
つまり、 Webブラウザが audio要素、 Web Audio、 Flash、 のいずれかを サポートしている 必要があります。
プラグインを指定する createjs.Sound.registerPlugins([ createjs.WebAudioPlugin, createjs.HTMLAudioPlugin, createjs.FlashPlugin ]); createjs.Sound.addEventListener("fileload", fileLoadHandler); createjs.Sound.registerSound("bgm.mp4"); function
fileLoadHandler(e) { createjs.Sound.play(e.src); };
audio要素のサポート状況 via. http://caniuse.com
Web Audioのサポート状況 via. http://caniuse.com
Flashのサポート状況 言わなくても 分かりますね
SoundJSのテスト環境 Internet Explorer 9、10 Chrome Firefox
Safari Opera iOS 6以上 Android Chrome ※FlashPluginを使うとInternet Explorer 7、8も動作可能。 ※BlackBerryブラウザでも簡易テストをしています。
ファイル形式に注意! 鳴らない、サウンド
SoundJSが想定しているファイル形式 mp3 ogg mpeg wav m4a mp4 aiff wma mid
ファイル形式のサポート状況 Webブラウザ MP3 WAV PCM WebM Vorbis AAC Ogg Vorbis
Internet Explorer 9 × × 9 × Google Chrome ◦ ◦ ◦ ◦ ◦ Firefox 21 & Win ◦ ◦ 21 & Win ◦ Opera ◦ ◦ ◦ ◦ ◦ Safari ◦ ◦ × ◦ ◦ ※Internet Explorer以外は基本的に最新バージョンを想定。
複数のファイル形式を指定する その1 createjs.Sound.addEventListener("fileload", fileLoadHandler); createjs.Sound.registerSound("bgm.mp4|bgm.wav"); function fileLoadHandler(e) { createjs.Sound.play(e.src); };
複数のファイル形式を指定する その2 var queue = new createjs.LoadQueue(false); queue.installPlugin(createjs.Sound); queue.addEventListener("complete", handler);
var manifest = [ {src: "bgm.mp4", id: "bgm"}, {src: "bgm.wav", id: "bgm"}, {src: "se.mp3", id: "se"}, {src: "se.wav", id: "se"} ]; queue.loadManifest(manifest); function handler(e) { queue.removeEventListener("complete"); createjs.Sound.play("bgm"); }
まとめ 実際にSoundJSを使ってみて分かったこと
まとめ 意外とカンタン プラグインとファイル形式には注意が必要 モバイルでは時期尚早かもしれない
Thank you ! Photo Credit: Lst1984 Marco Bellucci Abdulmajeed Al.mutawee