audioタグを使ったオリジナルプレイヤーの作り方
前回、audioタグの一番簡単な使い方について書きましたが、やはりブラウザによって表示が異なるのはデザインの観点でも困りますね。
今回はデザインを統一するためにも、オリジナルのコントローラーを作成する方法について書いていけたらな、と思います。
ところで、プレイヤー？プレーヤー？
どっちが正しいんでしょ。
Google検索によると
- プレイヤー: 約 58,600,000 件
- プレーヤー: 約 63,000,000 件
でプレーヤーの方が多いですが、Wikipediaの表題はプレイヤーですね。
まぁどっちでもいいか。
audioタグの操作
さて、audioタグを操作するためには何が必要かというと、
- 再生、停止機能
- シーク機能
- 音量調整機能
ブラウザのデフォルトコントローラでできるのはこのあたりでしょうか。
この機能はHTMLやCSSだけでは制御できないので、これらをJavascriptに置き換えていきます。
HTML
まず、HTMLを用意します。
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Music Player</title>
</head>
<body>
<audio src="" onclick="" preload="none" style="display:none;"></audio>
</body>
</html>
audioタグはcontrols属性を追加しなければコントローラは表示されないと思いますが、CSSでdisplay:none;を設定しておけば、場所を取ることはないはず。
Javascriptを書く
そして、Javascriptを書いていきます。
場所はHTMLファイル内のどこでも大丈夫です。
最近は</body>の前に書くことが多いらしいですね。
<script type="text/javascript">
var media = document.getElementsByTagName("audio")[0];
var src = "media/sample.mp3";
media.src = src;
</script>
Javascriptは私もかじったようなものなので、詳細な説明は省きますが、
mediaという変数を用意して、そこにページ内の1つ目のaudio要素を格納しています。
これでmediaはインスタンスのような感じになります。
ページ内に複数のaudioタグがある場合は、先頭から番号が振られ、末尾の[0]の数字で指定できます。
配列と同じなので、最初は0です。
HTML内のaudioタグにはsrc属性を指定していないので、このままでは再生できません。
ここでは、Javascript内で変数srcを用意し、そこにメディアファイルへのパス(URL)を格納します。
それをそのまま、media.srcに指定します。
再生と停止のためのJavascript
次に再生、停止するための関数を用意します。
<script type="text/javascript">
function play() {
media.play();
}
function pause() {
media.pause();
}
function stop() {
pause();
media.currentTime = 0;
}
function start() {
if(!media.paused){
pause();
}else{
play();
}
}
</script>
mediaオブジェクトのメソッドを呼び出すだけの関数です。
そのまま、playメソッドは再生、pauseメソッドは再生中のファイルを一時停止します。
再生を停止するには、pause処理をしたあと、再生位置(currentTime)を0にすれば良いです。
コントローラの実装
これを制御するコントローラを作ります。
なんでもいいのですが、今回はdivにします。
div要素をクリックしたときに各関数を呼び出せばOKです。
<div id="play" onclick="start();">再生</div>
<div id="stop" onclick="stop();">停止</div>
div {
display: inline-block;
width: 50px;
height: 50px;
}
これが再生、停止ボタンになります。
再生ボタンを押すと再生されます。
再生中は一時停止ボタンとして利用できます。
また、play()、pause()、stop()の各関数内で、divの内容を書き換えることで、より操作性が上がると思います。
document.getElementById('play').innerHTML = '一時停止';
コントローラの位置やサイズなどは自由に設定できます。
まとめ
今回は簡易コントローラの実装方法について書いてきました。
ここまでをまとめたHTMLです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Music Player</title>
<style>
div {
display: inline-block;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<audio src="" onclick="" preload="none" style="display:none;"></audio>
<div id="play" onclick="start();">再生</div>
<div id="stop" onclick="stop();">停止</div>
<script type="text/javascript">
var media = document.getElementsByTagName("audio")[0];
var src = "music/003.mp3";
media.src = src;
function play() {
media.play();
document.getElementById('play').innerHTML = '一時停止';
}
function pause() {
media.pause();
document.getElementById('play').innerHTML = '再生';
}
function stop() {
pause();
media.currentTime = 0;
}
function start() {
if(!media.paused){
pause();
}else{
play();
}
}
</script>
</body>
</html>
これでとりあえず、音楽ファイルの再生と停止はできるようになりました。
ですがこれだけではメディアプレイヤーのコントローラとして心許ないので、次回はもう少し作りこんでいけたらいいなと思います。
コメント