การบ้าน WebAudio (Punnathat Nu) (Copy 14776)

✨ Thanawat Kemwatcharalert

<head>
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap" rel="stylesheet">
</head>
<body>
    <div class="box">
        <div class="circle"></div>
        <div class="play" onclick="playNotes(melody, 1/4)"></div>
        <div id="txt" class="name">Alone</div>
        <div id="txt" class="artis">Marshmello</div>
        
    </div>
</body>
<style>
    body{
        background-color: #ff0342;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .box{
        position: absolute;
        background-color: white;
        width: 1024px;
        height: 550px;
        border-radius: 20px;
    }
    .circle{
        position: absolute;
        background-image: url("https://i1.sndcdn.com/artworks-000344148633-qrms3b-t500x500.jpg");
        margin: auto;
        background-size: cover;
        left:calc((100% - 250px) / 2);
        top: 7%;
        width: 250px;
        height: 250px;
        border-radius: 100%;
        border: 7px solid #ff0342;
    }
    .name{
        color: black;
        text-align: center;
        position: relative;
        font-family: 'Rubik', sans-serif;
        font-size: 35px;
        font-weight: bold;
        top:60%;
    }
    .artis{
        color: gray;
        text-align: center;
        position: relative;
        font-family: 'Rubik', sans-serif;
        font-size: 20px;
        font-weight: bold;
        top:62%;
    }
    .play{
        position: absolute;
        margin: auto;
        background-size: cover;
        left:calc((100% - 75px) / 2);
        top: 80%;
        width: 75px;
        height: 75px;
        border-radius: 100%;
        background-color: #ff0342;
        background-image: url("https://media.discordapp.net/attachments/927895027743596545/947044332953808947/Untitled-1.png");
    }
    .play:active{
        transform: scale(0.98);
    }
    .play:hover{
        background-color: #ac002b;;
    }
    /* #play{
        top:0;
        left:0;
        position: absolute;
    } */
    @keyframes size {
        0%{
            transform: scale(1.0);
        }
        50%{
            transform: scale(0.9);
        }
        100%{
            transform: scale(1.0);
        }
    }
</style>
<script>
    let [C4,D4b,D4,E4b,E4,F4,G4b,G4,A4b,A4,B4b,B4] = [3,4,5,6,7,8,9,10,11,12,13,14];
    let [C5,D5b,D5,E5b,E5,F5,G5b,G5,A5b,A5,B5b,B5] = [15,16,17,18,19,20,21,22,23,24,25,26];
    let [C6,D6b,D6,E6b,E6,F6,G6b,G6,A6b,A6,B6b,B6] = [27,28,29,30,31,32,33,34,35,36,37,38];
    let [C7,D7b,D7,E7b,E7,F7,G7b,G7,A7b,A7,B7b,B7] = [39,40,41,42,43,44,45,46,47,48,49,50];
// F=F4 D=D4 G=G4
    let melody = [
    F4,F4,F4,F4,F4,D4,F4,G4, //14
    F4,F4,F4,F4,F4,D4,F4,G4, //15
    F4,G4,A4,G4,F4,E4,F4,D4, //16
    ]

let playTone = (frequency, timeToPlay) => {
        let audioContext = new (window.AudioContext || window.webkitAudioContext)()
        let startTime = audioContext.currentTime
        let oscillator = audioContext.createOscillator()
        let gain = audioContext.createGain()
        let noteLength = .4
        oscillator.frequency.value = frequency
        oscillator.type = 'sine'
        oscillator.connect(gain)
        gain.connect(audioContext.destination)
        gain.gain.setValueAtTime(0.5, startTime + timeToPlay)
        gain.gain.linearRampToValueAtTime(0, startTime + timeToPlay + noteLength)
        oscillator.start(startTime + timeToPlay)
        oscillator.stop(startTime + timeToPlay + noteLength)
    }
    const playNotes = (notes, secondPerBeat) => {

notes.forEach((noteNumber, index) => {
            if (noteNumber !== -1) {
                let frequency = 220 * 2 ** (noteNumber / 12)
                let beatToPlay = index + (index % 2) / 6
                let timeToPlay = beatToPlay * secondPerBeat
                playTone(frequency, timeToPlay)
            }
        })
    }
</script>
</html>