JavaScriptのイベントを理解する

サウンドの終了をイベントで捉える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
サウンドの再生が終わったことをイベントで捉えて処理してみます。
講師:
06:08

字幕

このレッスンでは サウンドの再生が終わった というイベントをとらえて処理を行ってみます 今画面に出している これはサウンドのプレイヤーという想定 なんですが ボタン毎にクリックすると 異なったサウンドが鳴ります けれどもその終了時の 処理が行えていません それを加えたいとおもいます Dreamweaver に開いたのが またサウンドの再生 終了についての処理を 加えていない HTML ドキュメントです サウンドを再生するための audio 要素は 動的に作って そして body 要素に 加えているんですけれども 再生をする時には この再生を関数に sound のパスですねそれを src 属性に設定して サウンドを 再生するという仕組みになっています このサウンドが再生し終わったらどうするか という処理を加えたいと思います これはもちろんイベントで扱うわけです けれども再生し終わったらというのは 再生が始まってからの話ですので この再生をするという関数に加えます そしてイベントリスナーを加えるのは audio 要素が入っている変数 audioPlayer これを使います コピーを持ってきて そしてイベントリスナーですから addEventListener イベントは サウンドが終わったというのは ended というイベントとなります そして listener 関数は これから定義する訳ですけれども では endsound にしましょう その listener 関数を定義します 関数名はコピーをした方が安心ですね コピーを持ってきます そして EventObject を受け取る これは リスナー関数は必ずやっておくことです そして何をしたらいいというと サウンドの再生が終わりましたから audio 要素も HTML ドキュメントに 入れておく必要はないですね ということなので audio 要素を HTML ドキュメントから除きます これを使いましょう appendChild ですけれども 持ってきてコピーを持ってきます 反対ですから removechild ということになります 誰にお願いするか というと document の body に加えていますから document の body に 同じようにお願いすればいいんですけれども ここで別の取り方をしてみましょう 自分自身を除きたいというんだったら 自分の親にお願いすればいい訳ですので この audioPlayer をコピーして持ってきて その parentNode ですね こういう風に指定してしまえば もし追加先が body 要素でなくなっても ちゃんと削除することができます では確認しましょう 「ファイル」を保存して 「ブラウザでプレビュー」です もっともイベントが 発生したかどうかというのは 画面では普通に見えませんので ここでは 右クリックで「要素の検証」にします そして body 要素の中に 再生を始めると audio 要素が加わりますが ちゃんと removechild が 聞いていれば それが消えるはずですね では一番短めのサウンドの二番目にします クリックします (音楽) ここを見ていてください (音楽が終わる) 消えましたねですからちゃんと削除された ということが確認できます もっとも画面で見ていてわからないけど どうしても気になるのは サウンドを再生した時に 再生していた状態のスタイルが 適用されているんですが 再生し終わっても このスタイルが除かれません 本当したいですよね それを付け加えることにしましょう サウンドの再生中のスタイルの設定というは css で行っているんですが それは playing という id に対して設定しているので その playing という id を list 要素なんですけど li 要素ですね そこに加えることによって表示が変わります ですからこれを id を除いてやれば いいということなるんですが ここで li 要素どうやって 取って来ようということなんですが まず変数を設定しましょう item playing という id が 設定してある要素ですよね ですからこれはドキュメントに行けば 分かります document の querySelector です その中で playing という id 属性を設定したものを 取りなさいと言えば ここと同じものが入ってきます ではその id を消してしまえば いいでしょうと 消すというはカラーの string を設定します item の id に対して カラー文字列ですね これで表示の設定がもとに戻るというはずです 確認しましょう 「ファイル」を「保存」して 「ブラウザでプレビュー」 ではまた短めの二番目 (音楽) ちゃんと元に戻りましたね このレッスンでは サウンドの再生が終了したというイベント ended というものを紹介し イベントリスナーに登録した上で 再生の終わった audio 要素を HTML ドキュメントから除く という処理を行ってみました

JavaScriptのイベントを理解する

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

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

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

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

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