JavaScriptで音楽再生する方法をサンプルコード付き解説!
WEBサイトやWEBアプリの中で音を鳴らすようにしたい、音声や音楽再生をしたいなどと思ったことがあるのではないでしょうか?JavaScriptのAudioクラスを使うことで音楽ファイルの再生や停止、音量調整機能などを実装することができます。
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で音楽再生する方法とコントロールする方法を紹介してきました。上記で紹介したプロパティは一部であり、他にも様々なプロパティが存在します。それらのプロパティを活用することで音楽ファイルをコントロールする様々な機能を自在に実装することが出来るようになるでしょう。
最後に音楽を再生、停止したり、音量調整を行うことができる簡単な機能を実装したサンプルコードを紹介するので、ぜひ参考にして、自分なりにカスタマイズしてみてくださいね。