音楽プログラミングアプリ( javascript,読み込み,再生,ゲーム)

音楽プログラミングアプリベースを javascriptで少し簡単に
試作してみましたので、公開しておきます。

予告バーなどみたいなのはないような、シンプルなものです。
クリック判定はスペクトラム周波数の値で行っています。

サイトコンテンツ

1 音楽プログラミングアプリ html部分
2 音楽プログラミングアプリ変数初期化
3 音楽プログラミングアプリスペクトラム周波数色分け表示
4 音楽プログラミングアプリボタン判定
5 音楽プログラミングアプリ　ボタン判定の配列
6 音楽プログラミングアプリファイルをdataUALに変換
7 音楽プログラミングアプリ Web Audio API初期化メイン処理
8 音楽プログラミングアプリ全コード

音楽プログラミングアプリ html部分

まずはhtmlの部分から

<style>
    body {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    #display {
      display: block;
      margin: 1em 0;
    }
</style>


<canvas id="display"></canvas>
<label id="open-file">
<input id="file-input" type="file"><br />
</label>


<br />
<br />
<button id="b1" onclick="button1_click()" style = "background-color :rgb(125, 125, 125) ; font-size:15px; width :100px; height :38px;  -moz-border-radius: 31px; -webkit-border-radius: 31px; border-radius: 31px;  box-shadow:0px 0px 4px 0px #666;  -moz-box-shadow:0px 0px 4px 0px #666; -webkit-box-shadow:0px 0px 4px 0px #666; text-shadow:0px 0px 0px  #000; "  type="submit"  >♬</button>
<button id="b2" onclick="button2_click()" style = "background-color :rgb(125, 125, 125) ; font-size:15px; width :100px; height :38px;  -moz-border-radius: 31px; -webkit-border-radius: 31px; border-radius: 31px;  box-shadow:0px 0px 4px 0px #666;  -moz-box-shadow:0px 0px 4px 0px #666; -webkit-box-shadow:0px 0px 4px 0px #666; text-shadow:0px 0px 0px  #000; "  type="submit"  >♬</button>
<button id="b3" onclick="button3_click()" style = "background-color :rgb(125, 125, 125) ; font-size:15px; width :100px; height :38px;  -moz-border-radius: 31px; -webkit-border-radius: 31px; border-radius: 31px;  box-shadow:0px 0px 4px 0px #666;  -moz-box-shadow:0px 0px 4px 0px #666; -webkit-box-shadow:0px 0px 4px 0px #666; text-shadow:0px 0px 0px  #000; "  type="submit"  >♬</button>
<br />
<div id="good1"></div>
<div id="good2"></div>
<div id="good3"></div>
<br />
<br />
POINT:<div id="total_point">0</div>

<style>

body {

display: flex;

flex-direction: column;

align-items: center;

}

#display {

display: block;

margin: 1em 0;

}

</style>

</label>

<br />

<br />

<br />

POINT:<div id="total_point">0</div>

ファイル読み込みコントロール
スペクトラス周波数表示用canvas
ゲーム用のクリック用のボタン
ゲーム用の判定表示
ゲーム用の得点表示

などを表示しています。

音楽プログラミングアプリ変数初期化

以下からはjavascriptのコードです。
グローバル変数やキャンバスサイズの設定など。
ボタンクリックはクリックされるとグローバル変数がtrueになるだけ。

const canvas = document.querySelector('#display');
const canvasContext = canvas.getContext('2d');
canvas.width = 500;
canvas.height = 255;
var g_total_point = 0;
var g_click_button1 =false;
var g_click_button2 =false;
var g_click_button3 =false;
function button1_click(){g_click_button1=true;}
function button2_click(){g_click_button2=true;}
function button3_click(){g_click_button3=true;}

const canvas = document.querySelector('#display');

const canvasContext = canvas.getContext('2d');

canvas.width = 500;

canvas.height = 255;

var g_total_point = 0;

var g_click_button1 =false;

var g_click_button2 =false;

var g_click_button3 =false;

function button1_click(){g_click_button1=true;}

function button2_click(){g_click_button2=true;}

function button3_click(){g_click_button3=true;}

音楽プログラミングアプリスペクトラム周波数色分け表示

引数として受け取った、スペクトラム周波数の配列の値で
canvasにスペクトラムバーをHSVで色分けして描画する関数。
HSVやHSLは色相角度で色を求めることができるので
プログラミングで色を扱う時に使いやすいです。

//canvasにスペクトラムバーを描画する HSVで色分けしている
function RenderSpectrum(sp) {

  const barWidth = Math.round(canvas.width / sp.length);
  canvasContext.clearRect(0, 0, canvas.width, canvas.height); 

  //スペクトラム描画
  for(let i = 0; i < sp.length; i++) {
	    var color_val = Math.round((sp[i] / 255) * 360);
	    var hsv = [ color_val, 100 ,100]; 
		var rgb = HSV_RGB(hsv);
		var rgb_code = 'rgb('+rgb[0] +', '+rgb[1] +', '+rgb[2] +')';
		canvasContext.fillStyle = rgb_code;
	    canvasContext.fillRect(barWidth * i, canvas.height, barWidth, -sp[i]);
  }
  
}

//canvasにスペクトラムバーを描画する HSVで色分けしている

function RenderSpectrum(sp) {

const barWidth = Math.round(canvas.width / sp.length);

canvasContext.clearRect(0, 0, canvas.width, canvas.height);

//スペクトラム描画

for(let i = 0; i < sp.length; i++) {

var color_val = Math.round((sp[i] / 255) * 360);

var hsv = [ color_val, 100 ,100];

var rgb = HSV_RGB(hsv);

var rgb_code = 'rgb('+rgb[0] +', '+rgb[1] +', '+rgb[2] +')';

canvasContext.fillStyle = rgb_code;

canvasContext.fillRect(barWidth * i, canvas.height, barWidth, -sp[i]);

}

音楽プログラミングアプリボタン判定

クリック判定、引数のj_array,fps_cntで
判定を行い、得点を加算しています。

//クリックの判定
function judge_click(j_array,fps_cnt) {


if(j_array[0] == 1){
	document.getElementById('b1').style.backgroundColor = 'rgb(255, 255, 225)';
	if(g_click_button1){
	
		if(fps_cnt < 150)
			document.getElementById('good1').innerHTML = 'Great!';
		else
			document.getElementById('good1').innerHTML = 'good!';
			
		g_total_point += 350 - fps_cnt;
		document.getElementById('total_point').innerHTML = g_total_point;
		j_array[0] = 0;
	}

}

if(j_array[1] == 1){
	document.getElementById('b2').style.backgroundColor = 'rgb(255, 255, 225)';
	if(g_click_button2){
		if(fps_cnt < 150)
			document.getElementById('good2').innerHTML = 'Great!';
		else
			document.getElementById('good2').innerHTML = 'good!';
		g_total_point += 350 - fps_cnt;
		document.getElementById('total_point').innerHTML = g_total_point;
	    j_array[1] = 0;
	}
}

if(j_array[2] == 1){
	document.getElementById('b3').style.backgroundColor = 'rgb(255, 255, 225)';
	if(g_click_button3){
		if(fps_cnt < 150)
			document.getElementById('good3').innerHTML = 'Great!';
		else
			document.getElementById('good3').innerHTML = 'good!';
		g_total_point += 350 - fps_cnt;
		document.getElementById('total_point').innerHTML = g_total_point;
	    j_array[2] = 0;
    }
}

}

//クリックの判定

function judge_click(j_array,fps_cnt) {

if(j_array[0] == 1){

document.getElementById('b1').style.backgroundColor = 'rgb(255, 255, 225)';

if(g_click_button1){

if(fps_cnt < 150)

document.getElementById('good1').innerHTML = 'Great!';

else

document.getElementById('good1').innerHTML = 'good!';

g_total_point += 350 - fps_cnt;

document.getElementById('total_point').innerHTML = g_total_point;

j_array[0] = 0;

}

if(j_array[1] == 1){

document.getElementById('b2').style.backgroundColor = 'rgb(255, 255, 225)';

if(g_click_button2){

if(fps_cnt < 150)

document.getElementById('good2').innerHTML = 'Great!';

else

document.getElementById('good2').innerHTML = 'good!';

g_total_point += 350 - fps_cnt;

document.getElementById('total_point').innerHTML = g_total_point;

j_array[1] = 0;

}

if(j_array[2] == 1){

document.getElementById('b3').style.backgroundColor = 'rgb(255, 255, 225)';

if(g_click_button3){

if(fps_cnt < 150)

document.getElementById('good3').innerHTML = 'Great!';

else

document.getElementById('good3').innerHTML = 'good!';

g_total_point += 350 - fps_cnt;

document.getElementById('total_point').innerHTML = g_total_point;

j_array[2] = 0;

}

音楽プログラミングアプリ　ボタン判定の配列

クリック判定　する、しないの配列を作る。
スペクトラム周波数により判定を作っています。
音楽ファイルによって
b1_judge,b2_judge,b3_judge
を調整しないと判定が出ないか、出続ける
ので音楽ファイルによって値を変更する必要がある。

ここを少し変更すると、予告バーの音符ファイルみたいなのを
作れるかと思います。

function judge_array(spectrum) {
 
 const b1_judge = 130;
 const b2_judge = 90;
 const b3_judge = 80;
 
 let b1_num = Math.round(spectrum.length / 3);
 let b2_num = b1_num * 2;
 let b1_total = 0;
 let b2_total = 0;
 let b3_total = 0;

 
  for(let i = 0; i < spectrum.length; i++) {
	  if(i < b1_num){
	  	b1_total += spectrum[i];
	  
	  }else if(i < b2_num){
	    b2_total += spectrum[i];
	  
	  }else{
	    b3_total += spectrum[i];
	  
	  }
 }
 
 //押すかどうかの値の判定を作る 
 //どれぐらいのスペクトラムの量か（難易度変更などで）
 //曲によって調整する
 let ret_judge = [0,0,0];
 if(Math.round(b1_total / b1_num) > b1_judge)ret_judge[0] =1;
 if(Math.round(b2_total / b1_num) > b2_judge)ret_judge[1] =1;
 if(Math.round(b3_total / b1_num) > b3_judge)ret_judge[2] =1;


// console.log(b1 +',' + b2 +','+  b3);
 return ret_judge;

}

function judge_array(spectrum) {

const b1_judge = 130;

const b2_judge = 90;

const b3_judge = 80;

let b1_num = Math.round(spectrum.length / 3);

let b2_num = b1_num * 2;

let b1_total = 0;

let b2_total = 0;

let b3_total = 0;

for(let i = 0; i < spectrum.length; i++) {

if(i < b1_num){

b1_total += spectrum[i];

}else if(i < b2_num){

b2_total += spectrum[i];

}else{

b3_total += spectrum[i];

}

//押すかどうかの値の判定を作る

//どれぐらいのスペクトラムの量か（難易度変更などで）

//曲によって調整する

let ret_judge = [0,0,0];

if(Math.round(b1_total / b1_num) > b1_judge)ret_judge[0] =1;

if(Math.round(b2_total / b1_num) > b2_judge)ret_judge[1] =1;

if(Math.round(b3_total / b1_num) > b3_judge)ret_judge[2] =1;

// console.log(b1 +',' + b2 +','+ b3);

return ret_judge;

}

音楽プログラミングアプリファイルをdataUALに変換

音楽ファイルをdataURLに変換
音楽ファイルが読み込まれたときに呼ぶ関数。

async function ConvertAudioFile_dataURL(file) {
  const reader = new FileReader();
  const loadPromise = new Promise((resolve, reject) => {
    reader.onload = (event) => {
      resolve(event.target.result);
    };
  });

  reader.readAsDataURL(file);
  return loadPromise;
}

async function ConvertAudioFile_dataURL(file) {

const reader = new FileReader();

const loadPromise = new Promise((resolve, reject) => {

reader.onload = (event) => {

resolve(event.target.result);

};

});

reader.readAsDataURL(file);

return loadPromise;

}

音楽プログラミングアプリ Web Audio API初期化メイン処理

以下はメインの処理、音楽ファイルが、ファイルコントロールに読み込まれた時のイベントです。

Web Audio API用初期化処理
音楽ゲーム用の変数の初期化処理
音楽ファイルからデータを取り出す

などの各初期化処理を1度だけ行う。

setIntervalに書かれている処理がメインで動く部分
スペクトラム描画とゲームのボタン判定処理と
なります。

//ファイルが読み込まれた
const fileInput = document.querySelector('#file-input');
let audio = null;
let audioSource = null;
let intervalId  = null;


//ファイルが変わった時のイベント
fileInput.addEventListener('change', async (event) => {
  // Web Audio API用初期化処理
  const audioContext = new AudioContext();
  const analyzerNode = audioContext.createAnalyser();

  if(audio) {
    audio.pause();
    audio.src = '';
  }
  if(audioSource) {
    audioSource.disconnect();
  }

  if(intervalId) {
    clearInterval(intervalId);
  }
  analyzerNode.fftSize = 128;
  
 
 //ゲーム用の初期化処理
 let fps_cnt = 0;
 let j_array = [0,0,0];
 g_total_point = 0;
 document.getElementById('total_point').innerHTML = g_total_point;
 g_click_button1 =false;
 g_click_button2 =false;
 g_click_button3 =false;




  const file = fileInput.files[0];
  if(file) {
    //音楽ファイルからデータを取り出す    
    //スペクトラム用のUint8Array
    const spectrumArray = new Uint8Array(analyzerNode.frequencyBinCount);    
    audio = new Audio();
    audio.src = await ConvertAudioFile_dataURL(file);

    audioSource = audioContext.createMediaElementSource(audio);
    audioSource.connect(analyzerNode);
    analyzerNode.connect(audioContext.destination);




    //ここからがメインで動く部分 setIntervalで等間隔に
    intervalId = setInterval((event) => {
      // 周波数データを取り出す
      analyzerNode.getByteFrequencyData(spectrumArray);

      //スペクトラム描画
      RenderSpectrum(spectrumArray);
      
      //間タップ判定を取る
	  if(fps_cnt > 50){
	  	judge_click(j_array,fps_cnt);
	  }


	   fps_cnt++
       if(fps_cnt == 300){
       		fps_cnt =0;
       		j_array =  judge_array(spectrumArray);
       		document.getElementById('b1').style.backgroundColor = 'rgb(125, 125, 125)';
			document.getElementById('b2').style.backgroundColor = 'rgb(125, 125, 125)';
			document.getElementById('b3').style.backgroundColor = 'rgb(125, 125, 125)';
			document.getElementById('good1').innerHTML = '';
			document.getElementById('good2').innerHTML = '';
			document.getElementById('good3').innerHTML = '';
			g_click_button1 =false;
			g_click_button2 =false;
			g_click_button3 =false;
       	}

    }, 1/60);
    
 audio.addEventListener('ended', (event) => {
//    console.log('曲の終了');
	clearInterval(intervalId);
 });
 
    // 再生開始
    audio.play();
  }
});

//ファイルが読み込まれた

const fileInput = document.querySelector('#file-input');

let audio = null;

let audioSource = null;

let intervalId = null;

//ファイルが変わった時のイベント

fileInput.addEventListener('change', async (event) => {

// Web Audio API用初期化処理

const audioContext = new AudioContext();

const analyzerNode = audioContext.createAnalyser();

if(audio) {

audio.pause();

audio.src = '';

}

if(audioSource) {

audioSource.disconnect();

}

if(intervalId) {

clearInterval(intervalId);

}

analyzerNode.fftSize = 128;

//ゲーム用の初期化処理

let fps_cnt = 0;

let j_array = [0,0,0];

g_total_point = 0;

document.getElementById('total_point').innerHTML = g_total_point;

g_click_button1 =false;

g_click_button2 =false;

g_click_button3 =false;

const file = fileInput.files[0];

if(file) {

//音楽ファイルからデータを取り出す

//スペクトラム用のUint8Array

const spectrumArray = new Uint8Array(analyzerNode.frequencyBinCount);

audio = new Audio();

audio.src = await ConvertAudioFile_dataURL(file);

audioSource = audioContext.createMediaElementSource(audio);

audioSource.connect(analyzerNode);

analyzerNode.connect(audioContext.destination);

//ここからがメインで動く部分 setIntervalで等間隔に

intervalId = setInterval((event) => {

// 周波数データを取り出す

analyzerNode.getByteFrequencyData(spectrumArray);

//スペクトラム描画

RenderSpectrum(spectrumArray);

//間タップ判定を取る

if(fps_cnt > 50){

judge_click(j_array,fps_cnt);

}

fps_cnt++

if(fps_cnt == 300){

fps_cnt =0;

j_array = judge_array(spectrumArray);

document.getElementById('b1').style.backgroundColor = 'rgb(125, 125, 125)';

document.getElementById('b2').style.backgroundColor = 'rgb(125, 125, 125)';

document.getElementById('b3').style.backgroundColor = 'rgb(125, 125, 125)';

document.getElementById('good1').innerHTML = '';

document.getElementById('good2').innerHTML = '';

document.getElementById('good3').innerHTML = '';

g_click_button1 =false;

g_click_button2 =false;

g_click_button3 =false;

}

}, 1/60);

audio.addEventListener('ended', (event) => {

// console.log('曲の終了');

clearInterval(intervalId);

});

// 再生開始

audio.play();

}

});

音楽プログラミングアプリ全コード

上記したコードをすべてまとめたものです。
htmlにコピーすると、そのまま動きます。
（テスト動作、スマホだけCrayon Syntax Highlighterとの絡みで
変な表示になるので無しです）

<style>
    body {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    #display {
      display: block;
      margin: 1em 0;
    }
</style>


<canvas id="display"></canvas>
<label id="open-file">
<input id="file-input" type="file"><br />
</label>


<br />
<br />
<button id="b1" onclick="button1_click()" style = "background-color :rgb(125, 125, 125) ; font-size:15px; width :100px; height :38px;  -moz-border-radius: 31px; -webkit-border-radius: 31px; border-radius: 31px;  box-shadow:0px 0px 4px 0px #666;  -moz-box-shadow:0px 0px 4px 0px #666; -webkit-box-shadow:0px 0px 4px 0px #666; text-shadow:0px 0px 0px  #000; "  type="submit"  >♬</button>
<button id="b2" onclick="button2_click()" style = "background-color :rgb(125, 125, 125) ; font-size:15px; width :100px; height :38px;  -moz-border-radius: 31px; -webkit-border-radius: 31px; border-radius: 31px;  box-shadow:0px 0px 4px 0px #666;  -moz-box-shadow:0px 0px 4px 0px #666; -webkit-box-shadow:0px 0px 4px 0px #666; text-shadow:0px 0px 0px  #000; "  type="submit"  >♬</button>
<button id="b3" onclick="button3_click()" style = "background-color :rgb(125, 125, 125) ; font-size:15px; width :100px; height :38px;  -moz-border-radius: 31px; -webkit-border-radius: 31px; border-radius: 31px;  box-shadow:0px 0px 4px 0px #666;  -moz-box-shadow:0px 0px 4px 0px #666; -webkit-box-shadow:0px 0px 4px 0px #666; text-shadow:0px 0px 0px  #000; "  type="submit"  >♬</button>
<br />
<div id="good1"></div>
<div id="good2"></div>
<div id="good3"></div>
<br />
<br />
POINT:<div id="total_point">0</div>






<script type="text/javascript">


const canvas = document.querySelector('#display');
const canvasContext = canvas.getContext('2d');
canvas.width = 500;
canvas.height = 255;
var g_total_point = 0;
var g_click_button1 =false;
var g_click_button2 =false;
var g_click_button3 =false;
function button1_click(){g_click_button1=true;}
function button2_click(){g_click_button2=true;}
function button3_click(){g_click_button3=true;}





//HSVをRGBに変換
function HSV_RGB(hsv){
	let h = hsv[0];
	let s = hsv[1];
	let v = hsv[2];
	
	
   let max = v;
   let min = max - ((s / 255) * max);
   let rgb = [0,0,0]; 
   
   
   if (h == 360){
     h = 0;
   }
   
   s = s / 100;   
   v = v / 100;   
   
   
   if (s == 0){
     rgb[0] = v * 255;
     rgb[1] = v * 255;
     rgb[2] = v * 255;
     return rgb;
   } 

   let dh = Math.floor(h / 60);
   let p = v * (1 - s);
   let q = v * (1 - s * (h / 60 - dh));
   let t = v * (1 - s * (1 - (h / 60 - dh)));
   
   switch (dh){
    case 0 : rgb[0] = v; rgb[1] = t; rgb[2] = p;  break;
    case 1 : rgb[0] = q; rgb[1] = v; rgb[2] = p;  break;
    case 2 : rgb[0] = p; rgb[1] = v; rgb[2] = t;  break;
    case 3 : rgb[0] = p; rgb[1] = q; rgb[2] = v;  break;
    case 4 : rgb[0] = t; rgb[1] = p; rgb[2] = v;  break;
    case 5 : rgb[0] = v; rgb[1] = p; rgb[2] = q;  break;
   }   
   
   rgb[0] =  Math.round(rgb[0] * 255);
   rgb[1] =  Math.round(rgb[1] * 255);
   rgb[2] =  Math.round(rgb[2] * 255);
   return rgb; 
 } 





//canvasにスペクトラムバーを描画する HSVで色分けしている
function RenderSpectrum(sp) {

  const barWidth = Math.round(canvas.width / sp.length);
  canvasContext.clearRect(0, 0, canvas.width, canvas.height); 

  //スペクトラム描画
  for(let i = 0; i < sp.length; i++) {
	    var color_val = Math.round((sp[i] / 255) * 360);
	    var hsv = [ color_val, 100 ,100]; 
		var rgb = HSV_RGB(hsv);
		var rgb_code = 'rgb('+rgb[0] +', '+rgb[1] +', '+rgb[2] +')';
		canvasContext.fillStyle = rgb_code;
	    canvasContext.fillRect(barWidth * i, canvas.height, barWidth, -sp[i]);
  }
  
}



//クリックの判定
function judge_click(j_array,fps_cnt) {


if(j_array[0] == 1){
	document.getElementById('b1').style.backgroundColor = 'rgb(255, 255, 225)';
	if(g_click_button1){
	
		if(fps_cnt < 150)
			document.getElementById('good1').innerHTML = 'Great!';
		else
			document.getElementById('good1').innerHTML = 'good!';
			
		g_total_point += 350 - fps_cnt;
		document.getElementById('total_point').innerHTML = g_total_point;
		j_array[0] = 0;
	}

}

if(j_array[1] == 1){
	document.getElementById('b2').style.backgroundColor = 'rgb(255, 255, 225)';
	if(g_click_button2){
		if(fps_cnt < 150)
			document.getElementById('good2').innerHTML = 'Great!';
		else
			document.getElementById('good2').innerHTML = 'good!';
		g_total_point += 350 - fps_cnt;
		document.getElementById('total_point').innerHTML = g_total_point;
	    j_array[1] = 0;
	}
}

if(j_array[2] == 1){
	document.getElementById('b3').style.backgroundColor = 'rgb(255, 255, 225)';
	if(g_click_button3){
		if(fps_cnt < 150)
			document.getElementById('good3').innerHTML = 'Great!';
		else
			document.getElementById('good3').innerHTML = 'good!';
		g_total_point += 350 - fps_cnt;
		document.getElementById('total_point').innerHTML = g_total_point;
	    j_array[2] = 0;
    }
}

}


//クリック判定　する、しないの配列を作る
//曲によって
//b1_judge,b2_judge,b3_judge
//を調整しないと判定が出ないか、出続ける。

function judge_array(spectrum) {
 
 const b1_judge = 130;
 const b2_judge = 90;
 const b3_judge = 80;
 
 let b1_num = Math.round(spectrum.length / 3);
 let b2_num = b1_num * 2;
 let b1_total = 0;
 let b2_total = 0;
 let b3_total = 0;

 
  for(let i = 0; i < spectrum.length; i++) {
	  if(i < b1_num){
	  	b1_total += spectrum[i];
	  
	  }else if(i < b2_num){
	    b2_total += spectrum[i];
	  
	  }else{
	    b3_total += spectrum[i];
	  
	  }
 }
 
 //押すかどうかの値の判定を作る 
 //どれぐらいのスペクトラムの量か（難易度変更などで）
 //曲によって調整する
 let ret_judge = [0,0,0];
 if(Math.round(b1_total / b1_num) > b1_judge)ret_judge[0] =1;
 if(Math.round(b2_total / b1_num) > b2_judge)ret_judge[1] =1;
 if(Math.round(b3_total / b1_num) > b3_judge)ret_judge[2] =1;


// console.log(b1 +',' + b2 +','+  b3);
 return ret_judge;

}




// 音楽ファイルをdataURLに変換
async function ConvertAudioFile_dataURL(file) {
  const reader = new FileReader();
  const loadPromise = new Promise((resolve, reject) => {
    reader.onload = (event) => {
      resolve(event.target.result);
    };
  });

  reader.readAsDataURL(file);
  return loadPromise;
}




//ファイルが読み込まれた
const fileInput = document.querySelector('#file-input');
let audio = null;
let audioSource = null;
let intervalId  = null;


//ファイルが変わった時のイベント
fileInput.addEventListener('change', async (event) => {
  // Web Audio API用初期化処理
  const audioContext = new AudioContext();
  const analyzerNode = audioContext.createAnalyser();

  if(audio) {
    audio.pause();
    audio.src = '';
  }
  if(audioSource) {
    audioSource.disconnect();
  }

  if(intervalId) {
    clearInterval(intervalId);
  }
  analyzerNode.fftSize = 128;
  
 
 //ゲーム用の初期化処理
 let fps_cnt = 0;
 let j_array = [0,0,0];
 g_total_point = 0;
 document.getElementById('total_point').innerHTML = g_total_point;
 g_click_button1 =false;
 g_click_button2 =false;
 g_click_button3 =false;




  const file = fileInput.files[0];
  if(file) {
    //音楽ファイルからデータを取り出す    
    //スペクトラム用のUint8Array
    const spectrumArray = new Uint8Array(analyzerNode.frequencyBinCount);    
    audio = new Audio();
    audio.src = await ConvertAudioFile_dataURL(file);

    audioSource = audioContext.createMediaElementSource(audio);
    audioSource.connect(analyzerNode);
    analyzerNode.connect(audioContext.destination);




    //ここからがメインで動く部分 setIntervalで等間隔に
    intervalId = setInterval((event) => {
      // 周波数データを取り出す
      analyzerNode.getByteFrequencyData(spectrumArray);

      //スペクトラム描画
      RenderSpectrum(spectrumArray);
      
      //間タップ判定を取る
	  if(fps_cnt > 50){
	  	judge_click(j_array,fps_cnt);
	  }


	   fps_cnt++
       if(fps_cnt == 300){
       		fps_cnt =0;
       		j_array =  judge_array(spectrumArray);
       		document.getElementById('b1').style.backgroundColor = 'rgb(125, 125, 125)';
			document.getElementById('b2').style.backgroundColor = 'rgb(125, 125, 125)';
			document.getElementById('b3').style.backgroundColor = 'rgb(125, 125, 125)';
			document.getElementById('good1').innerHTML = '';
			document.getElementById('good2').innerHTML = '';
			document.getElementById('good3').innerHTML = '';
			g_click_button1 =false;
			g_click_button2 =false;
			g_click_button3 =false;
       	}

    }, 1/60);
    
 audio.addEventListener('ended', (event) => {
//    console.log('曲の終了');
	clearInterval(intervalId);
 });
 
    // 再生開始
    audio.play();
  }
});

</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

<style>

body {

display: flex;

flex-direction: column;

align-items: center;

}

#display {

display: block;

margin: 1em 0;

}

</style>

</label>

<br />

<br />

POINT:<div id="total_point">0</div>

const canvas = document.querySelector('#display');

const canvasContext = canvas.getContext('2d');

canvas.width = 500;

canvas.height = 255;

var g_total_point = 0;

var g_click_button1 =false;

var g_click_button2 =false;

var g_click_button3 =false;

function button1_click(){g_click_button1=true;}

function button2_click(){g_click_button2=true;}

function button3_click(){g_click_button3=true;}

//HSVをRGBに変換

function HSV_RGB(hsv){

let h = hsv[0];

let s = hsv[1];

let v = hsv[2];

let max = v;

let min = max - ((s / 255) * max);

let rgb = [0,0,0];

if (h == 360){

h = 0;

}

s = s / 100;

v = v / 100;

if (s == 0){

rgb[0] = v * 255;

rgb[1] = v * 255;

rgb[2] = v * 255;

return rgb;

}

let dh = Math.floor(h / 60);

let p = v * (1 - s);

let q = v * (1 - s * (h / 60 - dh));

let t = v * (1 - s * (1 - (h / 60 - dh)));

switch (dh){

case 0 : rgb[0] = v; rgb[1] = t; rgb[2] = p; break;

case 1 : rgb[0] = q; rgb[1] = v; rgb[2] = p; break;

case 2 : rgb[0] = p; rgb[1] = v; rgb[2] = t; break;

case 3 : rgb[0] = p; rgb[1] = q; rgb[2] = v; break;

case 4 : rgb[0] = t; rgb[1] = p; rgb[2] = v; break;

case 5 : rgb[0] = v; rgb[1] = p; rgb[2] = q; break;

}

rgb[0] = Math.round(rgb[0] * 255);

rgb[1] = Math.round(rgb[1] * 255);

rgb[2] = Math.round(rgb[2] * 255);

return rgb;

}

//canvasにスペクトラムバーを描画する HSVで色分けしている

function RenderSpectrum(sp) {

const barWidth = Math.round(canvas.width / sp.length);

canvasContext.clearRect(0, 0, canvas.width, canvas.height);

//スペクトラム描画

for(let i = 0; i < sp.length; i++) {

var color_val = Math.round((sp[i] / 255) * 360);

var hsv = [ color_val, 100 ,100];

var rgb = HSV_RGB(hsv);

var rgb_code = 'rgb('+rgb[0] +', '+rgb[1] +', '+rgb[2] +')';

canvasContext.fillStyle = rgb_code;

canvasContext.fillRect(barWidth * i, canvas.height, barWidth, -sp[i]);

}

//クリックの判定

function judge_click(j_array,fps_cnt) {

if(j_array[0] == 1){

document.getElementById('b1').style.backgroundColor = 'rgb(255, 255, 225)';

if(g_click_button1){

if(fps_cnt < 150)

document.getElementById('good1').innerHTML = 'Great!';

else

document.getElementById('good1').innerHTML = 'good!';

g_total_point += 350 - fps_cnt;

document.getElementById('total_point').innerHTML = g_total_point;

j_array[0] = 0;

}

if(j_array[1] == 1){

document.getElementById('b2').style.backgroundColor = 'rgb(255, 255, 225)';

if(g_click_button2){

if(fps_cnt < 150)

document.getElementById('good2').innerHTML = 'Great!';

else

document.getElementById('good2').innerHTML = 'good!';

g_total_point += 350 - fps_cnt;

document.getElementById('total_point').innerHTML = g_total_point;

j_array[1] = 0;

}

if(j_array[2] == 1){

document.getElementById('b3').style.backgroundColor = 'rgb(255, 255, 225)';

if(g_click_button3){

if(fps_cnt < 150)

document.getElementById('good3').innerHTML = 'Great!';

else

document.getElementById('good3').innerHTML = 'good!';

g_total_point += 350 - fps_cnt;

document.getElementById('total_point').innerHTML = g_total_point;

j_array[2] = 0;

}

//クリック判定　する、しないの配列を作る

//曲によって

//b1_judge,b2_judge,b3_judge

//を調整しないと判定が出ないか、出続ける。

function judge_array(spectrum) {

const b1_judge = 130;

const b2_judge = 90;

const b3_judge = 80;

let b1_num = Math.round(spectrum.length / 3);

let b2_num = b1_num * 2;

let b1_total = 0;

let b2_total = 0;

let b3_total = 0;

for(let i = 0; i < spectrum.length; i++) {

if(i < b1_num){

b1_total += spectrum[i];

}else if(i < b2_num){

b2_total += spectrum[i];

}else{

b3_total += spectrum[i];

}

//押すかどうかの値の判定を作る

//どれぐらいのスペクトラムの量か（難易度変更などで）

//曲によって調整する

let ret_judge = [0,0,0];

if(Math.round(b1_total / b1_num) > b1_judge)ret_judge[0] =1;

if(Math.round(b2_total / b1_num) > b2_judge)ret_judge[1] =1;

if(Math.round(b3_total / b1_num) > b3_judge)ret_judge[2] =1;

// console.log(b1 +',' + b2 +','+ b3);

return ret_judge;

}

// 音楽ファイルをdataURLに変換

async function ConvertAudioFile_dataURL(file) {

const reader = new FileReader();

const loadPromise = new Promise((resolve, reject) => {

reader.onload = (event) => {

resolve(event.target.result);

};

});

reader.readAsDataURL(file);

return loadPromise;

}

//ファイルが読み込まれた

const fileInput = document.querySelector('#file-input');

let audio = null;

let audioSource = null;

let intervalId = null;

//ファイルが変わった時のイベント

fileInput.addEventListener('change', async (event) => {

// Web Audio API用初期化処理

const audioContext = new AudioContext();

const analyzerNode = audioContext.createAnalyser();

if(audio) {

audio.pause();

audio.src = '';

}

if(audioSource) {

audioSource.disconnect();

}

if(intervalId) {

clearInterval(intervalId);

}

analyzerNode.fftSize = 128;

//ゲーム用の初期化処理

let fps_cnt = 0;

let j_array = [0,0,0];

g_total_point = 0;

document.getElementById('total_point').innerHTML = g_total_point;

g_click_button1 =false;

g_click_button2 =false;

g_click_button3 =false;

const file = fileInput.files[0];

if(file) {

//音楽ファイルからデータを取り出す

//スペクトラム用のUint8Array

const spectrumArray = new Uint8Array(analyzerNode.frequencyBinCount);

audio = new Audio();

audio.src = await ConvertAudioFile_dataURL(file);

audioSource = audioContext.createMediaElementSource(audio);

audioSource.connect(analyzerNode);

analyzerNode.connect(audioContext.destination);

//ここからがメインで動く部分 setIntervalで等間隔に

intervalId = setInterval((event) => {

// 周波数データを取り出す

analyzerNode.getByteFrequencyData(spectrumArray);

//スペクトラム描画

RenderSpectrum(spectrumArray);

//間タップ判定を取る

if(fps_cnt > 50){

judge_click(j_array,fps_cnt);

}

fps_cnt++

if(fps_cnt == 300){

fps_cnt =0;

j_array = judge_array(spectrumArray);

document.getElementById('b1').style.backgroundColor = 'rgb(125, 125, 125)';

document.getElementById('b2').style.backgroundColor = 'rgb(125, 125, 125)';

document.getElementById('b3').style.backgroundColor = 'rgb(125, 125, 125)';

document.getElementById('good1').innerHTML = '';

document.getElementById('good2').innerHTML = '';

document.getElementById('good3').innerHTML = '';

g_click_button1 =false;

g_click_button2 =false;

g_click_button3 =false;

}

}, 1/60);

audio.addEventListener('ended', (event) => {

// console.log('曲の終了');

clearInterval(intervalId);

});

// 再生開始

audio.play();

}

});

</script>

試作してみた所は、音ゲーは予告バーがないともぐらたたき
みたいになるということが分かりました。
記事が伸びてくるようでしたら予告バーまで追加しておきます。

音楽 プログラミング アプリ( javascript,読み込み,再生,ゲーム)

音楽 プログラミング アプリ html部分

音楽 プログラミング アプリ 変数初期化

音楽 プログラミング アプリ スペクトラム周波数色分け表示

音楽 プログラミング アプリ ボタン判定

音楽 プログラミング アプリ ボタン判定の配列

音楽 プログラミング アプリ ファイルをdataUALに変換

音楽 プログラミング アプリ Web Audio API初期化 メイン処理

音楽 プログラミング アプリ 全コード

音楽 プログラミング アプリ 動作テスト

音楽プログラミングアプリ( javascript,読み込み,再生,ゲーム)

音楽プログラミングアプリ html部分

音楽プログラミングアプリ変数初期化

音楽プログラミングアプリスペクトラム周波数色分け表示

音楽プログラミングアプリボタン判定

音楽プログラミングアプリ　ボタン判定の配列

音楽プログラミングアプリファイルをdataUALに変換

音楽プログラミングアプリ Web Audio API初期化メイン処理

音楽プログラミングアプリ全コード

音楽プログラミングアプリ動作テスト