🍀

Howler.jsであっさり音源再生

5 min read

Howler.jsとは!?

Howler.jsは、HTMLでサウンドを簡単に扱う事ができる、オーディオライブラリです。
今回は、公式サイトにある使用例を参考にして実装をしてみます。

Howler.js

プロジェクトを作る

次の様にプロジェクトを作ります。

MyProject01/
 ├ assets/ (Howler.jsで扱うサウンドデータを格納します)
 ├ index.html (プログラムを起動するファイルです)
 ├ main.js (メインのプログラムを記述するファイルです)

サウンドで扱うサウンドファイルは、フリーの音源サイトから借りてきましょう。
(お気に入りをご紹介しますね)

PANICPUMPKIN
マッチメイカァズ
seadenden-8bit

ダウンロードしたファイルは、"sample_01.mp3"として"assets"フォルダに格納します。

HTMLファイルを用意する

では、作っていきましょう。
HTMLファイルを用意して、下記コードを記述します。

index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<style>div{margin: 20px;}</style>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/cupertino/jquery-ui.min.css"/>
	<script src="https://code.jquery.com/jquery-3.6.0.js" defer></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" defer></script>
	<script src="https://cdn.jsdelivr.net/npm/howler@2.2.3/dist/howler.js" defer></script>
	<script src="./main.js"></script>
</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>
</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をご覧ください)

main.js
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に用意したボタン各種に対して、下記の様に命令を記述します。

main.js
// Button
$("#btn_play").click(()=>{
	snd.play();// サウンドの再生
});

$("#btn_stop").click(()=>{
	snd.stop();// サウンドの停止
});

$("#btn_pause").click(()=>{
	snd.pause();// サウンドの一時停止
});

サウンドの再生、停止、一時停止ができました。(やりました!!)

再生時間の表示とスライドバー

最後に、再生時間の表示、そしてスライドバーを作ってみます。
これらを実現するには、下記の命令があれば出来そうですね。

main.js
サウンドオブジェクト.seek();// 再生時間を取得する
サウンドオブジェクト.duration();// 総再生時間を取得する

スライドバーは、"jquery-ui"の機能ですが、簡単に説明させて頂きます。
次にある様に、"start"と、"stop"のタイミングでイベントが取得できるので、
ここでサウンドの操作を実装します。

main.js
// Slider
$("#ui_slider").slider({
	value: 0, min: 0, max: 100, step: 1,
	start: (e, ui)=>{
		// スライドバーを動かした時
	},
	stop: (e, ui)=>{
		// スライドバーを停止した時
	}
});

最後に、全体のコードを載せておきますね。

main.js
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

ログインするとコメントできます