หมูกรอบ-กัลยกร การบ้าน WebAudio (Copy 14937)

✨ NATCHAPHON TANGSATIDPORN

<html>
  <head>
    <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=Noto+Sans+Thai&family=Noto+Serif+JP&display=swap" rel="stylesheet">
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        background: #efe2c6;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        justify-content: center;
        align-items: center;
      }
      h1 {
        font-family: 'Noto Serif JP', serif;
        font-size: 9vh;
        letter-spacing: 7px;
        padding-bottom: 2%;
        color: #c8171e;
        line-height: 90%;
        text-align: center;
      }
      h2 {
        letter-spacing: 2px;
        font-family: 'Noto Sans Thai', sans-serif;
        font-size: 2.5vh;
      }
      .container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #f9f4e0;
        width: 90vh;
        height: 30%;
        border-radius: 20px;
        box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
      }
      .ramen {
        display: flex;
        justify-content: center;
        width: 100%;
        padding: 3%;
        gap: 5%;
      }
      .content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 60%;
      }
      .jp, .th {
        display: flex;
        justify-content: space-between;
      }
      img {
        width: 30%;
      }
      .shop {
        display: flex;
        justify-content: center;
        gap: 2.5%;
      }
      button {
        width: 3.5vh;
        height: 3.5vh;
        border: none;
        border-radius: 100%;
        background: #c59c5c;
        color: white;
        font-size: 1.25em;
        cursor: pointer;
      }
      button:active {
        transform: translateY(2px);
      }
      input[type=text] {
        color: black;
        font-size: 2.5vh;
        font-weight: bold;
        border: none;
        width: 5vh;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>ラーメン<br>ramen .</h1>
    <div class="container">
      <div class="ramen">
        <img src="https://www.tokyoeki-1bangai.co.jp/street/ramen/assets/images/ramen/shop8_ramen.png">
        <div class="content">
          <div class="jp">
            <h2>東京駅斑鳩</h2>
            <h2>1,030 ¥</h2>
          </div>
          <div class="th" style="padding-bottom: 5%;">
            <h2>ราเมนกระดูกหมูและอาหารทะเล</h2>
            <h2>290 ฿</h2>
          </div>
          <div class="shop">
            <button onclick="funcDecrease();funcSound()">-</button>
            <input type="text" id="var1" value="0" disabled>
            <button onclick="funcIncrease();funcSound()">+</button>
          </div>
        </div>
      </div>
    </div>

function funcSound() {
        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 = i*40
        note_osci.start()
        note_gain.gain.setValueCurveAtTime([1,0],audio.currentTime,.2)
      }
	</script>
  </body>
</html>