Howler.jsでかんたん音源再生
Howler.jsとは!?
Howler.jsは、HTMLでサウンドを簡単に扱う事ができる、オーディオライブラリです。
今回は、公式サイトにある使用例を参考にして実装をしてみます。
プロジェクトを作る
次の様にプロジェクトを作ります。
MyProject01/
├ assets/ (Howler.jsで扱うサウンドデータを格納します)
├ index.html (プログラムを起動するファイルです)
├ main.js (メインのプログラムを記述するファイルです)
サウンドで扱うサウンドファイルは、フリーの音源サイトから借りてきましょう。
(お気に入りをご紹介しますね)
効果音ラボ
PANICPUMPKIN
マッチメイカァズ
seadenden-8bit
ダウンロードしたファイルは、"sample_01.mp3"として"assets"フォルダに格納します。
HTMLファイルを用意する
では、作っていきましょう。
HTMLファイルを用意して、下記コードを記述します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>div{margin: 20px;}</style>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/cupertino/jquery-ui.min.css"/>
</head>
<body>
<div>
<button id="btn_play">音楽再生</button>
<button id="btn_stop">音楽停止</button>
<button id="btn_pause">一時停止</button>
</div>
<div id="dsp_time">-</div>
<div id="ui_slider" style="width: 300px;"></div>
<script src="//code.jquery.com/jquery-3.6.0.js" defer></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js" defer></script>
<script src="//cdn.jsdelivr.net/npm/howler@2.2.3/dist/howler.js" defer></script>
<script src="./main.js"></script>
</body>
</html>
Howler.jsのライブラリのロードには、CDN(Contents Deliverly Network)を使っています。
(URLから直接ダウンロードする事で、プロジェクトがコンパクトになりますね)
同時に、"jquery"と、"jquery-ui"もロードしています。
これらを使って、サウンドを操作するコントローラーを実装します。
"div"タグの"id=xxx"にはそれぞれ、次の様な機能を実装していきます。
ID | 種類 |
---|---|
btn_play | 再生ボタンを置く場所 |
btn_stop | 停止ボタンを置く場所 |
btn_pause | 一時停止ボタンを置く場所 |
dsp_time | 再生/全体時間を表示する場所 |
ui_slider | スライドバーを表示する場所 |
JavaScriptファイルを用意する
いよいよ、メインの処理です。
先ずは、"Howl"オブジェクトを用意します。
引数には、様々なパラメータを付与する事が出来ます。
(他のパラメータに関してはDocsをご覧ください)
let snd = new Howl({
src: [サウンドファイルへのパス],
loop: false,// 繰り返し再生をする/しない
volume: 1.0,// 音量(0.0 ~ 1.0)
onplay: ()=>{
console.log("サウンド再生!!");
},
onstop: ()=>{
console.log("サウンド停止!!");
},
onpause: ()=>{
console.log("サウンド一時停止!!");
},
onend: ()=>{
console.log("サウンド終了!!");
}
});
様々なイベント
サウンドの再生や停止、一時停止等の状態に応じて、イベントを取得する事ができます。
主なイベントは、次の通りです。(他のイベントに関してはDocsをご覧ください)
イベント | 種類 |
---|---|
onplay | サウンドの再生時 |
onstop | サウンドの停止時 |
onpause | サウンドの一時停止時 |
onend | サウンドの終了時 |
サウンドの再生、停止、一時停止
HTMLに用意したボタン各種に対して、下記の様に命令を記述します。
// Button
$("#btn_play").click(()=>{
snd.play();// サウンドの再生
});
$("#btn_stop").click(()=>{
snd.stop();// サウンドの停止
});
$("#btn_pause").click(()=>{
snd.pause();// サウンドの一時停止
});
サウンドの再生、停止、一時停止ができました。(やりました!!)
再生時間の表示とスライドバー
最後に、再生時間の表示、そしてスライドバーを作ってみます。
これらを実現するには、下記の命令があれば出来そうですね。
サウンドオブジェクト.seek();// 再生時間を取得する
サウンドオブジェクト.duration();// 総再生時間を取得する
スライドバーは、"jquery-ui"の機能ですが、簡単に説明させて頂きます。
次にある様に、"start"と、"stop"のタイミングでイベントが取得できるので、
ここでサウンドの操作を実装します。
// Slider
$("#ui_slider").slider({
value: 0, min: 0, max: 100, step: 1,
start: (e, ui)=>{
// スライドバーを動かした時
},
stop: (e, ui)=>{
// スライドバーを停止した時
}
});
最後に、全体のコードを載せておきますね。
console.log("custom.js");
window.onload = ()=>{
console.log("onload!!");
let snd = new Howl({
src: ["assets/sample_01.mp3"],
loop: false,
volume: 1.0,
onplay: ()=>{
console.log("サウンド再生!!");
},
onstop: ()=>{
console.log("サウンド停止!!");
},
onpause: ()=>{
console.log("サウンド一時停止!!");
},
onend: ()=>{
console.log("サウンド終了!!");
}
});
// Button
$("#btn_play").click(()=>{
snd.play();// サウンドの再生
});
$("#btn_stop").click(()=>{
snd.stop();// サウンドの停止
});
$("#btn_pause").click(()=>{
snd.pause();// サウンドの一時停止
});
// Slider
$("#ui_slider").slider({
value: 0, min: 0, max: 100, step: 1,
start: (e, ui)=>{
snd.stop();// サウンドの停止
},
stop: (e, ui)=>{
snd.seek(snd.duration() * (ui.value/100));// 再生時間を指定
snd.play();// サウンドの再生
}
});
// Time
setInterval(()=>{
if(!snd.playing()) return;
const str = "再生時間:" + snd.seek() + "/" + snd.duration();
$("#dsp_time").text(str);// 再生時間の表示
const percent = Math.floor(snd.seek() / snd.duration() * 100);
$("#ui_slider").slider("value", percent);// スライドバーの位置を指定
}, 100);
}
スライドバーを作る事ができました。(やりました!!)
最後に
今回は、再生や停止、一時停止を使ったサンプルを作ってみました。
Howler.jsは記述方法がシンプルで扱いやすい点が大きな魅力だと思います。
ここまで読んでいただき有難うございました。
Discussion