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.2k
実際に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
3
630
今から始めるFigma超入門
448jp
0
1k
零細Web制作会社のリモートワーク事情
448jp
0
150
エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック
448jp
2
500
コーディングを神速化するJetBrains IDEのご紹介~基本機能からHTML/CSSまで~
448jp
0
140
Lottieで始めるWebアニメーション入門
448jp
1
310
Figmaが支えるVue Fes Japanのデザイン
448jp
3
4.8k
Vue Fes Japan 2018のデザインを支えたAdobe XD
448jp
2
1.5k
Dreamweaverで学ぶ、「いい感じ」にするための実践CSSテクニック
448jp
3
1.9k
Other Decks in Programming
See All in Programming
Remote SSHで行うVS Codeリモートホスト開発とトラブルシューティング
smt7174
1
510
OSSから学んだPR Descriptionの書き方
fugakkbn
4
140
PHP でガチの電卓を作る
memory1994
PRO
2
160
そうだ、10Gを引こう
mattenn
0
100
Workshop on Jetpack compose
aldefy
0
140
(新米)エンジニアリングマネージャーのしごと #RSGT2023
murabayashi
9
5.9k
Refactor with using `available` and `deprecated`
417_72ki
3
380
Zynq MP SoC で楽しむエッジコンピューティング ~RTLプログラミングのススメ~
ryuz88
0
390
なぜRubyコミュニティにコミットするのか?
luccafort
0
320
Amazon QuickSightのアップデート -re:Invent 2022の復習&2022年ハイライト-
shogo452
0
240
Glance App Widgetでウィジェットを作ろう / MoT TechTalk #15
mot_techtalk
0
140
Writing Greener Java Applications
hollycummins
0
360
Featured
See All Featured
In The Pink: A Labor of Love
frogandcode
132
21k
Three Pipe Problems
jasonvnalue
89
8.9k
The Language of Interfaces
destraynor
149
21k
No one is an island. Learnings from fostering a developers community.
thoeni
12
1.5k
A Philosophy of Restraint
colly
193
15k
Practical Orchestrator
shlominoach
178
8.9k
Statistics for Hackers
jakevdp
785
210k
Intergalactic Javascript Robots from Outer Space
tanoku
261
26k
Mobile First: as difficult as doing things right
swwweet
213
7.8k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
13
5.4k
The World Runs on Bad Software
bkeepers
PRO
59
5.7k
Stop Working from a Prison Cell
hatefulcrawdad
263
18k
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