การบ้าน WebAudio 64070115 (Copy 14757)

✨ ANUWAT PRASIT

<html>
  <head>
    <title>La La Land V.2
    </title>
    <style>
      body{
        --ci1:hsl(11, 90%, 37%);
        --ci2:hsl(157, 76%, 25%);
        --ci3:hsl(277, 25%, 10%);
        --ci4:hsl(81, 26%, 35%);
        --ci5:hsl(156, 82%, 37%);
        --ci6:hsl(27, 73%, 25%);
        background:#0704;
        margin:0;
        font-family:sans-serif;
        color:#357;
        font-family: 'IBM Plex Sans Thai Looped', sans-serif;
      }
      .main{
        padding:1em;
        background:white;
        max-width:900px;
        margin:auto;
        font-size:1em;
        margin-bottom:2em;
      }
      p{
        font-size:18px;
        font-family: 'Noto Sans Thai', sans-serif;
      }
      .edit-font-size{
        text-align:right;
        font-size:1rem;
      }
      
      
      .bg-ci1{
        background-color:var(--ci1) !important}
      .bg-ci2{
        background-color:var(--ci2) !important}
      .bg-ci3{
        background-color:var(--ci3) !important}
      .bg-ci4{
        background-color:var(--ci4) !important}
      .bg-ci5{
        background-color:var(--ci5) !important}
      .bg-ci6{
        background-color:var(--ci6) !important}
      .cl-ci1{
        color:var(--ci1) !important}
      .cl-ci2{
        color:var(--ci2) !important}
      .cl-ci3{
        color:var(--ci3) !important}
      .cl-ci4{
        color:var(--ci4) !important}
      .cl-ci5{
        color:var(--ci5) !important}
      .cl-ci6{
        color:var(--ci6) !important}
      a{
        text-decoration:none;
        color:var(--ci3);
      }
      a:hover{
        color:var(--ci4);
      }
      nav{
        background-color: var(--ci3);
        height:64px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        box-sizing:border-box;
        box-shadow:0px 5px 10px #0008;
        font-family: 'Noto Sans Thai', sans-serif;
        position: sticky;
        top:0px;
    	  left:0px;
        z-index: 10;
      }
      nav .site{
        width:4rem;
        margin-left:1rem;
      }
      nav .nav-items{
        height:100%;
        width:calc(100% - 5rem);
        display:flex;
        justify-content:flex-end;
      }
      nav a{
        height:100%;
        display:inline-flex;
        align-items:center;
        padding:0 1em ;
        font-weight:bold;
        transition:all .2s;
      }
      nav a:hover{
        color:var(--ci1);
        background:var(--ci2);
      }
      #header{
        height:60vw;
        font-size:5vw;
        box-sizing:border-box;
        text-align:center;
        background-image:
          url(https://cdn.discordapp.com/attachments/932912268180619274/936239524328120360/30812.jpg);
        background-size:cover;
        background-position:center;
        color:#fff;
        display:flex;
        background-attachment:fixed;
        position:relative;
      }
      .header-inner{
        background-image:
          linear-gradient(to bottom,#0004,#000c);
        width:100%;
        height:100%;
        justify-content:center;
        align-items:center;
        display:flex;
        flex-flow:column wrap;
        font-family: 'Brush Script MT', cursive;
      }
      .header-inner h1,.header-inner h2{
        margin:0;
      }
      .header-inner h2{
        font-size:2em;
        color:#fff;
      }
      #palette{
        display:flex;
        width:max-content;
        margin:auto;
        margin-top:-40px;
        position:relative;
        z-index:10;
      }
      .palette-color{
        width:64px;
        height:64px;
        background:grey;
        border-radius:100px;
        margin-left:1.5em;
        border:.2em solid #fff;
        /*         box-sizing:border-box; */
        box-shadow:0px 5px 10px #0002;
        transition: transform 0.5s, filter 0.5s ease-in-out;
        transform: scale(1);
      }
      .palette-color:hover{
		transform: scale(1.25);
      
      
      }
      .palette-color:first-child{
        margin:0;
      }
      .article{
        max-width:1000px;
        margin:auto;
        padding:2em;
      }
      .title{
        background:hsl(81, 26%, 75%);
        padding:0.4em .5em;
        display:inline-block;
        border-radius:10px;
        font-size:2em;
        font-family: 'Brush Script MT', cursive;
      }
      .subtitle{
        font-size:1.4em;
        color:black;
        font-family: 'Noto Sans Thai', sans-serif;
        
      }
      .subhead{
        font-size:1.5em;
        color:whitesmoke;
        font-family: 'Brush Script MT', cursive;
      }
       .subblock{
        font-size:1.5em;
        color:;
        font-family: 'Brush Script MT', cursive;
      }
      .lead{
        font-family: 'Noto Sans Thai', sans-serif;
        font-size: ;
        
      }
      .pic{
        width:100%;
        border-radius:50px;
        box-shadow:1px 1px 20px var(--ci6);
        margin:1em 0 2em;
        transition: transform 0.5s, filter 0.5s ease-in-out;
  		  transform: scale(0.9);
		}
      .pic:hover{
  		transform: scale(1);
      }
      .hr{
        display:block;
        width:200px;
        background:var(--ci5);
        height:4px;
        margin:auto;
      }
      #footer{
        background:var(--ci3);
        background-image:linear-gradient(to top,#0000,#0004), url(https://media.discordapp.net/attachments/910202302768484362/936586417914650654/1sRqCZ_-ASWxEZ073LWj9Rg.png);
        padding:2em 1 3em;
        color:#fffb;
        background-size:contain;
        background-position:top center;
      }
    
      .social{
        font-size:2em;
      }
      .caption{
        text-align:center;
        font-style:italic;
        color:var(--ci3);
        margin-bottom:2em;
      }
      blockquote {
        margin: 2em;
        background:hsl(81, 26%, 75%) ;
        border-radius:10px;
        padding: 1em;
        font-size: 1.5em;
        border-left: 15px solid ;
        font-family: 'Noto Sans Thai', sans-serif;
      }
      .note{
        text-align:center;

}
      
      
/*       หมุนติ้วๆๆๆๆ */
      .slider {
  position: relative;
  width: 370px;
  margin: 50px auto;
  perspective: 800px;
  padding-top: 100px;
}
    .rotator {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      margin: auto;
      width: 55%;
      height: 150px;
      transform-style: preserve-3d;
      animation: roll 15s linear infinite;
    }
    .rotator:hover {
       animation-play-state: paused;
    }
    @keyframes roll {
       from {
         transform: rotateY(0deg);
      }
      to {
        transform: rotateY(360deg);
      }
    }
    .items {
      position: absolute;
      height: 100%;
      width: 100%;
    }
    .items img {
      height: 100%;
      width: 100%;
    }
    .items:nth-child(1) {
      transform: rotateY(calc(60deg * 1)) translateZ(190px);
    }
    .items:nth-child(2) {
      transform: rotateY(calc(60deg * 2)) translateZ(190px);
    }
    .items:nth-child(3) {
      transform: rotateY(calc(60deg * 3)) translateZ(190px);
    }
    .items:nth-child(4) {
      transform: rotateY(calc(60deg * 4)) translateZ(190px);
    }
    .items:nth-child(5) {
      transform: rotateY(calc(60deg * 5)) translateZ(190px);
    }
    .items:nth-child(6) {
      transform: rotateY(calc(60deg * 6)) translateZ(190px);
    }
/*       หมุน */
      
    </style>
  </head>
  <body>
    <nav>
      <div class="site">
        <audio controls>
          <source src="https://cdn.discordapp.com/attachments/910202302768484362/944556183077916692/MP3FY_City_of_Stars_Duet_ft._Ryan_Gosling_Emma_Stone_-_La_La_Land_Original_Motion_Picture_Soundtrack_online-audio-converter.com.mp3" type="audio/mpeg">
		  </audio>
       <head>
    		<style>
           
      .dark-mode {
        background-color: #0704;
        color: hsl(11, 90%, 35%);
        
      }
      .light-mode {
        background-color: hsl(11, 90%, 35%);
        color: hsl(157, 76%, 20%);
      }
           
    </style>
  </head>
  <body>
    
    <script>
      function darkMode() {
        var element = document.body;
        var content = document.getElementById("DarkModetext");
        element.className = "dark-mode";
      }
      function lightMode() {
        var element = document.body;
        var content = document.getElementById("DarkModetext");
        element.className = "light-mode";
      }
      function changef(num){
         let num1 = num.value
         let declaration = document.styleSheets[0].cssRules[2].style;
         let setprop = declaration.setProperty("font-size", num1) 
      }
      let isStart = 0;
  //สร้าง Context
  audio = new (window.AudioContext || window.webkitAudioContext)()
  //สร้าง Gain และ Osci ตัวหลัก
  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 note(f){// เล่นโน๊ตเอง
         
        console.log(f) //ดูความถี่
        let time = audio.currentTime
           //สร้าง Osci และ Gain ใหม่สำหรับการกดครั้งนี้เท่านั้น
        let note_osci = audio.createOscillator()
        let note_gain = audio.createGain()
          // เชื่อมต่อกับ Audio แม่
        note_osci.connect(note_gain)
        note_gain.connect(audio.destination)
          // ให้ค่าของเสียงครั้งนี้ เท่ากับที่ส่งมา
        note_osci.frequency.value = f
          //เริ่มเปิด osci
        note_osci.start()
          // note_gain.gain.linearRampToValueAtTime(0,time+.4) //แบบที่ 1
        note_gain.gain.setValueCurveAtTime([0,1,0],audio.currentTime,.4) //แบบที่ 2
      }
      document.body.onkeydown = function(event){
        let key = event.key
        console.log(event.key)
        if(key == 'z'){
            event_key_z.click()
        }
        if(key == 'x'){
            event_key_x.click()
        }
        if(key == 'c'){
            event_key_c.click()
        }
        if(key == 'v'){
            event_key_v.click()
        }
        if(key == 'b'){
            event_key_b.click()
        }
        if(key == 'n'){
            event_key_n.click()
        }
        if(key == 'm'){
            event_key_m.click()
        }
        if(key == ','){
            event_key_mm.click()
        }
    }
    </script>
  </body>
      </div>
      <div class="nav-items">
        <input type="range" min="10" max="30" step="1" oninput='changef(this)' value='18'>
        <script>
          function changef(num){
         let num1 = num.value
         let declaration = document.styleSheets[0].cssRules[2].style;
         let setprop = declaration.setProperty("font-size", num1)
      }
        </script>
        <a href="#!"><p onclick="darkMode()" class="subhead">Seb</p>
        </a>
        <a href="#!"><p onclick="lightMode()" class="subhead">Mia</p>
        </a>
      
      </div>
    </nav>
    <section id="header">
      <div class="header-inner">
        <h1>
          La La Land
        </h1>
        <h1 style="font-weight:200">
          นครดารา
        </h1>
      </div>
    </section>
    <section id="palette">
      <div class="palette-color bg-ci1"> 
      </div>
      <div class="palette-color bg-ci2"> 
      </div>
      <div class="palette-color bg-ci3"> 
      </div>
      <div class="palette-color bg-ci4"> 
      </div>
      <div class="palette-color bg-ci5"> 
      </div>
      <div class="palette-color bg-ci6"> 
      </div>
    </section>
    <section class="article">
      <h2 class="title">
        La La Land
      </h2>
      <div class='note'>
      <button id="event_key_z" onclick="note(261)"> C </button>
		<button id="event_key_x" onclick="note(293)"> D </button>
		<button id="event_key_c" onclick="note(329)"> E </button>
		<button id="event_key_v" onclick="note(349)"> F </button>
		<button id="event_key_b" onclick="note(391)"> G </button>
		<button id="event_key_n" onclick="note(440)"> A </button>
		<button id="event_key_m" onclick="note(493)"> B </button>
		<button id="event_key_mm" onclick="note(523)"> C </button>
    </div>
      <p class="lead">
        La La Land นครดารา
         เป็นภาพยนตร์เพลงอเมริกันแนวโรแมนติก เขียนบทและกำกับโดย Damien Chazelle นำแสดงโดย Ryan Gosling, Emma Stone, John Legend และ Rosemarie DeWitt เป็นเรื่องเกี่ยวกับหนุ่มนักดนตรีและสาวผู้ฝันอยากเป็นนักแสดง ทั้งสองได้พบและตกหลุมรักกันในลอสแอนเจลิส
      </p>
      <h4 class="subtitle">
        "จดหมายรักแด่ LOS ANGELES นครดาราแห่งคนช่างฝัน"
      </h4>
      <p class="lead">
        La La Land
          ภาพยนตร์มิวสิคัลยอดรางวัล ที่ไม่เพียงแค่ทำให้คนดูหลงรักบทเพลงอันตราตรึง แต่ยังมาพร้อมกับเรื่องราวการค้นหาสมดุลย์แห่ง "ความรัก" และ "ความฝัน" ที่ทำให้ใครหลายคนนึกถึงคนที่คอยอยู่เคียงข้างในยามที่คุณยังล่องลอยหาหมู่ดาวแห่งฝันของตัวเอง
      </p>
      <img src="https://cdn.discordapp.com/attachments/910202907973009500/936262986203529236/30813.jpg" class="pic">
      <p class="lead" id="lead">
        เรื่องย่อ
           La La Land (นครดารา) เล่าเรื่องราวของนักล่าฝัน 2 คนที่บังเอิญมาพบกันในเมืองที่ขึ้นชื่อเรื่องการทำลายความหวังและทำหัวใจผู้คนแตกสลาย 'ลอสแอนเจลิส' ได้แก่ มีอา (เอมมา สโตน) พนักงานในคาเฟ่แห่งหนึ่งเธอลาออกจากมหาวิทยาลัยเพื่อมาทำตามความฝันของตัวเองนั่นก็คือการได้เป็นดารา และ เซบาสเตียน (ไรอัน กอสลิง) นักเปียโนผู้หลงใหลในเพลงแจ๊สและอยากจะมีคลับแจ๊สเป็นของตัวเอง แต่ก็มีจุดหนึ่งที่ทำให้ต้องเลือกระหว่าง ความรัก หรือ ความฝัน
      </p>
       <button type="button"  onclick="changeSizeByBtn(10)" name="btn1">
            -A
        </button>
          
        <button type="button" onclick="changeSizeByBtn(18)" name="btn2">
            A
        </button>
  
        <button type="button" onclick="changeSizeByBtn(30)" name="btn3">
            A+
        </button>
      <script>
        var cont = document.getElementById("lead");
  
        function changeSizeByBtn(size) {
  
            cont.style.fontSize = size;
        }
    </script>
      
      <div class="slider">
   <div class="rotator">
      <div class="items">
         <img src="https://media.discordapp.net/attachments/910202302768484362/944129543776632853/2022-01-28_3.png?width=1031&height=676" alt="items photo" />
      </div>
      <div class="items">
         <img src="https://media.discordapp.net/attachments/910202302768484362/944129453133561866/sewew.png" alt="items photo" />
      </div>
      <div class="items">
         <img src="https://media.discordapp.net/attachments/910202302768484362/936588381352251402/IMG_20220128_184735.jpg" />
      </div>
      <div class="items">
         <img src="https://media.discordapp.net/attachments/910202302768484362/936584811018063932/9129009286f142280ca2281e40a95cc04e9a5abed7e5fb4d0511b7cb136a7d592b050cdd2719ff5f_rwc_0x1061x1659x1301x1659.png?width=859&height=676" alt="items photo" />
      </div>
      <div class="items">
         <img src="https://media.discordapp.net/attachments/910202302768484362/936472988059041832/lala_gallery_01.png" alt="items photo" />
      </div>
      <div class="items">
         <img src="https://media.discordapp.net/attachments/910202302768484362/936472944757059645/lala_gallery_05.png" alt="items photo" />
      </div>
   </div>
</div>

      <div class="hr">
      </div>
      <blockquote>
        <p class="subblock">
        <b>La La Land
        </b>
        <br>
        "Here’s to the ones who dream, foolish as they may seem."
      </blockquote>
    </section>
    <footer id="footer">
      <div class="article">
        <p class = "subhead">
          Emma Stone
          <br>
          as
          <br>
          Mia Dolan
        </p>
      </div>
    </footer>
  </body>
</html>