Zenn
🔰

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

2021/09/01に公開
JavaScript
初心者
初心者向け
Howler.js
#
サウンド
tech

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="//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をご覧ください)

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