JavaScriptで音楽再生する方法をサンプルコード付き解説!

WEBサイトやWEBアプリの中で音を鳴らすようにしたい、音声や音楽再生をしたいなどと思ったことがあるのではないでしょうか?JavaScriptのAudioクラスを使うことで音楽ファイルの再生や停止、音量調整機能などを実装することができます。

コンテンツ [表示]

  1. 1JavaScriptで音楽再生したい
  2. 2JavaScriptで音楽再生する方法
  3. 2.1再生
  4. 2.2停止
  5. 3JavaScriptで音楽再生時のコントロール方法
  6. 3.1ボリューム調整
  7. 3.2ミュート
  8. 3.3再生位置の変更
  9. 3.4ループ再生の有効化/無効化
  10. 4まとめ

JavaScriptで音楽再生したい

WEBサイトやWEBアプリの中で音を鳴らすようにしたい、音声や音楽再生をしたいなどと思ったことはないでしょうか?

実はHTMLのaudioタグを使うことで簡単に実装することができます。少しだけ紹介したいと思います。

audioタグのsrc属性に直接、再生したい音楽ファイルを指定することもできますがこの場合1つの音楽ファイルしか設定することができません。

音楽ファイルにはOgg形式やmp3形式、wav形式があり、その中でもOgg形式とwav形式はIEのブラウザ上では再生することができません。

そのため、sourceタグを用意し、このタグの中でsrc属性にファイル名とtype属性にファイル形式を指定することができるので、sourceタグを複数用意し複数のファイル形式の音楽ファイルを用意することで、1つのあるファイル形式の音楽ファイルが表示したブラウザで対応していない場合はもう1つのファイル形式の音楽ファイルを採用させるようにすることができます。

ですが、基本的にはmp3のファイル形式の音楽ファイルを用意しておけば問題ないでしょう。

audioタグにはcontrols属性を与えることで、再生機能コントローラを表示することができます。音楽の再生、停止や音楽ファイルの時間の表示や音量調整、ミュートなどを行うことが出来ます。

loop属性を与えることで、音楽が最後まで到達したらまた最初から再生するようにループ再生を行うことができます。

少し回り道をしましたが、これからJavaScriptで音楽再生する方法を紹介していきます。

JavaScriptで音楽再生する方法

それではHTMLのaudioタグを使わずにJavaScriptで音楽再生する方法を紹介していきたいと思います。

まずAudioクラスを使ってオブジェクトを生成します。オブジェクトを生成する際に引数に音楽ファイルを指定します。

const music = new Audio('musics/music.mp3');

Audioオブジェクトを使いこなせるようになることで、audioタグで実装したときよりも複雑なカスタマイズもすることが出来るようになります。

再生

music.play();

Audioオブジェクトでplayメソッドを使うことでオブジェクト生成時に指定した音楽ファイルを再生することができます。

停止

music.pause();

停止するにはpauseメソッドを使用します。一時停止するだけですので、再生位置は最初の位置に戻らずに停止したタイミングの再生位置で止まります。もう一度再生するにはplayメソッドで停止した位置から再生することができます。

これだけで音楽の再生や停止など基本的な操作は行うことが出来るようになりました。次は音量調整やループ再生など様々な機能をコントロールする方法について紹介します。

JavaScriptで音楽再生時のコントロール方法

Audioクラスでは音楽を再生したり停止したりするメソッドだけでなく、様々な機能をコントロールするプロパティが用意されています。それらのプロパティについて一部紹介していきたいと思います。

ボリューム調整

music.volume = 0.5;

音楽のボリュームを調整するにはvolumeプロパティを使います。volumeプロパティに0~1の間で値を設定することが出来ます。0が無音で1が最大ボリュームになります。

ミュート

music.muted = true;
music.muted = false;

音楽をミュートにするためにはmutedプロパティを使用します。mutedプロパティには論理値を設定することができ、trueにすることでミュート機能が有効になります。falseにすることでミュート機能が無効になり、音楽が通常通り流れます。

再生位置の変更

music.currentTime = 60;

音楽の再生位置を変更するにはcurrentTimeプロパティを使用します。currentTimeプロパティは秒単位で値を指定します。

pauseメソッド実行後にcurrentTimeプロパティに0を設定することで、リセット機能を実装するといったことも可能になります。

ループ再生の有効化/無効化

music.loop = true;
music.loop = false;

音楽終了後に再び初めから再生させるループ再生を設定するためにはloopプロパティを使用します。loopプロパティには論理値を設定することができ、trueにすることでループ再生を有効にすることができます。

まとめ

JavaScriptで音楽再生する方法とコントロールする方法を紹介してきました。上記で紹介したプロパティは一部であり、他にも様々なプロパティが存在します。それらのプロパティを活用することで音楽ファイルをコントロールする様々な機能を自在に実装することが出来るようになるでしょう。

最後に音楽を再生、停止したり、音量調整を行うことができる簡単な機能を実装したサンプルコードを紹介するので、ぜひ参考にして、自分なりにカスタマイズしてみてくださいね。

GeekHive採用サイト

関連記事