practice

　　　　

<html>

<meta charset=utf-8">
<button id="ぼたん"type="button"style="cursor:pointer;">Reset</button> 
<button onclick=""style="cursor:pointer;"id="始まり">Sound ▶︎</button> 
<button onclick=""style="cursor:pointer;"id="停止">|| Pause ||</button>
<br><hr><br>
<div style="display:flex;"><div>周波数：</div>
<div id="音程_いんたばる">220Hz</div>
</div>
<input type="range"value="220"max="10000"min="50"step="1"id="ぼたん_へるつ"style="max-width:100%;width:400px;">
<br>
<div style="display:flex;"><div>音量：</div>
<div id="音量_ぼりゅーむ">0</div>
</div>
<input type="range"value="0"max="100"min="0"step="1"id="ぼたん_ぼりゅーむ"style="max-width:100%;width:400px;">
<br><hr><br>
<button onclick="設定_へるつ(261)"style="cursor:pointer;">ド</button>
<button onclick="設定_へるつ(294)"style="cursor:pointer;">レ</button>
<button onclick="設定_へるつ(330)"style="cursor:pointer;">ミ</button>
<button onclick="設定_へるつ(349)"style="cursor:pointer;">ファ</button>
<button onclick="設定_へるつ(392)"style="cursor:pointer;">ソ</button>
<button onclick="設定_へるつ(440)"style="cursor:pointer;">ラ</button>
<button onclick="設定_へるつ(494)"style="cursor:pointer;">シ</button>
<button onclick="設定_へるつ(522)"style="cursor:pointer;">ド</button>

<script>
音=null,波形=null,音量=null,ぼたん_ぼりゅーむ=0;
window.addEventListener("DOMContentLoaded",function(){document.getElementById("ぼたん_へるつ")
.addEventListener("input",function(){document.getElementById("音程_いんたばる")
.innerHTML=document.getElementById("ぼたん_へるつ").value+"Hz";
if(波形!=null){ぼたん_へるつ=document.getElementById("ぼたん_へるつ").value;
波形.frequency.setValueAtTime(ぼたん_へるつ,音.currentTime);}});
document.getElementById("ぼたん_ぼりゅーむ")
.addEventListener("input",function(){document.getElementById("音量_ぼりゅーむ")
.innerHTML=document.getElementById("ぼたん_ぼりゅーむ").value;
ぼたん_ぼりゅーむ=document.getElementById("ぼたん_ぼりゅーむ").value;
if(音量!=null){音量.gain.value=ぼたん_ぼりゅーむ/100;}});
document.getElementById("始まり").addEventListener("click",function()
{if(音==null){音=new(window.AudioContext || window.webkitAudioContext)();}
if(音量==null){音量=音.createGain();
音量.gain.value=ぼたん_ぼりゅーむ/100;}
if(波形==null){波形=音.createOscillator();
波形.type="sine";
ぼたん_へるつ=document.getElementById("ぼたん_へるつ").value;
波形.frequency.setValueAtTime(ぼたん_へるつ,音.currentTime);
波形.connect(音量).connect(音.destination);
波形.start();}});
document.getElementById("停止").addEventListener("click",function(){if(波形!==null){波形.stop();
波形=null;}});});
function 設定_へるつ(ぼたん_へるつ){document.getElementById("ぼたん_へるつ").value=ぼたん_へるつ;
document.getElementById('音程_いんたばる').innerHTML=ぼたん_へるつ+"Hz";
if(波形!=null){ぼたん_へるつ=document.getElementById("ぼたん_へるつ").value;
波形.frequency.setValueAtTime(ぼたん_へるつ,音.currentTime);}}
document.querySelector("#ぼたん").addEventListener("click",()=>{location.reload();},false);
</script>

</html>