初めて学ぶCreateJS

サウンドを再開する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
一時停止したサウンドを再開するには、静的メソッドUSoundJS.resume()を呼出します。ひとつのボタンで一時停止と再開を切替えます。
講師:
09:36

字幕

SoundJS ライブラリで mp3 サウンド ファイルを読み込んで再生します ♪ (音楽再生) ♪ ボタンで pause すると ここまで出来上がった HTML ファイルがあります これに対して今度はサウンドを再開する もう一度再生するという機能を 付け加えたいと思います しかもボタンは1つで ということは pause をかけたらこの表示が 再生の表示に変わり もう一度クリックすると再生すると 一時停止したサウンドを どうやって再開するかと いうことがポイントになります HTML ドキュメントの JavaScript コードについて確認しましょう まずサウンドファイルを読み込んで 再生する所までです 読み込みには PreLoadUS を使います そしてサウンドを読み込む場合には installPlugin メソッドで SoundJS クラスを引数に渡す必要があります そしてサウンドファイルを 読み込み終わった時の処理は onFileLoad のイベントにハンドラを定めます そして loadFile でファイルを読み込みます その中の引数のオブジェクトでは src というプロパティに 読み込みファイルのパス ここに定めてあります それからサウンドには名前を指定するので id 属性 id プロパティに id というこれは変数ですが サウンドにつける名前が設定されています そして読み込み終わったとき ハンドラでは SoundJS.Play という メソッドで サウンドを再生しています 引数にはサウンドの名前が必要です EventObject から id という プロパティで LoadFile メソッドのオブジェクトに 設定した id と 同じプロパティの名前が得られるので それで再生ができるということになります 次にボタンのクリックで サウンドを一時停止する処理です ボタンをまず input 要素で定め id に control という名前をつけました この id を使って document.getElementById これが id 属性に定めた名前ですね そこからこの input 要素 ボタンに対する参照をとります そしてサウンドを読み込み終わった時 ボタンに対して onclick という イベントを定め そのハンドラとして関数を定めています このハンドラ関数では サウンドを一時停止するためのメソッド SoundJS.Pause を呼び出しています 引数にはサウンドの名前を渡しますが id とあります これは変数に予めサウンドの名前を 登録しておいたので それを渡して一時停止ができます あとボタンは pause という名前に サウンドを読み込み終わった時に 書き換えていますので 再生が始まるとボタンのテキストには pause というラベルが表示されます このスクリプトの中身は変えないまま あとで扱いやすいように少し整理します 具体的にはボタンを pause できる状態にするこの2行 これは関数として別に定めます 関数は function pauseSetting としましょう そして単純にこの2行のステートメントを 足します サウンドを pause する設定というのは この pauseSetteing という関数を 呼び出すことになります 動作が変わったり問題が生じていないか ブラウザで確かめることにしましょう 保存をして 「ファイル」メニューから 「ブラウザでプレビュー」します サウンドが再生されます ♪ (音楽再生) ♪ ちゃんと pause ボタンが効きましたね もちろん まだ再生はできません 一時停止したサウンドを再開するのは SoundJS.Play メソッドではありません 別のメソッドを使います それを紹介しましょう SoundJS クラスのメソッドです 3つあります まず再生から SoundJS.Play そして pause 一時停止は SoundJS.Pause でした 渡すのはいずれもサウンドを定める id サウンドの名前です そして 一時停止したサウンドを もう一度再開するのは SoundJS.Resume というメソッドです これで一時停止したところから サウンドがまた再開されます 引数は同じサウンドの id になります JavaScript コードにサウンドを 再開させる処理を書き加えます どこに書くかというと ボタンをクリックして pause すると いうこのイベントハンドラですね ここでは pause したままなんですが pause した後今度は再開する resume の準備にかかります やる内容は実はこの2行と同じことなので コピーしてしまいます クリックしたら今度は再開するわけですから 新しく関数を定めます resumeSound という関数を これから定めます そして pause してしまった わけですから 次に押したら ボタンは再開にならなければなりません ですからボタンのテキストも書き換えます resume と そしてこの関数を定義しましょう function の resumeSound です まず resume するということなんで ここもコピーを利用してしまいますが resume です そして再開したらまた pause できるようにしたいですよね ですから pause できるようにするには どうしたらよいかと言うと pauseSetting という関数を 呼び出せばいいということです 結果をブラウザで確かめましょう 保存したら 「ファイル」から 「ブラウザでプレビュー」です サウンドが再生されます ♪ (音楽再生) ♪ pause しました 一時停止ですね ボタンの文字も 再開 resume に変わっています これでボタンを押して 再開すればいいわけですが どうでしょうか ♪ (音楽再生) ♪ また押せばまた pause そして resume ♪ (音楽再生) ♪ 一個のボタンでサウンドの一時停止と再開を 切り換えるようにしました そして再開のメソッド SoundJS.Resume という メソッドについて説明しました コードの処理の流れも おさらいしておきましょう preLoadJS で サウンドファイルが読み込まれると onFileLoad の ハンドラが呼び出されます このハンドラでは SoundJS.Play のメソッドを使って サウンドを再生します と同時にボタンの設定を 押したら pause するという設定に変える その関数を呼び出します 押したら pause ということは ボタンの onclick ハンドラは サウンドを一時停止するという 処理の関数を設定します そしてボタンの文字は押したら pause だよということで pause という文字を表示します ボタンが押されると pauseSound という関数が呼び出されます ハンドラです このハンドラはサウンドを実際に SoundJS.pause で一時停止します そうしたら今度は ボタンは押したら再開するので ボタンの onclick イベントのハンドラを 新たに設定した resumeSound という 関数で定めます ボタンの表示は押したら再開なので value プロパティは resume という 文字をあてます ボタンがクリックされると再開です 再開の関数はこちらで SoundJS.Resume という メソッドでしたね 引数は他の再生・一時停止と同じく サウンドの id です そうしたら今度は押したらまた pause になるので pauseSetting の関数を呼び出して これが何度でも繰り返されると いうことですね

初めて学ぶCreateJS

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

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

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

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

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