JavaScriptのイベントを理解する

サウンドを再開する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
一時停止していたサウンドを再開します。
講師:
05:37

字幕

このレッスンでは 一度サウンドを一時停止した後 もう一度再開するという処理について ご説明したいと思います 今画面に表示している これは サウンドのプレイヤーなんですが クリックすると再生をして もう一度クリックすると 一時停止まではします (音楽) クリックで 一時停止 表示も一時停止の表示として 別に変わりました ただこれをもう一回クリックした時に 再生する処理が加わっていません これを書き加えたいと思います Dreamweaver CC で 一時停止までの処理が加えられた HTML ドキュメントを開いています ここでは audio 要素を動的に作って それをドキュメントに加えています そして再生をしているかどうか audio 要素が加えられた 変数に対して paused のプロパティで 一時停止しているかどうかを調べています そして一時停止していない時 つまり再生中の時は pauseAudio という関数を定めて そこでサウンドのポーズ 一時停止を行っています これですね 更に 一時停止の時に表示が変わりました あれは li 要素のスタイルを 変えているんですけれども その*li 要素を ここでは target という変数に入っているのですが 引数で送って そしてスタイルシートでは id paused と いう id 属性で スタイルが設定してあるので そのスタイルを クリックした li 要素に適用しています ということで一時停止の処理と 一時停止のボタンの表示が変わるわけです 問題は一時停止している時の処理が まだ書かれていないことですね これはポーズの場合と大体 平行に 同じように考えればいいことなん で pauseAudio としたから ここで playAudio にしましょう まだ定義していません そして多分 li 要素の表示も 変えないといけませんので 同じように引数を置く必要はあるでしょう そして pauseAudio は ここにあるわけですが 上に playAudio を 書くことにしましょう やはりやることは二つです ポーズだと「pause」 メソッドの呼び出しなんですが それを play という呼び出しにします それから li 要素 item という引数で取ってますけれども その id に今度は playing という id を設定して 表示を再生中の表示にします 見てみるとですね 初めてサウンドを再生する時に playSong という 関数を呼び出しています それはやはり item を 受け取るんですがここで 今言った audio 要素に対する play という呼び出し それから item に対する playing という id 設定 やってますねですがこの二つを取り出して 関数にしちゃえばいいということになります ちょっと線に下がって そのあとに function ですね playAudio このままですので コピーして持ってきちゃいます ターゲットではなく 引数は item にしましょう 揃えましょう コピーして ペーストして そしてこの playSong から 移動して持ってきてしまいます play メソッドの呼び出し それから受け取った item 引数の item に対して 今度は playing という id を設定すると こちらから除いちゃいましたから playSong の方は playSong から playAudio を 呼び出すことは必要ですね item という引数は共通ですので これを扱ってしまいます ということで 再生の処理が新たに加えました 確認してみましょう 「ファイル」を一旦「保存」して 「ブラウザーでプレビュー」します まずは再生してみましょう (音楽) クリックすると 一時停止ということになりますね さて次にもう一回クリックした場合ですね 大丈夫でしょうか (音楽再び開始) またクリックです 一時停止しました 一時停止と再開という処理がこれで きちんと行えるようになりました このレッスンでは一時停止したサウンドを 再開するという処理についてご解説しました 一時停止しているかどうかを audio の要素に対して paused というプロパティで 一時停止していれば true していなければ false ということで 調べられるわけですが 一時停止していない場合は paused この pauseAudio は すでにあった訳なんですが 新たに playAudio もし一時停止していたら 再開しましょうという関数を加えました この中では audio の要素にたいして play メソッドを呼び出し それからクリックした item に 適切な再生のスタイル割り当てる ということを行った訳です

JavaScriptのイベントを理解する

あらかじめ決められた出来事が起こったときに発生するメッセージをJavaScriptでは「イベント」と言います。このコースではJavaScriptの基礎を学んだ方を対象に、マウス操作やデータの読み込みなどよく使われるイベントについて解説します。また関数の定義や処理の仕方などを実際にスクリプトを書きながら説明します。

2時間45分 (23 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年11月23日
再生時間:2時間45分 (23 ビデオ)

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

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

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