JavaScriptのイベントを理解する

再生中のサウンドを切り替える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
再生中のサウンドと操作しようとしているサウンドのパスを比べて、サウンドを切り替えます。
講師:
11:38

字幕

このレッスンでは 再生中のサウンドを 別のサウンドに切り替える という処理についてご説明します 今画面に出しているのは サウンドプレイヤーなんですけれども ほぼに近いそのサウンドが切り替えられません 実際に見てみましょう 再生です (音楽) もう一度クリックすると 一時停止になります さあまたクリックすると 再開と (音楽は再開します) ところはここで他のボタンを押します このサウンドは始まりません 今再生していたサウンドが じゃあまた別のサウンドの項目を クリックすると (音楽) (音楽停止) (音楽再開) (音楽停止) という風にサウンドを再生している最中は どのボタンをクリックしても 今再生中のサウンドに対して 一時停止と再開が繰り返してしまいます 再生し終われば また別なサウンドを再生することは (音楽) 可能です ですからどのサウンドをクリックしたのか 今再生中のサウンドをクリックしているのか それとも別のサウンドに切り替えたのか ということを調べる必要がある訳です 再生中のサウンドの切り替えが まだ出来ていない html ドキュメントを Dreamweaver で開きました 今サウンドの一時停止再開を どのように扱っているかというと この部分になるんですけれども まず再生あるいは一時停止している audio 要素があるかどうかを 確認してあった場合には それが今度は一時停止をしているかどうか していれば再生する この関数は audio 要素に対して play というメソッドを呼び出しています そして一時停止している場合 else の場合については 一時停止の処理を行います これがこの関数でaudio 要素に対しては paused というメソッドを呼び出します でも他のボタン li 要素なんですけれど 他の li 要素クリックした場合 この処理ではまずいですね新たにサウンドを 再生をし直すということが必要です その場合にクリックした 要素の扱っているサウンドと 今 audio 要素が再生 あるいは一時停止しているサウンドとは 同じかどうかを比べて 同じだったらこの処理で良いわけですね そうでなかったら新たにサウンドを再生する という処理に切り替えなければなりません ここがサウンドの切り替えとなります ですから if 条件がここで加わります どのような条件だというと まずクリックしたい要素 li なんですが li 要素については それぞれ data-src という属性で 再生すべきサウンド みんな違いますね が指定されています それをコードでは ここですね getAttribute data-src でクリックした要素の サウンドのパスを取っています ですからこれを持ってきて 次に今再生している audio 要素ですね audio 要素が持っているパス と比べればいいわけです これをコピーして持ってきます そしてgetAttribute audio 要素に設定する場合には 設定されるソースは src という属性になっていますので この二つを比べます で同じであれば 再生しているサウンドと それから 今クリックした要素と 一致する訳ですから 今までの 先ほどの サウンドの一時停止 再開の仕方というわけです そうでない場合 クリックしたボタンが今再生中の サウンドとは別の要素場合には 新たにサウンドを再生し直すと いうことが必要です どうすればいいかというと実はもう 準備出来ているんですね audio 要素がなく 新たにサウンドを再生する場合 audio 要素をダイナミックに作る 関数が呼ばれて audio 要素を作ります そしてそれに対して どのサウンドを再生するのかという サウンドのパスを渡してplaysong という関数で サウンドを再生してます この else の場合には audio 要素はもうあるわけですから audio 要素を作るという この Create player という関数を呼び出す必要はありません この playSong だけを 呼び出せばいいんですね ですからこれをこのまま コピーしてもってていってしまいます インデントをつけましょう これでOKです では確認してみましょう 「ファイル」保存して 「ブラウザーでプレビュー」します 再生します (音楽) 一時停止 また再生ですね (音楽再生) 一時停止 別のサウンドを再生します (音楽2) (音楽3) ということでサウンドのコントロールは 上手くいきました でもとても気になりますね 表示がちゃんと サウンドの再生一時停止あるいは なにもサウンドがされていない し終わった状態と切り替えできていませんので それを入れて仕上げましょう サウンドがなにも再生されていない状態と 再生されている時 一時停止 その要素のスタイルを切り替えるのは スタイルシートです そしてスタイルシートの中で id 属性を設定されていて その id 属性を切り替えることで スタイルを切り替えています まず再生中は id playing と設定すれば 再生中の表示になります 一時停止は paused id がなにもなければ 普通の状態ということになるわけです では一時停止なのかそれとも再生中なのか なにも再生されていないのかと いちいち調べるのは面倒ですね こういう時の定石 簡単な方法としては まず 全部 この playSong をする前に なにもしていない状態に戻してしまうんですね その上で playSong を呼び出せば playSong からは playAudio を呼び出して そうすると適切な要素に id 属性 playing が付くわけです 一旦全部クリアしてしまうというのは 一つのコツです では一旦全部クリアするという関数を 定義する前提で 関数名は clearAllStatus としましょう そしてこの関数を 新たに定義します clearAllStatus 引数はないのでこのままコピーしまいます そして中括弧始まり 中括弧閉じ どうすればいいかというと実はサウンドが 終わった時の listener 関数 endSong でやりたいことを 基本的にやってるんですね playing という id の付いた 要素があるはずだから探して それを空にしましょうとそうすると 通常の状態になる訳です これを頂きましょう このまま ということは このendSong からは clearAllStatus は 呼び出さないといけないとなりますね コピーを持っていきます そして ; もっとも allStatus ですから playing があるかもしれませんし paused かもしれません どっちでもいいので 両方貰ってしまいましょう まず playing の方は変数名も コピーして playing にしましょう そして id の方も playing の id ですね 同じ事を paused に付いても 行えばいいので コピーして ペースト そして id の名前は paused なんで ペーストと ペーストとしましょう ただし ここで呼び出される時は playing があるかないか paused があるかないか分かりませんので どちらもあるかないかを 一旦確認した上で idの属性を変更することにします playing があった場合には コピーを持ってきて playing のidを playing で 取れた要素のidを空にします 今度同様に もしも paused があった場合 idが設定されている要素があった場合には それを同じように paused のidをコピーして .id を すればいいということですね これでいいでしょう であ一旦保存して 確認してみます 「保存」をして 「ブラウザーでプレビュー」しましょう 再生します (音楽) 一時停止 (音楽2) サウンドを切り替えます (音楽3) 一時停止 また違うサウンド (音楽4) (音楽5) 大丈夫そうですね このレッスンでは サウンドを再生している最中に そのサウンドを切り替える という方法についてご説明しました 今回の場合は 今再生している audio 要素の持っているパスと それからクリックしてサウンドを 切り替えている要素 の持っている 属性ですね 二つを比べて クリックしたものと 再生中のものが同じかどうかを比べて それに応じて再生 一時停止なのか それとも新たに サウンドを切り替えるのか ということを設定しました もう一つコツとして何か設定を 切り替えたい時は 全部一旦クリアーしてから 目的のものを設定し直す というのも一つ覚えておいてください

JavaScriptのイベントを理解する

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

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

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

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

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