JavaScriptのイベントを理解する

要素の属性を使って再生するサウンドを変える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
クリックした要素の属性を調べて、再生するサウンドを切り替えます。
講師:
05:58

字幕

このレッスンでは 再生するサウンドの処理 パスを JavaScript コードで 切り替えるということやってみます 今画面には ボタンのような表示が咲いているんですが どれをクリックしたかによって サウンドを切り替えようということです Dreamweaver で開いた HTML ドキュメントでは 動的に audio の要素作って サウンドの再生をするという ところまではできています ただ 切り替えりはできていません どういう仕組みになっているかというと audio の要素ですね これを動的に作って HTML に加えています Body 要素ですね そして再生の関数がこれなんですが どのサウンドを再生しなさいという パスを決め打ちしています そしてパスを audio の要素の src 属性に指定して 再生するということなんで ここに指定した パスを指定したサウンドが 再生るんですが これを 何とか切り替えたいということです そして audio 要素 ダイナミックに作っていますので body 要素の中には ul その中に li 要素があるだけです audio の要素はありません ただし li 要素が data-src という属性で それぞれ異なる サウンドのパスを持っています ですから この属性の値を取ってきてそれを この関数や引数に指定してあげれば サウンドが切り替わるはずということです ではクリックした li 要素の 属性を取ってくるというところを コードとして書いてみたいと思います クリックのイベントで出されるのは この setJukebox です ここでクリックされるのは li 要素ですので そのターゲットを 取ってくればいいでしょう target は 関数から受け取った eventObject から target のプロパティで 指定しておきます そして今度はクリックした li 要素のこの属性ですね それを取ってきたいと思いますので その取ってきたパスを soundName にしましょう soundName ということで 取り出したいと思います クリックした li 要素の 属性を取ってきます getAttribute と そして data-src ですね そして data-src が取り出した sound のパスが変数に入りますので これをコピーして 指定した この文字です 上書きしてしまえばいいですね ペーストします では確認してみましょう 一度「ファイル」を「保存」して 「ブラウザでプレビュー」します ではこの二番目クリックしてみます (音楽) サウンドが終わりましたね 違うボタンをクリックしてみますが (音楽2) こが長いので リフレッシュしてしまいましたけれども クリックするボタンによって (音楽3) 再生するサウンドが変わりました もう少し書き加えましょう 再生は li 要素を区別して 3とのパスを書いているですけれども 再生中の表示で これが実は css として スタイルシートの方に定義してあります まだ使っていないんですが スタイルシート見てみると li 要素が 再生中の表示なんですが playing という id 属性で 指定してあれば 表示が変わるようになっています これを Javascript コードの方で設定するようにします li 要素はターゲットとして 受け取れるんですけれども 再生に付いたの処理は playSong こちらの関数で 設定した方が後々使いやすいです ということなので このターゲットですね target を playSong の方に 引数として渡すようにします コピーを持っていきます そうしたら受け取る方の引数 変数ですね 変数名は item というのに 変えます項目なので これに対して id 属性を先ほど定義してあった playing にすればいい ということですね すると サウンドの再生そのものは 別に変わりませんけど 再生中のボタンの表示が変ります 「ファイル」を保存して 「ブラウザでプレビュー」しましょう 二番目をクリックします (音楽) 一番目をクリック (音楽2) ということで再生中の表示が変わります もちろん再生終了した戻せということを 設定していません あるいは再生中のサウンドを 止めるというしていませんので 今の状態ですと (重なった音楽) かなりひどいことになるんですけれども これはまあ次のステップとして ここではサウンドを動的に切り替える ということについてご説明しました

JavaScriptのイベントを理解する

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

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

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

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

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