JavaScriptのイベントを理解する

サウンドを動的に再生する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
audio要素を動的につくって、サウンドの再生を行います。
講師:
08:33

字幕

このレッスンですは サウンドファイルのパスを使って 動的にサウンドの再生を行ってみます HTMLドキュメントはこの sample.html なんですけれども 階層に css や images 画像とフォトの他 audio というのもあります ここの中に mp3 のサウンドが 5つありますが この中の一つを このサウンドの名前もうちょっ使ってもると パスを使って再生したいと思います そして再生を使う sound 要素は 動的にダイナミックに作成します HTMLドキュメントを Dreamweaver で開きました またほとんど サウンドに関わるものはありません ul 要素の中に li 要素リストがありまして それぞれに 属性でパスは実はあるんですが これはまだ意味を持ちません そしてサウンドの名前テキストがあります JavaScript のコードも事実的に 空なんですが一応 body に onLoad 属性として関数名 そして script の要素に 関数の空っぽの定義がしてあります 今の画面の状況だけを 確認しておきましょう 「ファイル」から 「ブラウザーでプレビュー」します 再生ボタンが並んでいるですけれども 後 css の設定してありますから ハイライトもしますけれども 何も起こりません ではまず sound の要素を動的に ダイナミックに加えたいと思います sound は再生ボタンをクリックしたら 再生することになるんですけれども それぞれの sound は この li 要素で持っておきます その li 要素全体で 住んでいる ul 要素 これに対してクリックの eventListener を 設定したいと思います ul 要素で class は player です では関数の中に 変数名を 「jukebox」にしてみましょう そして document の querySelector ですね その中で ul 要素の player ということで ul 要素が選択できます 変数の中に要素の 3 種類入りますね そして後で使うので 変数だけ宣言しておきますが audioPlayer と ここに audio 要素をダイナミックに 作成して設定する予定です そしてこの jukebox の ul 要素クリックしたら サウンドを再生します addEventListener ですね クリックしたら event は click です そして listener 関数 setJukebox にいきましょう これから定義します function の setJukebox コピーした方がいいですね コピーを持ってきて 引数には eventObject を受け取ります これは EventListener の関数のお約束ですね そしてその中では createplayer という 関数を定義します まだいまのところこの中に 処理する内容は少ないですけれども だんだん増えてくるということを想定して 関数にできるものを 関数にしてしまいます ダイナミックに audio の要素を作ります createPlayer と もちろんこれから関数は定義します function の createPlayer やはり コッピした方が安全ですね タイプミスが防けます そして中括弧始まりと 中括弧閉じと まだ空だった 変数 audioPlayer に audio の要素をダイナミックに 作います document の createElement ですね そして 要素の処理は audio です これで audio の要素が できましたけれども もちろん HTML ドキュメントに 差し込まないといけませんので どこに差し込むのかというと document の body 要素に対して加えましょう appendChild で audioPlayer ですね これを加えてます ダイナミックに audio の要素が加えました もちろん まだ実の内容は何もありませんので 再生はできませんけれども 要素がちゃんと body 要素の中に 加えたかどうかを確認することしましょう 「ファイル」を保存して 「ブラウザーでプレビュー」します 要素の検証を見てみましょう 右クリックで「要素の検証」ですね そして body 要素の中には ul 要素があり そこに ul 要素が入っているんですが これを閉じておきます body の中には 直下には ul 要素しかありませんね さてこれでどこでもいいんですが クリックします audio 要素が追加されました もちろん中は空っぽですけれども 要素オブジェクトとしては 存在していることが分かりましたので これに設定を必要なものに加えて サウンドとして再生しましょう オーデオの再生も関数として使われます createPlayer で audio 要素を作った後にですね では playSong にしましょう そしてどのサウンドを 再生したいかというと このサウンドのパスですね それを渡すことにします また実際に使われていない ですがここにある「data-src」 この属性の中に指定したものは実は 先ほどお見せした mp3 サウンドのパスです ですからこれを持っていくことにしょう ダブルクォーテーション付いた状態で 文字列として これから定義する playSoung が ちょっと違いますね playsong と ちょっと sound とちょっと タイプミスしてしまったんですけど function の playSong を コピーして持っていきます そしてこの中に渡された sound の名前というか パスなんですけれども これを再生しましょうということです そのためには audio 要素ですね ダイナミックに作りました ここですねこの audioPlayer に対して 教えてもらった この soundName ですね これを source として src として設定します これでサウンドの再生ができる 準備が整えました 再生は呼び出す必要があります audioPlayer audio 要素ですねが入っています それに対して play というのと呼び出せば結構です では確認してみましょう 「ファイル」は一旦「保存」して 「ブラウザーでプレビュー」です クリックします どれをクリックしても 同じサウンドが 再生されるんですけれどもクリック (音楽) 停止ボタンはありませんので リフレッシュで停止します 別なぼボタンを押しても (音楽) 同じサウンドなんですが ともかくも パスを指定したサウンド audio 要素ダイナミックに作って 再生ができたということです このレッスンでは外部サウンドの 再生の仕方についてご説明しました その場合には audio 要素が 必要で今回はダイナミックに作成し そこに src のプロパティで サウンドのパスを設定したら play でサウンドが 再生されたということです

JavaScriptのイベントを理解する

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

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

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

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

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