JavaScriptでaudioタグの音楽再生処理を実装しよう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、Web上に設置されたボタンから音楽を流す方法を勉強しました。

demoは、「こちら」で確認できます。

環境構築

簡単な環境構築をお願いします。

必要なファイルは、以下の通りです。

音声(sounds)は「こちら」で取得できます。

開発

ページの作成

最初にページを作成しましょう。

HTMLのaudioタグは、文書内に音声コンテンツを埋め込むために使用します。

このHTMLをブラウザ上で表示すると以下のようになります。

何も表示されていません。audioタグに「controls」などのタグをつければいい感じの再生ボタンが表示されますが、今回はJavaScriptでボタンを作るのでひとまずこれでOKです。

スタイルの追加

次にスタイルを記述しましょう。

ここまで実装すると以下のようになります。

JavaScriptの実装

音源ボタンを作成する

最初に音源ボタンを作成しましょう。

createElementでHTML要素を作成できます。そして、この要素にbtnクラスを追加し、innerTextにてボタンのラベルを設定、getElementByIdでbuttonsIDが付与されているHTMLの子要素として追加しています。

ここまで実装すると以下のように表示されます。

クリックイベントの登録

次にクリックイベントを登録して、音源ボタンを押下した時に音楽が流れるようにしましょう。

soundsに設定した値(‘applause’, ‘boo’, ‘gasp’, ‘tada’, ‘victory’, ‘wrong’)は、audioタグのIDです。

そのため、getElementById(sound)にて、audio要素が取得できます。audio要素は「play」メソッドを持っており、これを実行すると音楽が流れます。

音楽再生の制御

もう一つやることがあります。現状だと、音楽を流している最中に他のボタンをクリックすると音楽が同時に流れてしまいます。

流れる音楽を常に一つの状態にしましょう。先ほど作成したクリックイベントに次の処理を加えます。

audio要素を取得したら「pause」メソッドで音楽が止められるようです。

また、「currentTime」プロパティは音楽再生時間を表していて、0秒に設定すると一番最初に巻き戻ります。

これでOKですね。

おわりに

audioタグは便利そうですね。あまり使ったことはなかったのですが、簡単なミニゲームを作る時に役立ちそうな気がします。

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

コメントを残す