practice

　　　　

<html>

<meta charset="utf-8">
<style>
.ピアノ{overflow:hidden;
overflow-x:auto;}
.ホワイト{fill:#ffffff;
stroke:#000000;
stroke-width:1px;
stroke-linecap:butt;
stroke-linejoin:miter;}
.ホワイト:hover{fill:#deefff;}
.ブラック{fill:#000000;
stroke:#000000;
stroke-width:1px;
stroke-linecap:butt;
stroke-linejoin:miter;}
.ブラック:hover{fill:#456789;}
.ノート{fill:#456879;
font-size:40px;
font-weight:bold;
pointer-events:none;
user-select:none;}
</style>

<div class="ピアノ">
<svg width="840"height="200"viewBox="0 0 4000 1000">
<g>
<path d="M50,25v395h80v-170h-30v-225Z"
class="ホワイト"id="04_piano_mf_C_0"/>
<path d="M100,25v225h50v-225Z"
class="ブラック"id="05_piano_mf_C_sharp_0"/>
<path d="M150,25v225h-20v170h80v-225h-20v-170Z"
class="ホワイト"id="06_piano_mf_D_0"/>
<path d="M190,25v225h50v-225Z"
class="ブラック"id="07_piano_mf_D_sharp_0"/>
<path d="M240,25v225h-30v170h80v-395Z"
class="ホワイト"id="08_piano_mf_E_0"/>
<path d="M290,25v395h80v-170h-30v-225Z"
class="ホワイト"id="09_piano_mf_F_0"/>
<path d="M340,25v225h50v-225Z"
class="ブラック"id="10_piano_mf_G_flat_0"/>
<path d="M390,25v225h-20v170h80v-170h-25v-225Z"
class="ホワイト"id="11_piano_mf_G_0"/>
<path d="M425,25v225h50v-225Z"
class="ブラック"id="12_piano_mf_A_flat_0"/>
<path d="M475,25v225h-25v170h80v-170h-20v-225Z"
class="ホワイト"id="13_piano_mf_A_0"/>
<path d="M510,25v225h50v-225Z"
class="ブラック"id="14_piano_mf_B_flat_0"/>
<path d="M560,25v225h-30v170h80v-395Z"
class="ホワイト"id="15_piano_mf_B_0"/>
<text x="68"y="400"class="ノート">C1</text>
<path d="M610,25v395h80v-170h-30v-225Z"
class="ホワイト"id="16_piano_mf_C_1"/>
<path d="M660,25v225h50v-225Z"
class="ブラック"id="17_piano_mf_C_sharp_1"/>
<path d="M710,25v225h-20v170h80v-225h-20v-170Z"
class="ホワイト"id="18_piano_mf_D_1"/>
<path d="M750,25v225h50v-225Z"
class="ブラック"id="19_piano_mf_D_sharp_1"/>
<path d="M800,25v225h-30v170h80v-395Z"
class="ホワイト"id="20_piano_mf_E_1"/>
<path d="M850,25v395h80v-170h-30v-225Z"
class="ホワイト"id="21_piano_mf_F_1"/>
<path d="M900,25v225h50v-225Z"
class="ブラック"id="22_piano_mf_G_flat_1"/>
<path d="M950,25v225h-20v170h80v-170h-25v-225Z"
class="ホワイト"id="23_piano_mf_G_1"/>
<path d="M985,25v225h50v-225Z"
class="ブラック"id="24_piano_mf_A_flat_1"/>
<path d="M1035,25v225h-25v170h80v-170h-20v-225Z"
class="ホワイト"id="25_piano_mf_A_1"/>
<path d="M1070,25v225h50v-225Z"
class="ブラック"id="26_piano_mf_B_flat_1"/>
<path d="M1120,25v225h-30v170h80v-395Z"
class="ホワイト"id="27_piano_mf_B_1"/>
<text x="628"y="400"class="ノート">C2</text>
<path d="M1170,25v395h80v-170h-30v-225Z"
class="ホワイト"id="28_piano_mf_C_2"/>
<path d="M1220,25v225h50v-225Z"
class="ブラック"id="29_piano_mf_C_sharp_2"/>
<path d="M1270,25v225h-20v170h80v-225h-20v-170Z"
class="ホワイト"id="30_piano_mf_D_2"/>
<path d="M1310,25v225h50v-225Z"
class="ブラック"id="31_piano_mf_D_sharp_2"/>
<path d="M1360,25v225h-30v170h80v-395Z"
class="ホワイト"id="32_piano_mf_E_2"/>
<path d="M1410,25v395h80v-170h-30v-225Z"
class="ホワイト"id="33_piano_mf_F_2"/>
<path d="M1460,25v225h50v-225Z"
class="ブラック"id="34_piano_mf_G_flat_2"/>
<path d="M1510,25v225h-20v170h80v-170h-25v-225Z"
class="ホワイト"id="35_piano_mf_G_2"/>
<path d="M1545,25v225h50v-225Z"
class="ブラック"id="36_piano_mf_A_flat_2"/>
<path d="M1595,25v225h-25v170h80v-170h-20v-225Z"
class="ホワイト"id="37_piano_mf_A_2"/>
<path d="M1630,25v225h50v-225Z"
class="ブラック"id="38_piano_mf_B_flat_2"/>
<path d="M1680,25v225h-30v170h80v-395Z"
class="ホワイト"id="39_piano_mf_B_2"/>
<text x="1188"y="400"class="ノート">C3</text>
<path d="M1730,25v395h80v-170h-30v-225Z"
class="ホワイト"id="40_piano_mf_C_3"/>
<path d="M1780,25v225h50v-225Z"
class="ブラック"id="41_piano_mf_C_sharp_3"/>
<path d="M1830,25v225h-20v170h80v-225h-20v-170Z"
class="ホワイト"id="42_piano_mf_D_3"/>
<path d="M1870,25v225h50v-225Z"
class="ブラック"id="43_piano_mf_D_sharp_3"/>
<path d="M1920,25v225h-30v170h80v-395Z"
class="ホワイト"id="44_piano_mf_E_3"/>
<path d="M1970,25v395h80v-170h-30v-225Z"
class="ホワイト"id="45_piano_mf_F_3"/>
<path d="M2020,25v225h50v-225Z"
class="ブラック"id="46_piano_mf_G_flat_3"/>
<path d="M2070,25v225h-20v170h80v-170h-25v-225Z"
class="ホワイト"id="47_piano_mf_G_3"/>
<path d="M2105,25v225h50v-225Z"
class="ブラック"id="48_piano_mf_A_flat_3"/>
<path d="M2155,25v225h-25v170h80v-170h-20v-225Z"
class="ホワイト"id="49_piano_mf_A_3"/>
<path d="M2190,25v225h50v-225Z"
class="ブラック"id="50_piano_mf_B_flat_3"/>
<path d="M2240,25v225h-30v170h80v-395Z"
class="ホワイト"id="51_piano_mf_B_3"/>
<text x="1748"y="400"class="ノート">C4</text>
<path d="M2290,25v395h80v-170h-30v-225Z"
class="ホワイト"id="52_piano_mf_C_4"/>
<path d="M2340,25v225h50v-225Z"
class="ブラック"id="53_piano_mf_C_sharp_4"/>
<path d="M2390,25v225h-20v170h80v-225h-20v-170Z"
class="ホワイト"id="54_piano_mf_D_4"/>
<path d="M2430,25v225h50v-225Z"
class="ブラック"id="55_piano_mf_D_sharp_4"/>
<path d="M2480,25v225h-30v170h80v-395Z"
class="ホワイト"id="56_piano_mf_E_4"/>
<path d="M2530,25v395h80v-170h-30v-225Z"
class="ホワイト"id="57_piano_mf_F_4"/>
<path d="M2580,25v225h50v-225Z"
class="ブラック"id="58_piano_mf_G_flat_4"/>
<path d="M2630,25v225h-20v170h80v-170h-25v-225Z"
class="ホワイト"id="59_piano_mf_G_4"/>
<path d="M2665,25v225h50v-225Z"
class="ブラック"id="60_piano_mf_A_flat_4"/>
<path d="M2715,25v225h-25v170h80v-170h-20v-225Z"
class="ホワイト"id="61_piano_mf_A_4"/>
<path d="M2750,25v225h50v-225Z"
class="ブラック"id="62_piano_mf_B_flat_4"/>
<path d="M2800,25v225h-30v170h80v-395Z"
class="ホワイト"id="63_piano_mf_B_4"/>
<text x="2308"y="400"class="ノート">C5</text>
<path d="M2850,25v395h80v-170h-30v-225Z"
class="ホワイト"id="64_piano_mf_C_5"/>
<path d="M2900,25v225h50v-225Z"
class="ブラック"id="65_piano_mf_C_sharp_5"/>
<path d="M2950,25v225h-20v170h80v-225h-20v-170Z"
class="ホワイト"id="66_piano_mf_D_5"/>
<path d="M2990,25v225h50v-225Z"
class="ブラック"id="67_piano_mf_D_sharp_5"/>
<path d="M3040,25v225h-30v170h80v-395Z"
class="ホワイト"id="68_piano_mf_E_5"/>
<path d="M3090,25v395h80v-170h-30v-225Z"
class="ホワイト"id="69_piano_mf_F_5"/>
<path d="M3140,25v225h50v-225Z"
class="ブラック"id="70_piano_mf_G_flat_5"/>
<path d="M3190,25v225h-20v170h80v-170h-25v-225Z"
class="ホワイト"id="71_piano_mf_G_5"/>
<path d="M3225,25v225h50v-225Z"
class="ブラック"id="72_piano_mf_A_flat_5"/>
<path d="M3275,25v225h-25v170h80v-170h-20v-225Z"
class="ホワイト"id="73_piano_mf_A_5"/>
<path d="M3310,25v225h50v-225Z"
class="ブラック"id="74_piano_mf_B_flat_5"/>
<path d="M3360,25v225h-30v170h80v-395Z"
class="ホワイト"id="75_piano_mf_B_5"/>
<text x="2868"y="400"class="ノート">C6</text>
<path d="M3410,25v395h80v-170h-30v-225Z"
class="ホワイト"id="76_piano_mf_C_6"/>
<path d="M3460,25v225h50v-225Z"
class="ブラック"id="77_piano_mf_C_sharp_6"/>
<path d="M3510,25v225h-20v170h80v-225h-20v-170Z"
class="ホワイト"id="78_piano_mf_D_6"/>
<path d="M3550,25v225h50v-225Z"
class="ブラック"id="79_piano_mf_D_sharp_6"/>
<path d="M3600,25v225h-30v170h80v-395Z"
class="ホワイト"id="80_piano_mf_E_6"/>
<path d="M3650,25v395h80v-170h-30v-225Z"
class="ホワイト"id="81_piano_mf_F_6"/>
<path d="M3700,25v225h50v-225Z"
class="ブラック"id="82_piano_mf_G_flat_6"/>
<path d="M3750,25v225h-20v170h80v-170h-25v-225Z"
class="ホワイト"id="83_piano_mf_G_6"/>
<path d="M3785,25v225h50v-225Z"
class="ブラック"id="84_piano_mf_A_flat_6"/>
<path d="M3835,25v225h-25v170h80v-170h-20v-225Z"
class="ホワイト"id="85_piano_mf_A_6"/>
<path d="M3870,25v225h50v-225Z"
class="ブラック"id="86_piano_mf_B_flat_6"/>
<path d="M3920,25v225h-30v170h80v-395Z"
class="ホワイト"id="87_piano_mf_B_6"/>
<text x="3428"y="400"class="ノート">C7</text>
<path d="M3970,25v395h80v-395Z"
class="ホワイト"id="88_piano_mf_C_7"/>
<text x="3988"y="400"class="ノート">C8</text>
</g>
</svg>
</div>

<script>
const 音=document.querySelectorAll('path');
for(let 愛=0,絵=音.length;絵>愛;愛++)
{const file=音[愛].getAttribute('id');
const src=`piano_88_mp3_folder/${file}.mp3`;
const audio=new Audio(src);
音[愛].addEventListener('mousedown',
()=>{audio.currentTime=0;audio.play();});}
</script>

</html>