初めて学ぶCreateJS

サウンドを一時停止する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
再生されているサウンドを一時停止するには、静的メソッドSoundJS.pause()を呼出します。body要素に加えたボタンで実行します。
講師:
08:37

字幕

CreateJS の soundJS ライブラリで 再生したサウンドを 一時停止する方法についてご説明します body 要素にボタンをおいて そのボタンをクリックしたら サウンドが一時停止すると いう風にしたいと思います HTML ドキュメントには mp3 サウンドを読み込んで 再生するまでのスクリプトが書かれています 一時停止はまだできていません ざっと流れを確認しましょう まずファイルを読み込むのは PreloadJS を使います PreloadJS のインスタンスを作ったら サウンドを読み込む場合には installPlugin というメソッドを 呼び出す必要があります 引数には今回はサウンドですので SoundJS というクラスを渡します そして読み込み終わったらという onFileLoad イベントにハンドラを定めます このハンドラでサウンドを再生する訳です それから loadFile メソッドで ファイルを読み込みます 引数に渡すオブジェクトには src というプロパティに ファイルのパス ファイルのパスはここで定めています それから サウンドに付ける ID 名前を定めています そして onFileLoad イベントのハンドラでは イベントオブジェクトを受け取り SoundJS.Play メソッドで再生します この時 EventObject から id プロパティを取り出し この music という名前ですね これを取り出して 再生するサウンドを定めます まずは 準備として body 要素にボタンを加えます ボタンは input 要素です そして type を button にし ボタンの名前ですね この名前により JavaScript から コントロールができます control としましょうか それから ボタンに表示する文字です value でまだ読み込み中ということで loading にしておきます そしてタグを閉じます では 保存して ボタンが表示されるかどうか 確認しましょう まだボタンに対するスクリプトを 書いていませんので いくら押してもサウンドは止まりません 確認は「ファイル」メニューから 「ブラウザでプレビュー」です サウンドが再生されます (音楽) ボタンのコントロールを書く前に 準備として変数を2つ定めます 1つ目は id です id というのはサウンドに付ける名前です ここでは直接 id というプロパティに music という文字を入れていますが id はあちこちで使いますので 予め決めておくことにしましょう ですからこのプロパティの値としては 同じ名前ですが id という変数に入っている この文字を渡すと いう形にします もう1つはボタンです ボタンの名前を control にしたので 変数名も control にしましょう 別に合わせる必要はないです ただわかりやすいかなということですね そしてここに実際にボタンのこの id から input 要素の参照を得ますので タイプし間違わないようにこの変数を コピーして document getElementById です ここに input 要素 ボタンにつけた名前を渡すと この input 要素の参照を 変数にとることができます 次に サウンドはどうやって 一時停止すればよいのかを 説明しましょう サウンドの再生は Sound.play というメソッドでした そして引数には サウンドの id を渡します サウンドの一時停止も非常によく似ています createJS の名前空間からスタートして SoundJS.pause です 渡すのは同じく サウンドの id ということになります ボタンをクリックしたら サウンドを一時停止します その処理はサウンドが再生されてからですから onFileLoad のイベントハンドラで行います button に対してボタンをクリックしたら ということなので onclick です そして一時停止するという処理は 関数で定義したいと思います ですから名前は pauseSound と しましょう そして pauseSound の関数を定めます タイプミスをしないように コピーを使います そしてサウンドの停止の仕方です createjs.SoundJS.Pause ですね そして id は変数として宣言しましたので id で構いません ボタンに表示するテキストも変えましょう ボタンの名前 変数名の value というプロパティです そこにこのボタンを押したら pause になるよということですので 文字通り pause と書き入れます ボタンに表示するテキスト value プロパティを設定する ステートメント位置が違っていました これはサウンドを読み込み終わって 再生が始まったらボタンのテキストを pause としたいわけですから onFileLoad イベントのハンドラの方に 移さないといけません こちらに移しましょう ではブラウザで確かめてみます 保存をしたら 「ファイル」メニューから 「ブラウザでプレビュー」です サウンドが再生されます (音楽) 一時停止しましたね ここではサウンドの再生に対して 一時停止するというメソッドを紹介しました sound.pause というメソッドですね ボタンのクリックでサウンドの 一時停止ができたのは まずボタンを input 要素で定め その id 属性を元にボタンを取り出し そのボタンに onclick イベントの ハンドラを定めました このハンドラの中で サウンドを一時停止する soundJS.Pause というメソッドを呼び出し 引数には予め変数で定めておいた id を渡しました これがサウンドの再生と 一時停止の仕方です

初めて学ぶCreateJS

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

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

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

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

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