CreateJS新バージョンの大きな変更

ロードしたMP3サウンドファイルを再生する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ロードした外部MP3サウンドを再生する例でご紹介します。
講師:
06:11

字幕

新しい preloadjs と soundjs を使って 外部の MP3 サウンドを読み込んで 再生してみたいと思います 今画面に開いているのは 古いバージョンで書いたコードです これを新しいバージョンに 対応させてみたいと思います 先ずブラウザでコードの確認をしましょう ファイルメニューから ブラウザでプレビューします テスト用のサウンドが再生されましたので 確認ができましたブラウザを閉じましょう では旧バージョンのスクリプトの 処理の流れを確認します もっとも処理の流れ自体は新しい バージョンでも大きく変わる訳ではありません 先ずサウンドファイルのパスを 変数にとっておきます そして外部ファイルのロードなので preloadjs を使っています その preloadjs のオブジェクトに対して loadFile というメソッドを呼び出すと ファイルが読み込まれます この時ファイルの指定なんですけれども オブジェクトで定めています プロパティ src ソースですね そこにファイルのパスを置いて そして id というところに 読み込み終わった後に再生するサウンドの 識別子 名前が入っています サウンドを再生するには プラグインの設定が必要です それが installPlugin というメソッドで それに対してサウンドのクラス soundjs のクラスの指定をします こうするとこのクラスの中に サウンドの設定が入っているので それが読み込まれて初期設定が行われます そして読み込み終わったら再生 読み込み終わったらというのは これは preloadjs 一般の処理なんですけれども onFileLoad という イベントハンドラーに 読み込み終わった時の 関数を定めています そして読み込み終わった時の イベントハンドラーですけれども soundjs の play というメソッドで サウンドを再生します この時 loadFile に指定したオブジェクトの id が必要になります それは eventObject から ドット id で取ることができるので これでサウンドが再生されます 修正は preloadjs と soundjs の 2 つに跨りますので 大きくはないですけれど細かいです 先ず preloadjs から 修正していきましょう ファイル名が代わりますね LoadQueue になります それから読み込み終わったら という所なんですが イベントハンドラーも 使えない訳ではないんですが EventListener の方がやはり良いです ということで ここは addEventListener そしてイベントは FileLoad です イベントは基本的には全て 小文字ですのでお気を付けください そして関数の指定は やはり同じ関数の参照ですね 次は soundjs です こちらもクラス名が変わりました ライブラリ名は soundjs で良いんですけれども クラスはただの Sound になっています ということは こちらの再生の方も sound.play です 後もう一つ eventObject から id をもらう時に 新しいバージョンでは eventObject 直に id がありません ここに取りまとめの itemという オブジェクトが入りますので item のドット id ということになります ではライブラリの方は バージョンアップしましょう ポイント技術がかかってきますので preloadjs が 0.3.0 soundjs が 0.4.0 ということになります そうしたらファイルは保存しましょう ファイルメニューから 保存です そして ブラウザでプレビューします サウンドが無事に再生されました ではブラウザを閉じましょう 新しい preloadjs と soundjs を使って 外部 MP3 サウンドを読み込んで 再生する手順についてのおさらいです 先ず preload になるんですけれども クラスは LoadQueue になります そして EventListener で ファイルのロードを待ちます イベントハンドラーから EventListener ということですね 次にサウンドの方なんですけれども やはりクラスの名前が変わります soundjs から Sound に変わります これは preloadjs の LoadQueue installPlugin というメソッドに渡す引数なんですが その時にクラスを渡すんですが そのクラス名が Sound に変わっています それからサウンドを再生する 静的なメソッドが soundjs から Sound.play ということになっています 後は eventObject で id を受け取る場合このid は loadFile メソッドで 渡しているんですけれども これまでは eventObject.id で取れたんですが 新しいバージョンからは item という所で ひとまとまりなっていますので そこから さらに id というプロパティを取る ということになります これで新しいバージョンで サウンドを読み込んで 再生することができます

CreateJS新バージョンの大きな変更

2013年2月にCreateJSがアップデートされました。このコースではイベントリスナーの採用やPreloadJSとSoundJSの変更など特に影響が大きいと思われる変更点をいくつかかいつまんで解説し、それらをどのように修正すればよいのか説明します。

43分 (8 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2014年04月01日

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

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

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