practice

　　　　

<html>

<meta charset="utf-8">
<style>
canvas{position:absolute;
top:120px;
left:19px;
height:100px;
width:300px;
border:1px solid black;}
.入力_ボタン{position:absolute;
top:302px;
left:84px;
font-size:20px;
background-color:dimgray;
text-align:center;
color:white;
border:1px solid black;
transition:all 0.2s;
padding:8px;}
.入力_ボタン:hover,button:focus{background-color:silver;
cursor:pointer;}
.停止_ボタン{position:absolute;
top:302px;
left:180px;
font-size:20px;
background-color:gray;
text-align:center;
color:white;
border:1px solid black;
transition:all 0.2s;
padding:8px;}
.停止_ボタン:hover,button:focus{background-color:silver;
cursor:pointer;}
.サウンド_収録{position:absolute;
top:414px;
left:21px;
width:400px;
height:200px;
overflow:auto;}
.削除{background:purple;
color:white;
padding:8px 10px;
font-size:16px;
cursor:pointer;}
</style>

<canvas class="波形"></canvas>
<div id="コントロール">
<button class="入力_ボタン"> REC </button>
<button class="停止_ボタン">STOP</button>
</div>
<section class="サウンド_収録"></section>

<script>
const 入力_ボタン=document.querySelector(".入力_ボタン");
const 停止_ボタン=document.querySelector(".停止_ボタン");
const 収録=document.querySelector(".サウンド_収録");
const まいく入力_ボタン=document.querySelector(".波形");
停止_ボタン.disabled=true;
let 波形;
const まいく入力_ボタン_表示=まいく入力_ボタン.getContext("2d");
if(navigator.mediaDevices.getUserMedia){console.log("getUserMedia supported.");
const 振動音={audio:true};
let 変換=[];
let でーた=function(すとりーむ){const めでぃあ=new MediaRecorder(すとりーむ);
いめーじ(すとりーむ);
入力_ボタン.onclick=function(){めでぃあ.start();
console.log(めでぃあ.state);
console.log("録音 started");
入力_ボタン.style.background="red";
停止_ボタン.disabled=false;
入力_ボタン.disabled=true;}
停止_ボタン.onclick=function(){めでぃあ.stop();
console.log(めでぃあ.state);
console.log("録音 stopped");
入力_ボタン.style.background="";
入力_ボタン.style.color="";
停止_ボタン.disabled=true;
入力_ボタン.disabled=false;}
めでぃあ.onstop=function(e){console.log("data available after MediaRecorder.stop()called.");
const 名前=prompt('Enter a name for your sound clip?','ファイル名は?');
const 表示=document.createElement("article");
const 文字=document.createElement("p");
const audio=document.createElement("audio");
const 削除=document.createElement("button");
表示.classList.add("clip");
audio.setAttribute("controls","");
削除.textContent="Delete";
削除.className="削除";
if(名前===null){文字.textContent="ファイル名は?";}
else{文字.textContent=名前;}
表示.appendChild(audio);
表示.appendChild(文字);
表示.appendChild(削除);
収録.appendChild(表示);
audio.controls=true;
const めもり=new Blob(変換,{"type":"audio/ogg;codecs=opus"});
変換=[];
const 保存先=window.URL.createObjectURL(めもり);
audio.src=保存先;
console.log("録音 stopped");
削除.onclick=function(e){let evtTgt=e.target;
evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode);}
文字.onclick=function(){const existingName=文字.textContent;
const 曲名=prompt('Enter a new name for your sound clip?');
if(曲名 === null){文字.textContent=existingName;}
else{文字.textContent=曲名;}}}
めでぃあ.ondataavailable=function(e){変換.push(e.data);}}
let 失敗=function(err){console.log('The following error occured:'+err);}
navigator.mediaDevices.getUserMedia(振動音).then(でーた,失敗);}
else{console.log('getUserMedia not supported on your browser!');}
function いめーじ(すとりーむ){if(!波形){波形=new AudioContext();}
const 信号=波形.createMediaStreamSource(すとりーむ);
const 変換=波形.createAnalyser();
変換.fftSize=2048;
const ばっふぁー=変換.frequencyBinCount;
const 配列=new Uint8Array(ばっふぁー);
信号.connect(変換);
まいくろふぉん()
function まいくろふぉん(){const WIDTH=まいく入力_ボタン.width
const HEIGHT=まいく入力_ボタン.height;
requestAnimationFrame(まいくろふぉん);
変換.getByteTimeDomainData(配列);
まいく入力_ボタン_表示.fillStyle="rgb(0,0,0)";
まいく入力_ボタン_表示.fillRect(0,0,WIDTH,HEIGHT);
まいく入力_ボタン_表示.lineWidth=6;
まいく入力_ボタン_表示.strokeStyle="rgb(255,255,255)";
まいく入力_ボタン_表示.beginPath();
let れんじ=WIDTH*1.0/ばっふぁー;
let 絵=0;
for(let 愛=0;愛<ばっふぁー;愛++)
{let 部=配列[愛]/128.0;
let 和=部*HEIGHT/2;
if(愛===0){まいく入力_ボタン_表示.moveTo(絵,和);}
else{まいく入力_ボタン_表示.lineTo(絵,和);}
絵+=れんじ;}
まいく入力_ボタン_表示.lineTo(まいく入力_ボタン.width,まいく入力_ボタン.height/2);
まいく入力_ボタン_表示.stroke();}}
window.onresize=function(){まいく入力_ボタン.width=mainSection.offsetWidth;}
window.onresize();
</script>

</html>