The Simple Web (Copy 14873)

✨ PHANNITA SAISORN

<html>
<head>
	<title>Let's Start</title>
  <style>
    @keyframes re {
      0% {
			transform: rotatez(0deg);
      }
      100% {
			transform: rotatez(360deg);
      }
    }
    body{
      width: 100%;
      height: 100%;
      background-color:	hsl(203, 92%, 75%);
      margin:0;
      font-family:sans-serif;
      overflow: hidden;
    }
    .box {
		width: 800px;
      height: 600px;
      background-color: hsl(210, 100%, 40%);
      margin: auto;
      top: 50%;
      left: 50%;
      position: absolute;
      transform: translate(-50%, -50%);
      border-radius: 10px;
    }
    blockquote {
		color: #333399;
      border-left: 20px solid hsl(240, 100%, 40%);
      padding: 20 20 20 20;
      background: hsl(210, 100%, 80%);
      position:absolute;
      top: 50px;
      left: 50px;
      font-size: 30px;
    }
    .recorder {
		top: 250px;
      left: 100px;
      position: absolute;
      animation: re 5s linear;
    }
    .note {
		top: 250px;
      left: 500px;
      position: absolute;
    }
    .note2 {
		top: 320px;
      left: 500px;
      position: absolute;
    }
    button {
		padding: 10 10 10 10;
      font-size: 20
    }
  </style>
  <script>
    let isStart = 0;
    audio = new(window.AudioContext || window.webkitAudioContext)()
    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 recorder(f) {
		console.log(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.2,0], audio.currentTime, 1.2)
    }
    
  </script>
</head>
<body>
  <div class="box">
    <blockquote>Recorder</blockquote>
    <div class="recorder">
      <img src="https://media.discordapp.net/attachments/891701001994797117/947181695029887036/recorder-removebg-preview.png" width="270px" height="270px" alt="recorder">
    </div>
    <div class="note">
      <button onclick="recorder(465.39)"> do </button>
      <button onclick="recorder(511.17)"> rae </button>
      <button onclick="recorder(556.95)"> mee </button>
      <button onclick="recorder(602.72)"> fa </button>
    </div><br><br>
    <div class="note2">
      <button onclick="recorder(663.76)"> sol </button>
      <button onclick="recorder(717.16)"> la </button>
      <button onclick="recorder(816.35)"> tee </button>
      <button onclick="recorder(892.64)"> do' </button>
    </div>
  </div>

</body>
</html>