katsube/neec-html5-qustion.html

## neec-html5-qustion.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf8">
  <title>MusicPlayer</title>
  <style>
    #wave{ border:1px solid gray; }
  </style>
</head>
<body>

<canvas id="wave" width="100" height="100"></canvas>

<form>
  <audio id="bgm" preload>
    <source src="bgm.ogg" type="audio/ogg">
  </audio>
  <button id="start" type="button">再生</button>
  <p>(再生回数<span id="playcount"></span>)</p>
</form>

<script>
// ソースコードの読み込み完了時に実行する
window.onload = () => {
  const bgm = new MusicPlayer({
     audio: "#bgm",       // 再生したい<audio>
    button: "#start",     // 再生ボタン
     count: "#playcount", // 再生数の表示箇所
      wave: "#wave"       // アニメーション用canvas
  });
};

/**
 * 音楽再生プレイヤー
 */
class MusicPlayer {
  constructor(params) {
    // 引数受け取り
    this.audio_id  = params.audio;
    this.button_id = params.button;
    this.count_id  = params.count;
    this.wave_id   = params.wave;

    // カウンターの初期値セット
    this.count = this.loadPlayCount();
    this.viewPlayCont();

    // 再生時アニメーションの初期値セット
    this.wave  = {};
    this.wave.canvas = document.querySelector(this.wave_id);
    this.wave.ctx    = this.wave.canvas.getContext("2d");
    this.wave.x      = Math.floor(this.wave.canvas.width/2);       //中心点X
    this.wave.y      = Math.floor(this.wave.canvas.height/2);      //中心点Y
    this.wave.r      = 10;    // 半径
    this.wave.frame  =  0;    // フレーム数のカウント
    this.wave.step   =  1;    // アニメーションの増減量

    // イベント処理
    document.querySelector(this.button_id).addEventListener("click", ()=>{
      this.playBGM();
      this.addPlayCount();
    });
    this.updateWave = this.updateWave.bind(this);
  }

  loadPlayCount(){
    let count = localStorage.getItem("playcount");
    return ((count)?  Number(count):0);
  }
  addPlayCount(){
    let count = ++this.count;
    localStorage.setItem("playcount", count);
    this.viewPlayCont(count);
  }
  viewPlayCont(){
    const id = this.count_id;
    document.querySelector(id).innerHTML = this.count;
  }

  playBGM(){
    const id = this.audio_id;
    document.querySelector(id).play();
    this.updateWave();
  }

  updateWave(){
    if( (this.wave.frame++ % 3) === 0 ){
      this.drawWave();
    }
    window.requestAnimationFrame(this.updateWave);
  }
  drawWave(){
    const ctx   = this.wave.ctx;
    const width = this.wave.canvas.width;
    let r = this.wave.r;

    // 拡大/縮小の切り替え
    if( r <= (width/10/2) || r >= (width/2/2) ){
        this.wave.step *= -1;
    }
    r += this.wave.step;

    // 描画
    ctx.clearRect(0, 0, this.wave.canvas.width, this.wave.canvas.height);
    ctx.beginPath();
    ctx.arc(this.wave.x, this.wave.y, r, 0, Math.PI*2, false);
    ctx.fill();

    this.wave.r = r;
  }
};
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf8">
	<title>MusicPlayer</title>
	<style>
	#wave{ border:1px solid gray; }
	</style>
	</head>
	<body>

	<canvas id="wave" width="100" height="100"></canvas>

	<form>
	<audio id="bgm" preload>
	<source src="bgm.ogg" type="audio/ogg">
	</audio>
	<button id="start" type="button">再生</button>
	<p>(再生回数<span id="playcount"></span>)</p>
	</form>

	<script>
	// ソースコードの読み込み完了時に実行する
	window.onload = () => {
	const bgm = new MusicPlayer({
	audio: "#bgm", // 再生したい<audio>
	button: "#start", // 再生ボタン
	count: "#playcount", // 再生数の表示箇所
	wave: "#wave" // アニメーション用canvas
	});
	};

	/**
	* 音楽再生プレイヤー
	*/
	class MusicPlayer {
	constructor(params) {
	// 引数受け取り
	this.audio_id = params.audio;
	this.button_id = params.button;
	this.count_id = params.count;
	this.wave_id = params.wave;

	// カウンターの初期値セット
	this.count = this.loadPlayCount();
	this.viewPlayCont();

	// 再生時アニメーションの初期値セット
	this.wave = {};
	this.wave.canvas = document.querySelector(this.wave_id);
	this.wave.ctx = this.wave.canvas.getContext("2d");
	this.wave.x = Math.floor(this.wave.canvas.width/2); //中心点X
	this.wave.y = Math.floor(this.wave.canvas.height/2); //中心点Y
	this.wave.r = 10; // 半径
	this.wave.frame = 0; // フレーム数のカウント
	this.wave.step = 1; // アニメーションの増減量

	// イベント処理
	document.querySelector(this.button_id).addEventListener("click", ()=>{
	this.playBGM();
	this.addPlayCount();
	});
	this.updateWave = this.updateWave.bind(this);
	}

	loadPlayCount(){
	let count = localStorage.getItem("playcount");
	return ((count)? Number(count):0);
	}
	addPlayCount(){
	let count = ++this.count;
	localStorage.setItem("playcount", count);
	this.viewPlayCont(count);
	}
	viewPlayCont(){
	const id = this.count_id;
	document.querySelector(id).innerHTML = this.count;
	}

	playBGM(){
	const id = this.audio_id;
	document.querySelector(id).play();
	this.updateWave();
	}

	updateWave(){
	if( (this.wave.frame++ % 3) === 0 ){
	this.drawWave();
	}
	window.requestAnimationFrame(this.updateWave);
	}
	drawWave(){
	const ctx = this.wave.ctx;
	const width = this.wave.canvas.width;
	let r = this.wave.r;

	// 拡大/縮小の切り替え
	if( r <= (width/10/2) \|\| r >= (width/2/2) ){
	this.wave.step *= -1;
	}
	r += this.wave.step;

	// 描画
	ctx.clearRect(0, 0, this.wave.canvas.width, this.wave.canvas.height);
	ctx.beginPath();
	ctx.arc(this.wave.x, this.wave.y, r, 0, Math.PI*2, false);
	ctx.fill();

	this.wave.r = r;
	}
	};
	</script>
	</body>
	</html>