การบ้าน WebAudio (Copy 14830)

✨ NekoRabu sama

<html>
  <head>
    <title>Play</title>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Amiri:wght@700&display=swap');
      @import url('https://fonts.googleapis.com/css2?family=Athiti:wght@300&display=swap');
      body{
        background-image: linear-gradient(180deg, rgba(25, 25, 26, 1) 0%, rgba(27, 28, 35, 1) 29%, rgba(29, 30, 44, 1) 55%, rgba(37, 50, 66, 1) 89%, rgba(41, 59, 76, 1) 100%);
      }
      #card{
        background-image: url(https://cdn.discordapp.com/attachments/848593958187171850/947137337824002068/artworks-HtSviGYgRDX3sGmA-hCwXhQ-t500x500.png);
        width: 500px;
        height: 500px;
        border-radius: 20px;
        box-shadow: 1px 0px 13px 4px rgba(129, 0, 189, 0.15);
        display: block;
        margin: auto;
        margin-top: 20px;
        filter: brightness(120%);
        animation: loy 2s infinite alternate;
      }
      .filter{
        width: 500px;
        height: 500px;
        background-color: purple;
        opacity: 10%;
        animation: change 3s infinite alternate;
      }
      .button {
        color: rgb(18, 18, 18);
        border-radius: 30px;
        border: none;
        padding: 10px 50px;
        text-align: center;
        font-size: 20px;
        cursor: pointer;
        display: block;
        margin: auto;
        margin-top: 20px;
        box-shadow: 1px 0px 13px 4px rgba(129, 0, 189, 0.15);
        font-family: 'Amiri', serif;
      }
      .text{
        color: white;
        display: flex;
        justify-content: center;
        margin-top: 20px;
        font-size: 18px;
        font-family: 'Athiti', sans-serif;
      }
      @keyframes loy{
       from{transform: translatey(-3px);}
        to{transform: translatey(3px);}
      }
      @keyframes change{
        0%{background-color: red;}
        50%{background-color: green;}
        100%{background-color: Blue;}
      }
    </style>
  </head>
  <boby>
    <div class="text">ทำปุ่มที่กดแล้วมีmelodyเพลงขึ้นมา</div>
      <div id="card">
        <div class="filter"></div>
      </div>
    	<button class="button" onclick="playnotes()">PLAY</button>
    <script>
      let playTone = (frequency, timeToplay) => {
			var context = new (window.AudioContext || window.webkitAudioContext)()
         var startTime = context.currentTime
      	var osci = context.createOscillator()
      	var gain = context.createGain()
      	var noteLength = 1
         osci.frequency.value = frequency
        	osci.type = 'sine'
      	osci.connect(gain)
      	gain.connect(context.destination)
      	gain.gain.setValueAtTime(1, startTime + timeToplay)
        	gain.gain.linearRampToValueAtTime(0, startTime + timeToplay + noteLength)
      	osci.start(startTime + timeToplay)
      	osci.stop(startTime + timeToplay + noteLength)
      }
      function playnotes(){
        let [C2,D2,E2,F2,G2,A2,B2] = [65.406,73.416,82.407,87.307,97.999,110,123.47];
        let [C3,D3,E3,F3,G3,A3,B3] = [130.81,146.83,164.81,174.61,196,220,246.94];
        let [C4,D4,E4,F4,G4,A4,B4] =[261.63,293.66,329.63,349.23,392,440,493.888];
        let melody = [E3,-1,G3,-1,C4,D4,-1,C4,G3,-1,C4,-1,D4,G2,-1,E4,D4,-1,C4,D4,-1,C4,D4,-1,E4,-1,C4,-1,E3,-1,G3,-1,C4,D4,-1,C4,G3,C3,-1,E4,D4,G2,-1,C4,G3,D3,-1,G3,C4,B3,-1,A3,B3,-1,C4,C4,-1,A2,-1,E2,-1,G3,A3,F2,-1,C3,-1,E4,D4,G2,-1,C4,D3,-1,C4,C4]
        melody.forEach((noteNumber, index) => {
			if (noteNumber !== -1){
           let frequency = noteNumber
           let beatToplay = index + (index % 2) / 6
           let timeToPlay = beatToplay * (1/4)
           playTone(frequency, timeToPlay)
         }
        })
      }
    </script>
  </boby>
</html>