SoundJSを使うとオーディオのコントロール処理が楽に書ける！
http://www.createjs.com/#!/SoundJS
非同期で読み込んだオーディオに対してコントロールを行うボタンとかを作成していく
下記コードのデモ (on Google Drive)
soundjs.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SoundJS!!</title>
</head>
<body>
<div><button id="load">load</button></div>
<div id="player"></div>
<script src="./soundjs-0.4.0.min.js"></script>
<script src="./player.js"></script>
</body>
</html>
player.js
function init(){
document.getElementById('load').removeEventListener('click',init);
// オーディオファイルの登録
createjs.Sound.registerSound('./bgm.mp3','sound');
// 読込が終わるとloadCompleteイベントが発生する
// loadCompleteイベント発生時のfunctionを登録
createjs.Sound.addEventListener('loadComplete',handleLoadComplete);
// loadCompleteイベント発生時に呼ばれるfunction
function handleLoadComplete(event){
createController(event.id);
// オーディオをコントロールするメソッドを割り当てたボタンを作ってDOMに追加する
function createController(soundid){
// SoundJSのインスタンスの作成
// コントロールはこのインスタンスの持つメソッドで行う
var instance = createjs.Sound.createInstance(soundid);
var play = document.createElement('button');
play.innerText = "play";
play.addEventListener('click',function(){
// 再生
instance.play();
});
var stop = document.createElement('button');
stop.innerText = "stop";
stop.addEventListener('click',function(){
// 停止
instance.stop();
});
var pause = document.createElement('button');
pause.innerText = "pause";
pause.addEventListener('click',function(){
// 一時停止
instance.pause();
});
var resume = document.createElement('button');
resume.innerText = "resume";
resume.addEventListener('click',function(){
// 一時停止の解除
instance.resume();
});
var mute = document.createElement('button');
mute.innerText = "mute";
mute.addEventListener('click',function(){
// ミュートにする
instance.mute(true);
});
var unmute = document.createElement('button');
unmute.innerText = "unmute";
unmute.addEventListener('click',function(){
// ミュートの解除
instance.mute(false);
});
var volumebar = document.createElement('input');
volumebar.setAttribute('type','range');
volumebar.setAttribute('max','10');
volumebar.value = instance.getVolume()+10;
volumebar.addEventListener('change',function(){
// バーの値が変化すると呼ばれる/ // バーの値に応じた音量のセット
instance.setVolume(this.value/10);
volumetext.innerText = (this.value/10).toFixed(1);
});
var volumedown = document.createElement('button');
volumedown.innerText = "vol -";
volumedown.addEventListener('click',function(){
// ボタンによる音量ダウン
var vol = (instance.getVolume()-0.1).toFixed(1);
if(vol >= 0.0){
volumetext.innerText = vol;
instance.setVolume( vol );
volumebar.value = vol*10;
}
});
var volumeup = document.createElement('button');
volumeup.innerText = "vol +";
volumeup.addEventListener('click',function(){
// ボタンによる音量アップ
var vol = (instance.getVolume()+0.1).toFixed(1);
if(vol <= 1.0){
volumetext.innerText = vol;
instance.setVolume( vol );
volumebar.value = vol*10;
}
});
var volumetext = document.createElement('a');
volumetext.innerText = instance.getVolume().toFixed(1);
// 音量の最大値は1.0
var duration = document.createElement('div');
instance.addEventListener('succeeded',function(){
// 再生開始時にsucceededイベントが発生する
// オーディオの再生時間の長さを取得(値はms
var dura = instance.getDuration();
duration.innerText = "playback time:"+ Math.floor(dura) + "ms";
});
var interval;
var remaining = document.createElement('div');
instance.addEventListener('succeeded',function(){
// 100msごとに残り時間を計算する
interval = setInterval(getRemainingTime,100);
});
// オーディオの残り時間を計算して表示する
function getRemainingTime(){
// 全体の長さと現在の再生位置を計算して%表示する
var rem = (100 - (instance.getPosition() / instance.getDuration()) * 100);
remaining.innerText = "remaining time:" + Math.floor(rem) +"%";
}
instance.addEventListener('complete',function(){
clearInterval(interval);
});
// controllerに各ボタンを追加
var controller = document.createElement('div');
controller.appendChild(play);
controller.appendChild(stop);
controller.appendChild(pause);
controller.appendChild(resume);
controller.appendChild(mute);
controller.appendChild(unmute);
controller.appendChild(volumebar);
controller.appendChild(volumedown);
controller.appendChild(volumetext);
controller.appendChild(volumeup);
controller.appendChild(duration);
controller.appendChild(remaining);
// htmlに用意してあるidがplayerの要素にcontrollerを追加
// controllerをreturnするように変更すれば複数ファイルのコントローラー作成に適した形にできます
document.getElementById('player').appendChild(controller);
}
}
}
// loadボタンにinitを登録する
document.getElementById('load').addEventListener('click',init);
この他にも色々なタイミングで発生するイベントや多くのメソッドが用意されています。
ドキュメントを参照してみてください。
PreloadJSと合わせて使うと複数オーディオファイルのコントロールや同時再生などがかなり簡単にできるのでおすすめです。