Howler.jsでシンプルな波形アニメーションオーディオプレーヤー作ってみた

プレイヤーのデモ

Git Hubにデモを公開しています。

デモはこちら

ダウンロード

Git HubからDLして下さい。

Git Hub

再生モード

再生モードは「ノーマル(nomal)」、「ランダム(random)」、「ループ(loop)」が用意されています。
 

最初に再生する曲を設定

最初に再生する曲をソースコード、またはURLのパラメーターから設定できます。
設定方法は下の項目で解説します。

ボリューム設定

プレイヤーの初期ボリュームをソースコード、またはURLのパラメーターから設定できます。
設定方法は下の項目で解説します。

ソースコードで設定

「common/js/player.js」の以下のコードを書き換えても良いですし、後述するURLのパラメーターからも変更可能です。

// 再生モード( nomal、random、loop )
let playMode = 'nomal';
//再生Index( 1曲目は0番 )
var songIndex = 0;
//ボリューム設定( 0~1、0.5で50% )
var songPer = 1;

URLパラメーターで設定

「このアプリのURL/」以降にパラメータで設定できます。

再生モードの変更

「このアプリのURL/?mode=random」のように「?mode＝」のあとにモードを記述すると再生モードを変更できます。
「ノーマル(nomal)」、「ランダム(random)」、「ループ(loop)」のいずれかを設定して下さい。
何も指定しない場合、nomalになります。
 

最初に再生する曲を設定

「このアプリのURL/?index=0」のように「?index＝」のあとに数値を指定すると、再生する曲の番号を指定できます。
音楽リストの順に曲番号が振られます。
0から数える点に注意して下さい。(1曲目を指定したい場合は0、2曲目は1)

何も指定しない場合、０(1曲目を再生)になります。

//音楽リスト
var myMusicList = [  
  './audio/rave_digger.mp3', //0番(1曲目)
  './audio/80s_vibe.mp3',    //1番(2曲目)
  './audio/running_out.mp3'  //2番(3曲目)
];

ボリューム設定

「このアプリのURL/?per=0.9」のように「?per＝」のあとに小数を指定すると、プレイヤーのボリュームを設定できます。
設定できる値は「0.0〜1.0」までです。
0.0を設定するとミュートになります。

複数のパラメーターを設定する

「このアプリのURL/?mode=random&index=0&per=1.0」のように「&」で複数のパラメーターを設定できます。

モードを「random」に設定すると最初に再生される曲がランダムになりますが、「index」を指定することで最初に再生される曲をコントロールできます。
「このアプリのURL/?mode=random&index=0」のように、使用しないパラメーターは定義しなくて良いです。