test II

✨ ANUWAT PRASIT

<button onclick="gain.gain.value = 0">Stop</button>
<button id="event_key_z" onclick="note(261)"> C </button>
<button id="event_key_x" onclick="note(293)"> D </button>
<button id="event_key_c" onclick="note(329)"> E </button>
<button id="event_key_v" onclick="note(349)"> F </button>
<button id="event_key_b" onclick="note(391)"> G </button>
<button id="event_key_n" onclick="note(440)"> A </button>
<button id="event_key_m" onclick="note(493)"> B </button>
<button id="event_key_mm" onclick="note(523)"> C </button>
<input type="range" min="100" max="1000" value="440" oninput="changeF(this.value)">
<input type="range" min="0" max="100" value="100" oninput="changeV(this.value)">
<script>
  // ดูก่อนว่ามีการสร้างเสียงหรีือยัง
  let isStart = 0;
  //สร้าง Context
  audio = new (window.AudioContext || window.webkitAudioContext)()
  //สร้าง Gain และ Osci ตัวหลัก
  osci = audio.createOscillator()
  gain = audio.createGain()
  //เชื่อมกันหมด
  osci.connect(gain)
  gain.connect(audio.destination)
  
  function startSound(){
    if(isStart == 0){
      osci.start();
      isStart = 1;
    }
    else{
      gain.gain.value = 1;
    }
  }
  function changeF(val){// เปลี่ยนความถี่
    val = parseInt(val) //เปลี่ยน เป็น int
    console.log(val) //ขอดูค่า
    osci.frequency.value = val //เปลี่ยน f ของ osci ตัวแม่
  }
  function changeV(val){ //เปลี่ยนความดัง
    val = parseInt(val) //เปลี่ยนเป็น Int
    val = val/100 //เอามาหาร 100 ให้ได้ค่าสูงสุด = 1
    gain.gain.value = val; //เอาไปสั่ง gain ตัวแม่
  }
  function note(f){ // เล่นโน๊ตเอง
    console.log(f) //ดูความถี่
    let time = audio.currentTime
     //สร้าง Osci และ Gain ใหม่สำหรับการกดครั้งนี้เท่านั้น
    let note_osci = audio.createOscillator()
    let note_gain = audio.createGain()
    // เชื่อมต่อกับ Audio แม่
    note_osci.connect(note_gain)
    note_gain.connect(audio.destination)
    // ให้ค่าของเสียงครั้งนี้ เท่ากับที่ส่งมา
    note_osci.frequency.value = f
    //เริ่มเปิด osci
    note_osci.start()
    // note_gain.gain.linearRampToValueAtTime(0,time+.4) //แบบที่ 1
    note_gain.gain.setValueCurveAtTime([0,1,0],audio.currentTime,.4) //แบบที่ 2
  }
  
  
  document.body.onkeydown = function(event){
    let key = event.key
    console.log(event.key)
    if(key == 'z'){
        event_key_z.click()
    }
    if(key == 'x'){
        event_key_x.click()
    }
    if(key == 'c'){
        event_key_c.click()
    }
    if(key == 'v'){
        event_key_v.click()
    }
    if(key == 'b'){
        event_key_b.click()
    }
    if(key == 'n'){
        event_key_n.click()
    }
    if(key == 'm'){
        event_key_m.click()
    }
    if(key == ','){
        event_key_mm.click()
    }
}
</script>