初めて学ぶCreateJS

サウンドファイルを読込んで再生する

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
外部サウンドファイルは、PreloadJSクラスで読込んで、SoundJS.play()メソッドにより再生します。、読込む際には、PreloadJS.installPlugin()メソッドでプラグインを登録する必要があります。
講師:
09:03

字幕

CreateJS のライブラリ SoundJS を使うと mp3 をはじめとする 様々なサウンドを再生することができます 外部のサウンドを読み込むには PreloadJS を使います ですから SoundJS と PreloadJS を 連携した外部サウンドの 再生方法についてご紹介します サウンドのファイルは作業用の フォルダの中に sounds という名前で フォルダを用意し その中に music という名前の mp3 サウンドが収めてあります 尚 練習用のサウンドファイルが 必要という方は ダウンロードした SoundJS の ファイルの中に examples というフォルダがありまして その更に assets という中に 幾つか mp3 サウンドなどが用意されています このレッスンでは この 18_machinae... という長い名前のサウンドがありますが これを使って 名前が長いので music という 名前に変えてあります html ファイルには 最初の準備だけしてあります それを確認しましょう まず script 要素で ライブラリを読み込んでいます 外部からの読み込みには PreloadJS を使います それから SoundJS です 今回特に画面にキャンバスに 描くものはありませんので EaselJS を読み込んでおくことは 要りません それからファイルのパス サウンドという... sounds という フォルダの中の music.mp3 というパスを変数に入れてあります それから body 要素には onLoad 属性で 最初に読み込む 呼びだす関数が指定してありますので その関数の側だけ script 要素の 中に用意してあります では PreloadJS と SoundJS を 連携したサウンドファイルを 読み込んで再生する手順について 簡単に確認しておきましょう サウンドファイルを読み込んで 再生する手順の まず PreloadJS 側の処理から 確認していきます PreloadJS で外部ファイルを開く時の 3つのステップは基本的に同じです つまり new 演算子で PreloadJS のインスタンスを作ります 引数には false を渡しておきます そしてロードが済んだ時の処理は onFileLoad イベントにハンドラを定めます ここでサウンドを再生します それから loadFile メソッドで 外部ファイルを読み込みます ただサウンドの場合には 付け加えることがありまして その1つが installPlugin メソッドの呼び出しです サウンドというのはプレイヤー プラグインによって再生します ですから その準備が必要になります そしてどんな準備が必要かは そのファイルを扱う 今回の場合サウンドですので SoundJS が知っています ですから引数にはこのファイル この種類のデータのための プラグインを準備してね ということで installPlugin という メソッドを呼び出します それから loadFile に渡す引数なんですが ファイルの URL だけでは足りません サウンドに名前を付ける必要があるんですね ですから引数の渡し方が ファイルの URL 文字列でぽんと渡すのでなく オブジェクトの形で {} に包んだ形で2つのパラメーター ファイルの URL と 名前を渡します プロパティ名は ファイルの URL が src それから名前の方は id という プロパティ名を付けます 次に SoundJS の側 サウンドの再生はとても簡単です ファイルを読み込み終わった onFileLoad イベントのハンドラの中で 呼びだすのは SoundJS.play です SoundJS のインスタンスを作らずに 直接 SoundJS というクラス名の後に play というメソッド名を付けます 所謂 制的なメソッドというものです この時に引数として サウンドの名前を渡す必要があります 名前は loadFile メソッドで id というプロパティに入れて設定しました ここで設定した名前はハンドラが受け取る イベントオブジェクトの中に入れてくれます ですからイベントオブジェクトに対して id というプロパティに 何が入っている と聞くと サウンドの名前を教えてくれるので その名前のサウンドを再生する ということになります では JavaScript のコードを 実際に書き加えていきます 最初に呼びだされる初期設定の 関数の中で まず普通に PreloadJS の インスタンスを作ります loader という変数名にして new で createjs.PreLoadJS ですね 引数は false です そして読み込み終わった時の イベントハンドラを定めます onFileLoad イベントハンドラの名前は soundLoaded にしましょう soundLoaded そして読み込みですね 間違いのないようにコピーを使います loadFile この中にオブジェクトで 読み込むファイルを定めます ファイルは変数に URL が入れてありますので src のプロパティ ソースの意味でしょうね にファイルを指定して id に名前を付けます これは文字列ですので「""」で囲んで music という名前にしましょう これはどんな名前を付けても構いません そしてサウンドを読み込む場合には 1つ必要なことがありましたね loader に対して PreloadJS のオブジェクトに対して installPlugin どんなインストールが必要かは 今回使う― SoundJS に聞く ということになります ですからこれを引数に渡します installPlugin に渡した 名前空間のタイプが足りませんでした createjs ですね そしてイベントハンドラです 読み込んだ後のイベントハンドラは soundLoaded を定めます イベントオブジェクトを受け取ります そして再生は簡単です createjs.SoundJS.play です この時にサウンドの名前が必要ですので イベントオブジェクトに聞きます プロパティは id です では保存してブラウザで確認しましょう 「ファイル」メニューから 「ブラウザでプレビュー」をします サウンドが再生されます (サウンドの再生音) (サウンドの再生音) (サウンドの再生音) SoundJS によるサウンドの再生自体は とても簡単でした SoundJS.play でサウンドの名前を渡します むしろ PreloadJS で 外部のサウンドのファイルを読み込む時 いつものステップに ちょっと 付け加えるものがあることにご注意下さい 1つは installPlugin メソッドに これから読み込むサウンドの プラグインを準備させます そのため引数は SoundJS の クラスを渡します それから loadFile で ファイルを読み込む時 ファイルのパスだけでなく 名前を付ける必要があります そのためオブジェクトの中に ファイルのパスを src 名前を id というプロパティで オブジェクトに収めて それを loadFile の引数に渡しました

初めて学ぶCreateJS

このコースではCanvasへの簡単な描画からTweenJSによるトゥイーンアニメーション、PreloadJSでの外部画像ファイルの読み込みやSoundJSでのサウンドの再生などのさまざまな種類のスクリプティングについて解説します。さらにEaselJSでのマウスによるインタラクティブな操作やフィルタを使った動的な表現なども紹介します。

3時間31分 (27 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年02月22日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。