practice

　　　　

<html lang="ja">
<meta charset="utf-8">

<style>.ラジオ{color:#ff8888;}</style>
<div>
<button id="すたーと">再生</button> <button onclick="りろーど()">ストップ</button>
</div>
<hr>
<main style="margin:40px;font-size:20px;">
<div style="margin-bottom:10px;">
<input type="checkbox"id="ちぇっく_1"value="MM=120.mp3"checked>
<label for="ちぇっく_1">MM=120.mp3</label>
</div>
<div class="ラジオ">
<input type="radio"name="速度_1"id="半分_1"style="">半分 
<input type="radio"name="速度_1"id="倍速_1">倍速 
<input type="radio"name="速度_1"id="三倍速_1">三倍速
</div>
</main>
<hr>

<main style="margin:40px;font-size:20px;">
<div style="margin-bottom:10px;">
<input type="checkbox"id="ちぇっく_2"value="MM=120.mp3"checked>
<label for="ちぇっく_2">MM=120.mp3</label>
</div>
<div class="ラジオ">
<input type="radio"name="速度_2"id="半分_2">半分 
<input type="radio"name="速度_2"id="倍速_2">倍速 
<input type="radio"name="速度_2"id="三倍速_2">三倍速
</div>
</main>
<hr>

<main style="margin:40px;font-size:20px;">
<div style="margin-bottom:10px;">
<input type="checkbox"id="ちぇっく_3"value="MM=120.mp3"checked>
<label for="ちぇっく_3">MM=120.mp3</label>
</div>
<div class="ラジオ">
<input type="radio"name="速度_3"id="半分_3">半分 
<input type="radio"name="速度_3"id="倍速_3">倍速 
<input type="radio"name="速度_3"id="三倍速_3">三倍速
</div>
</main>
<hr>

<main style="margin:40px;font-size:20px;">
<div style="margin-bottom:10px;">
<input type="checkbox"id="ちぇっく_4"value="MM=120.mp3"checked>
<label for="ちぇっく_4">MM=120.mp3</label>
</div>
<div class="ラジオ">
<input type="radio"name="速度_4"id="半分_4">半分 
<input type="radio"name="速度_4"id="倍速_4">倍速 
<input type="radio"name="速度_4"id="三倍速_4">三倍速
</div>
</main>
<hr>

<script>
window.AudioContext=window.AudioContext || window.webkitAudioContext;
同期=new AudioContext();
さうんど=[];
document.querySelector("#すたーと").addEventListener("click",()=>
{ちぇっく1=document.querySelector("#ちぇっく_1");
ちぇっく2=document.querySelector("#ちぇっく_2");
ちぇっく3=document.querySelector("#ちぇっく_3");
ちぇっく4=document.querySelector("#ちぇっく_4");
if(ちぇっく1.checked)
{演奏_1=new Audio("MM=120.mp3");
さうんど.push(演奏_1);
速度_1=document.querySelector('input[name="速度_1"]:checked');
れーと_1=速度_1?速度_1.id:null;
演奏_1.playbackRate=れーと_1==="半分_1"?0.5:れーと_1==="倍速_1"?2.0:れーと_1==="三倍速_1"?3.0:1.0;
演奏_1.play();}

if(ちぇっく2.checked)
{演奏_2=new Audio("MM=120.mp3");
さうんど.push(演奏_2);
速度_2=document.querySelector('input[name="速度_2"]:checked');
れーと_2=速度_2?速度_2.id:null;
演奏_2.playbackRate=れーと_2==="半分_2"?0.5:れーと_2==="倍速_2"?2.0:れーと_2==="三倍速_2"?3.0:1.0;
演奏_2.play();}

if(ちぇっく3.checked)
{演奏_3=new Audio("MM=120.mp3");
さうんど.push(演奏_3);
速度_3=document.querySelector('input[name="速度_3"]:checked');
れーと_3=速度_3?速度_3.id:null;
演奏_3.playbackRate=れーと_3==="半分_3"?0.5:れーと_3==="倍速_3"?2.0:れーと_3==="三倍速_3"?3.0:1.0;
演奏_3.play();}

if(ちぇっく4.checked)
{演奏_4=new Audio("MM=120.mp3");
さうんど.push(演奏_4);
速度_4=document.querySelector('input[name="速度_4"]:checked');
れーと_4=速度_4?速度_4.id:null;
演奏_4.playbackRate=れーと_4==="半分_4"?0.5:れーと_4==="倍速_4"?2.0:れーと_4==="三倍速_4"?3.0:1.0;
演奏_4.play();}});
function りろーど(){document.location.reload();}
</script>

</html>