HW music (Copy 14739)

✨ Orang Utan

<html>
  <head>
    
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <title>music</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
	<script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
    <style>
      body{
      --color:#48C9B0;
      --pic0:linear-gradient(#FF5A93 50%,#5A78FF);
      --pic1:url(https://cdn.discordapp.com/attachments/946646413926891540/948077496346230854/IMG_7910.png) no-repeat center -5px;
        --pic2:url(https://cdn.discordapp.com/attachments/946646413926891540/948077496673382491/IMG_7911.png) no-repeat center 0px;
      --pic3: url(https://cdn.discordapp.com/attachments/946646413926891540/948091911992926228/IMG_7915.png) no-repeat fixed center  -5px;
      background:var(--color);
      margin: 0;
      justify-content: center;
      align-items: center;
      display: flex;
      background-size: cover;
      }
  
      .plays{
        height:40px;
        width:500px;
        margin: auto;
        position:absolute;
        top:480px;
      }
      .sing{
        height: 380px;
        width:380px;
        border-radius: 200px;
        margin:auto;
        top:40px;
        position:absolute;
        transform-style:preserve-3d;
        transform: rotatex(0deg) rotatey(0deg) rotatez(360deg);
        animation: cycle 3s infinite linear;
      }
      #sing{
        background:var(--pic0);
        background-size:740px;
        background-position:center;
        background-repeat:no-repeat;
      }
      #singcenter{
        background:var(--color);
        height:50px;
        width:50px;
        border-radius:40px;
        margin-bottom:200px;
        position:absolute;
      }
      @keyframes cycle {
        from {transform:rotateZ(0deg);}
        to{transform:rotatZ(180deg);}
      }
      #box{
      background:white;
      height:70px;
      width:500px;
      position:absolute;
      margin: auto;
      top:530px;
      }
      p{
        font-size:1em;
        color:#111;
        position:absolute;
        margin:auto;
      }
      #order1 {
        top:500;
      }
      #dis1{
        position:relative;
        margin-left:100px;
        top:30px;
      }
      #dis2{
        position:relative;
        margin-left:30px;;
        top:33px;
        width:200px;
      }
      #dis3{
        position:relative;
        margin-left:30px;
        top:30px;
      }
      #playStart{
        margin:auto;
        z-index:1;
        margin-top:430px;
        width:100px;
        height:30px;
      }
      
      #name{
        margin-left:170px;
        font-family:;
        margin-top:20px;
      }
      
      
    </style>
  </head>
  <body>
    <div class="sing" id="sing"></div>
      <div id="singcenter"> </div>
    
    <select value="play0" id="plays" name="playlist" class="plays">
    <option value="play0">โปรดเลือกเพลง</option>
  <option value="play1">play1</option>
  <option value="play2">play2</option>
  <option value="play3">play3</option>
</select>
      <button id="playStart" onclick="selectPLAY()" ><i class="fas fa-play" ></i></button>
<div id="box">
    <p id="name"> คุณยังไม่ได้เลือกเพลง</p>
    
  </div>
    <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];
        

    let melody1 =[C6,-1,D6,-1,-1,C6,-1,A5,-1,-1,G5,-1,A5,-1,-1,G5,-1,E5,-1,-1,-1,-1,
                    //เมื่อคิดให้ดีโลกนี้ประหลาด
                    D5,-1,E5,-1,-1,G5,-1,A5,-1,-1,G5,-1,C5,-1,-1,-1,
                    //บุพเพสันนิวาส
                    E5,-1,-1,G5,-1,A5,-1,-1,C6,-1,D6,-1,-1,C6,-1,A5,-1,-1,-1,-1,-1,-1,
                    //ที่ประสาทความรักภิรมย์
                    C6,-1,-1,-1,D6,-1,-1,C6,-1,-1,E6,-1,-1,-1,-1,
                    //คู่ใครคู่เขา
                    C6,-1,A5,-1,G5,-1,-1,E5,-1,A5,-1,-1,-1,
                    //รักยังคอยเฝ้าชม
                    G5,-1,E5,-1,D5,-1,-1,C5,-1,D5,E5,-1,-1,-1,-1,-1,
                    //คอยภิรมย์เรื่อยไป
                    C6,-1,D6,-1,-1,C6,-1,A5,-1,-1,G5,-1,A5,-1,-1,G5,-1,E5,-1,-1,-1,-1,
                    //ขอบน้ำขวางหน้าขอบฟ้าขวางกั้น
                    D5,-1,E5,-1,-1,G5,-1,A5,-1,-1,G5,-1,C5,-1,-1,-1,
                    //บุพเพยังสรรค์ประสบ
                    E5,-1,-1,G5,-1,A5,-1,-1,C6,-1,D6,-1,-1,C6,-1,A5,-1,-1,-1,-1,-1,-1,
                    //ให้ได้พบสบรักกันได้
        				  C6,-1,-1,-1,D6,-1,-1,-1,C6,-1,-1,E6,-1,-1,-1,-1,
      				  //ห่างกันแค่ไหน
      				  C6,-1,A5,-1,G5,-1,-1,E5,-1,-1,A5,-1,-1,-1,
      				  //เขาสูงบังกั้นไว้
      				  G5,-1,E5,-1,D5,-1,-1,-1,C5,-1,-1,C5,C5
      				  //รักยังได้บูชา
                   ]

    let melody2 = [E5,-1,D5,-1,E5,-1,D5,-1,C5,-1,-1,-1,
                   //แม้ชีวิตได้ผ่าน
                   E5,-1,-1,E5,-1,D5,-1,E5,-1,G5,-1,-1,-1,-1,-1,-1,-1,
                   //เลยวัยแห่งความฝัน
                  A5,-1,G5,-1,F5,-1,G5,-1,-1,-1,G5,-1,F5,-1,G5,-1,-1,-1,-1,-1,-1,-1,
                   //วันที่ผ่านมาไร้จุดหมาย
                   E5,-1,D5,-1,E5,-1,D5,-1,C5,-1,-1,-1,
                   //ฉันเรียนรู้เพื่ออยู่
                   E5,-1,-1,-1,E5,-1,D5,-1,E5,-1,G5,-1,-1,-1,-1,-1,-1,
                   //เพียงตัวและจิตใจ
                   F5,-1,F5,-1,F5,-1,D5,-1,E5,-1,D5,-1,C5,-1,-1,-1,-1,-1,-1,
                   //เป็นมิตรแท้ที่ดีต่อกัน
                   E5,-1,D5,-1,E5,-1,D5,-1,C5,-1,-1,-1,
                   //เหมือนชีวิตผันผ่าน
                   E5,-1,-1,E5,-1,D5,-1,E5,-1,G5,-1,-1,-1,-1,-1,-1,
                   //คืนวันอันเปลี่ยวเหงา
                   A5,-1,G5,-1,F5,-1,G5,-1,-1,-1,G5,-1,A5,-1,G5,-1,-1,-1,-1,-1,-1,-1,
                   //ตัวเป็นของเราใจของใคร
                   E5,-1,D5,-1,E5,-1,D5,-1,C5,-1,-1,-1,
                   //มีชีวิตเพื่อสู้
                   E5,-1,-1,-1,E5,-1,D5,-1,E5,-1,G5,-1,-1,-1,-1,-1,-1,
                   //คืนวันอันโหดร้าย
                   F5,-1,F5,-1,F5,-1,E5,-1,D5,-1,E5,-1,D5,-1,C5,-1,-1,-1
                   //คืนที่ตัวกับใจไม่ตรงกัน
                  ]
  
    let melody3 = [E4,-1,-1,G4,-1,G4,-1,-1,-1,E4,-1,G4,-1,-1,-1,D4,-1,E4,-1,-1,-1,-1,-1,-1,-1,-1,-1,
 E4,-1,-1,G4,-1,G4,-1,-1,-1,G4,-1,C5,-1,-1,-1,B4,-1,A4,-1,-1,-1,-1,-1,-1,-1,-1,-1,
E4,-1,-1,G4,-1,G4,-1,-1,-1,E4,-1,G4,-1,-1,D4,-1,-1,E4,-1,-1,-1,-1,-1,G4,-1,-1,C4,
-1,-1,-1,-1,-1,-1,-1,-1,C4,-1,D4,-1,E4,-1,-1,-1,-1,E4,-1,D4,-1,-1,-1,C4,-1,C4,-1,]