โกโกวา
✨ SASITHORN SRIJUN
<html> <head> <title>Let's Start</title> <style> body{ background:#eee; margin:1em; font-family:sans-serif; } .box{ display:flex; } .toggle { position:relative; width:100px; height:100px; background:red; margin:2px; display:flex; justify-content:center; align-items:center; } .toggle:hover { background:pink; } </style> </head> <body> <!-- เขียนเว็บง่ายๆ และดูการแสดงผลด้านซ้ายมือได้เลย --> <div class="box"> <div class="toggle" onclick="note(246.9)"> B </div> <div class="toggle" onclick="note(293)"> D </div> <div class="toggle" onclick="note(246.9)"> B </div> <div class="toggle" onclick="note(246.9)"> B </div> </div> <div class="box"> <div class="toggle" onclick="note(220)"> A </div> <div class="toggle" onclick="note(196)"> G </div> <div class="toggle" onclick="note(196)"> G </div> <div class="toggle" onclick="note(220)"> A </div> </div> <div class="box"> <div class="toggle" onclick="note(246.9)"> B </div> <div class="toggle" onclick="note(293)"> D </div> <div class="toggle" onclick="note(246.9)"> B </div> <div class="toggle" onclick="note(246.9)"> B </div> </div> <div class="box"> <div class="toggle" onclick="note(220)"> A </div> <div class="toggle" onclick="note(196)"> G </div> <div class="toggle" onclick="note(196)"> G </div> <div class="toggle" onclick="note(220)"> A </div> <div class="toggle" onclick="note(246.9)"> B </div> <div class="toggle" onclick="note(220)"> A </div> <div class="toggle" onclick="note(196)"> G </div> <div class="toggle" onclick="note(164.8)"> E </div> </div> <div class="box"> <div class="toggle" onclick="note(196)"> G </div> <div class="toggle" onclick="note(164.8)"> E </div> <div class="toggle" onclick="note(196)"> G </div> <div class="toggle" onclick="note(220)"> A </div> <div class="toggle" onclick="note(196)"> G </div> <div class="toggle" onclick="note(164.8)"> E </div> <div class="toggle" onclick="note(196)"> G </div> </div> </body> <script> audio = new (window.AudioContext || window.webkitAudioContext)() function note(val){ osci = audio.createOscillator() gain = audio.createGain() osci.connect(gain) gain.connect(audio.destination) osci.start() osci.frequency.value = val gain.gain.setValueCurveAtTime([1,0],audio.currentTime,.5) } </script> </html>