JavaScriptのイベントを理解する

サウンドを一時停止する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
audio要素の存在とその再生が一時停止しているかを調べて、再生中のサウンドを一時停止します。
講師:
07:48

字幕

このレッスンでは 再生しているサウンドを一時停止する という処理についてご説明します 一時停止するということは サウンドが再生中であるかどうか ということを まず確かめなければなりません 今画面には サウンドのプレイヤー の設定をしたページが 開いているですけれども これはまだ クリックしたサウンド 再生するだけで停止することはできません ではこの辺をクリックしてみます (音楽) 停止しようとすれば リフレッシュですね 再読み込みにすれば 初期に戻るんですけれども このボタンの操作で 一時停止をしたいと思います DreamweaverCC で開いているのが まだ一時停止の処理を加えていない HTML ドキュメントです サウンドの再生はどうしているかというと audio 要素は動的に作っています createElement で 動的に作って その要素 object を ドキュメントに加えています そして最後まで再生されると 再生が終わったという eventListener が やはり登録されているので その eventListener は ドキュメントに加えられている audio 要素ですね これをドキュメントから除くことで 再生終了の処理を行っています ですか今再生中かどうかというのは まず この audio 要素が 存在されているかどうか ドキュメント内にあるかどうか ということを確かめる必要があります そのために audio 要素を作る この関数なんですが ここにちょっと印を加えます 印というのは audio 要素に id 属性 これをプロパティで与えてしまいます id 属性であれば ドキュメント内に一つですから その id を持った要素があるかどうか ということは調べられますね ですから id で player としましょう ですからクリックをした時に 実行される eventListener が関数ですが 実際に再生を始める前に id に player という 名前のついたものがあるかどうか document にいきます querySelector ですね そして id の player が あったらそれを取り出しなさいと あればいいですね あれば再生中です それを入れる変数はaudio Player という変数なんですが ここにこれを代入をします そして代入された中に オブジェクトがあるかどうか というのを if 文で確かめます コピーしました そして あれば 再生中の 要素が audio があります なかった時に 初めて audio の要素を作って 再生ということを行うわけです ですからこれは else の方に入れておきます ではポーズを作りたいと思います ポーズをかけるには再生中なのか ポーズしているかということを確かめますね これもやはり if 文です そして audio 要素のプロパティとして ポーズしているかどうかと paused というプロパティがあります そうすると今再生を中断している 一時停止 しているものがあるということなのですが 今回は再生している最中の場合の処理なので else ですね audio の要素はあるが 一時停止していないという場合に対して 処理を加えます ここは新たに 関数を定義することにしましょう 文字通り pauseAudio にしましょう これを新たに定義します 画面をスクロールして ここに加えましょう function の pauseAudio これをコピーして持っていきます ポーズはどうしたらいいかというと この audio 要素が入っている オブジェクトが入っている変数に対して 文字通りに paused というメソッドを呼び出せばいいです 再生の場合は play でしたので ポーズの場合は コピーしましたけれども paused これで再生しているサウンドは 一時停止ということができます 確認してみましょう 「ファイル」を一旦保存して 「ブラウザーでプレビュー」します 再生します (音楽) もう一回クリックするとポーズしましたね でも再開するという処理は加えてません だからクリックしても駄目です 後もう一つ細かいですが ちょっと気になるのは 再生中の表示これは li 要素に 設定しているんですけれども その表示がポーズになっても変わりません 実はポーズ用のスタイルもスタイルシート の方に定義してありますので それをポーズする場合には 設定するようにしましょう 再生中のスタイルは id の playing というのに対して 設定されていました id の paused というスタイルに ポーズしている時の スタイルが設定されています ではここで同じように item の id の イコール paused では駄目ですね このアイテムはどこでしょうと こちらの関数では アイテムを受け取っていますけれども paused pausedAudio の関数では 受け取ってませんから ここで受け取るようにしましょう そうすると PlaySong で target を送って ここですね その target が今度は item という変数に入る訳ですが そこに対してしているわけです ですから同じようにこのターゲットを pauseAudio の方でも 送るようにします ではこれで確認してみましょう 「ファイル」を保存して 「ブラウザーでプレビュー」です まずクリックで再生ですね (音楽) クリックするとポーズしました この動作自体は先ほどと一緒なんですが 表示がこれはポーズ用ですね ポーズ用の表示に 変わっています ではもう一回 クリックしても再生はしません これは 次のステップの課題になります このレッスンでは再生しているサウンドを 一時停止する方法についてご説明しました ステップは二つありましたね audio 要素が あるかどうかというのを id 属性を付けておいて この id の要素があるかということで まず audio 要素の 存在を調べました 次にその audio 要素が一時停止 サウンドの一時停止しているかどうかで 今回は一時停止をしていない 再生中の場合に関数を呼び出してそして audio 要素に対して paused というメソッドを呼び出すことで 再生の一時停止をしました

JavaScriptのイベントを理解する

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

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

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

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

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