nakajmg/SoundJS.md

## player.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);

## SoundJS.md

      
    Raw
  

              SoundJS.md
            
          
    SoundJS demo (on Google Drive) LINK
	<!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>
	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);