ฝึก – CODEBOX

ฝึก

✨ SASITHORN SRIJUN

<style>
   @import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@1,300&display=swap');
   body{
      position:relative;
      background: #e3e3e3;
      font-family: 'Kanit', sans-serif;
      display:flex;
      flex-direction:column;
      align-items:center;
      text-align:center;
      margin-top:2em;
  	}
  .boxNote {
    display:flex;
  }
  .toggle1{
      position:relative;
      width:150px;
      background: linear-gradient(45deg, #d299c2 0%, #fef9d7 100%);
      padding:.5em;
      border-radius:4px;
      cursor:pointer;
      color:white;
      box-shadow: 2px 2px 10px #0002;
      margin-bottom:.5em;
    	transition: .5s;
    	margin: 7px;
    }
  .toggle2{
      position:relative;
      width:25px;
      background:#000;
      padding:.5em;
      border-radius:4px;
      cursor:pointer;
      color:white;
      box-shadow: 2px 2px 10px #0002;
      margin-bottom:.5em;
    	transition: .5s;
    	margin: 7px;
    }
  .toggle1:nth-child(1) {
		background:linear-gradient(315deg, #f8ceec 0%, #a88beb 74%);
  }
  .toggle1:nth-child(2) {
		background:linear-gradient(45deg, #d5adc8 0%, #ff8489 74%);
  }
  .toggle1:nth-child(3) {
		background:linear-gradient(105deg, #f39f86 0%, #f9d976 74%);
  }
  
  .toggle2:nth-child(1) {
		background:linear-gradient(315deg, #f8ceec 0%, #a88beb 74%);
  }
  .toggle2:nth-child(2) {
		background:linear-gradient(45deg, #d5adc8 0%, #ff8489 74%);
  }
  .toggle2:nth-child(3) {
		background:linear-gradient(105deg, #f39f86 0%, #f9d976 74%);
  }
  .toggle2:nth-child(4) {
		background: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
  }
  .toggle2:nth-child(5) {
		background: linear-gradient(to right, #74ebd5 0%, #9face6 100%);
  }
  .toggle2:nth-child(6) {
		background: linear-gradient(-60deg, #ff5858 0%, #f09819 100%);
  }
  .toggle2:nth-child(7) {
		background: linear-gradient(to top, #4481eb 0%, #04befe 100%);
  }
  .toggle2:hover{
    opacity:.6;
    color:#000;
  }
  h1 {
    margin:0;
    font-size: 10rem;
    color:#000a;
    text-shadow: 2px 2px 5px #0004;
  }
</style>
<body>
  <div class="toggle1" onclick="start()">
    music
  </div>
  <div class="toggle1" onclick="gain.disconnect(audio.destination)">
    ปิดเสียง
  </div>
  <div class="toggle1" onclick="gain.connect(audio.destination)">
    เปิดเสียง
  </div>
  <p>
    ปรับความดัง
  </p>
  <input type="range" min="0" max="100" value="50" oninput="changeV(this.value)">
  <p>
    ปรับโน๊ต
  </p>
  <input type="range" min="0" max="6" value="0" oninput="changef(this.value)">
  <h1 id="demo">
    D
  </h1>

</body>
<script>
  audio = new (window.AudioContext || window.webkitAudioContext)()
  // osci = audio.createOscillator()
  // gain = audio.createGain()
  // osci.connect(gain)
  // gain.connect(audio.destination)
  // osci.frequency.value = 293.66
  // osci.gain.value = 0.5
  function start() {
    osci = audio.createOscillator()
    gain = audio.createGain()
    osci.connect(gain)
    gain.connect(audio.destination)
    osci.start()
    // osci.frequency.setValueCurveAtTime(261,audio.currentTime,.5)
    // gain.gain.setValueCurveAtTime([1,0],audio.currentTime,.5)
    // osci.frequency.setValueCurveAtTime(293,audio.currentTime+5,.5)
  //   let mai = "1"
  //   if (mai == "1"): {
  //     changef()
  //   }
  //     function changef() { 
  //       list_note = [261.63, 293.66, 329.63, 349.23, 392.00, 440.00, 493.88]
  //       list_txt = ['C', 'D', 'E', 'F', 'G', 'A', 'B']
  //       dataf = list_note[2]
  //       txt = list_txt[val]
  //       osci.frequency.value = dataf
  //       document.getElementById("demo").innerHTML = `${txt}`;
  // }
    gain.gain.setValueCurveAtTime([1,0],audio.currentTime,.5)
    gain.gain.setValueCurveAtTime([1,0],audio.currentTime+2,.5)
    gain.gain.setValueCurveAtTime([1,0],audio.currentTime+4,.5)
    gain.gain.setValueCurveAtTime([1,0],audio.currentTime+6,.5)
    gain.gain.setValueCurveAtTime([1,0],audio.currentTime+8,.5)
    gain.gain.setValueCurveAtTime([1,0],audio.currentTime+10,.5)
    gain.gain.setValueCurveAtTime([1,0],audio.currentTime+12,.5)
    // for (let i = 0; i<20, i += 2) {
    //   gain.gain.setValueCurveAtTime([1,0],audio.currentTime+i,1)
    // }
  }
  // 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)
  // }

function changef(val) { 
    list_note = [261.63, 293.66, 329.63, 349.23, 392.00, 440.00, 493.88]
    list_txt = ['C', 'D', 'E', 'F', 'G', 'A', 'B']
    dataf = list_note[val]
    txt = list_txt[val]
    osci.frequency.value = dataf
    document.getElementById("demo").innerHTML = `${txt}`;
  }
  
  function changeV(vgain) {
    console.log(vgain);
    datav = vgain/100
    gain.gain.value = datav
  }

</script>