การบ้าน WebAudio (Branch 14944) (Copy 15146)

✨ PEERANUT TIPRAK

<!DOCTYPE html>
<html>
  <head>
    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&family=Dongle&family=K2D:wght@300&family=Prompt:wght@300&display=swap" rel="stylesheet">
    <title> Play </title>
    <style>
      html{
        height: 100%;
      }
      body{
          background: bisque;
        height:100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .piano{
          position:relative;
          margin: auto;
          width: 1300px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .allwhite{
          /*margin-top: 30vh;*/
          position: absolute;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .white{
          /*margin-top: 30vh;*/
          width: 50px;
          height: 150px;
          background: white;
          border-color:white;
          border-bottom-left-radius: 10px;
          border-bottom-right-radius: 10px;
        }
      .black{
        margin-bottom:8vh;
        color: white;
        width: 40px;
        height: 80px;
        position: absolute;
        background: black;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        }
      .Cb{
        left: 29px;
      }
      .Db{
        left: 79px
      }
      .Fb{
        left: 179px
      }
      .Gb{
        left: 229px
      }
      .Ab{
        left: 279px
      }
      .text{
          color: darkred;
          font-family: 'Dongle', sans-serif;
        margin-bottom: 50vh;
          font-size: 100px;
          position:absolute;
          text-transform: uppercase;
          text-shadow: 5px 10px rosybrown;
          letter-spacing: 5px;
        }
      .box{
        margin-top: 90vh;
        position: absolute;
        display: flex;
        font-size: 80px;
        font-family: 'Dongle', sans-serif;
        justify-content: center;
        align-items: center;
      }
      .input{
        margin-top: 100vh;
        position: absolute;
        display: flex;
        font-size: 60px;
        font-family: 'Dongle', sans-serif;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div class="text">
      piano
    </div>
    <div class="piano">
      <div class="allwhite">
        <button class="white C4" onclick="note(261.6)"><br><br><br><br><br><br><br><br>C4</button>
        <button class="black Cb" onclick="note(277.2)">C#</button>
        <button class="white D4" onclick="note(293.7)"><br><br><br><br><br><br><br><br>D4</button>
      <button class="black Db" onclick="note(311.1)">D#</button>
        <button class="white E4" onclick="note(329.6)"><br><br><br><br><br><br><br><br>E4</button>
        <button class="white F4" onclick="note(349.2)">
          <br><br><br><br><br><br><br><br>F4
        </button>
      <button class="black Fb" onclick="note(370.0)">F#</button>
        <button class="white G4" onclick="note(392.0)"><br><br><br><br><br><br><br><br>G4</button>
      <button class="black Gb" onclick="note(415.3)">G#</button>
        <button class="white A4" onclick="note(440.0)">
      <br><br><br><br><br><br><br><br>A4</button>
      <button class="black Ab" onclick="note(466.2)">A#</button>
        <button class="white B4" onclick="note(493.9)"><br><br><br><br><br><br><br><br>B4</button>
      </div>
    
    <script>
    audio = new (window.AudioContext || window.webkitAudioContext)()

osci = audio.createOscillator()
    gain = audio.createGain()
    osci.connect(gain)
    gain.connect(audio.destination)
    
  function changeF(val){
    // เปลี่ยนความถี่
    val = parseInt(val) //เปลี่ยน เป็น int
    console.log(val) //ขอดูค่า
    osci.frequency.value = val //เปลี่ยน f ของ osci ตัวแม่
    theF_txt.innerText = val //แสดงผล F
  }
  function changeV(){
	var volum = document.getElementById("volum")
   gain.gain.value = volum.value/100;
   }
  function note(f){
    let time = audio.currentTime
    let note_osci = audio.createOscillator()
    let note_gain = audio.createGain()
    note_osci.connect(note_gain)
    note_gain.connect(audio.destination)
    note_osci.frequency.value = f
    note_osci.start()
    
    note_gain.gain.setValueCurveAtTime([1,0],audio.currentTime,.2) //แบบที่ 2
  }
    </script>
  </body>
</html>