分享一个小案例--电子琴的制作

最新推荐文章于 2025-06-16 11:35:36 发布

原创最新推荐文章于 2025-06-16 11:35:36 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript

javaScript 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的简单电子琴项目。通过键盘按键1-8，可以触发不同频率的声音，模拟基本的音乐演奏效果。该项目利用Web Audio API创建了音频合成器，并实现了按键响应和视觉反馈。

简单电子琴，可以实现按键1-8发出不同的声音来！

用到技术：html+css+js

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            width:100%;height:100%;
            padding:0;margin: 0;
        }
        .box{
            width:70%;height:50%;
            border:1px solid #000;
            position: absolute;
            left:0;top:0;right:0;bottom: 0;
            margin: auto;
        }
        .box div{
            float:left;
            width:12.5%;height:100%;
            border:1px solid #000;
            box-sizing: border-box;
            text-align: center;
        }
        .box div:nth-child(2n){
            background: #aaa;
        }
    </style>
    <script>
        window.onload=function (ev) {

          var datas={
              49:{
                  div:0,audio:400+400*(1/8)
              },
               50:{
                  div:1,audio:400+400*(2/8)
              },
               51:{
                  div:2,audio:400+400*(3/8)
              },
              52:{
                  div:3,audio:400+400*(4/8)
              },
              53:{
                  div:4,audio:400+400*(5/8)
              },
              54:{
                  div:5,audio:400+400*(6/8)
              },
              55:{
                  div:6,audio:400+400*(7/8)
              },
              56:{
                  div:7,audio:400+400*(8/8)
              }
          }

          var keys=document.querySelectorAll(".box div")

           var audio=new AudioContext();
           var os
           var flag=true;
          document.onkeydown=function (ev2) {
              if(!flag){
                  return
              }
              flag=false
              var key=ev2.keyCode
              os=audio.createOscillator()
              var aa=audio.createAnalyser()
              var gain=audio.createGain()

              os.connect(aa)
              os.connect(gain)
              os.connect(audio.destination)
              os.frequency.setValueAtTime(datas[key]["audio"],audio.currentTime)
              os.start(audio.currentTime)
              keys[datas[key]["div"]].style.boxShadow="0 0 10px #000 inset"
          }

          document.onkeyup=function (ev2) {
              flag=true;
              var key=ev2.keyCode

              os.stop(audio.currentTime)
              keys[datas[key]["div"]].style.boxShadow="none"
          }
        }

    </script>
</head>
<body>
  <div class="box">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
  </div>
</body>
</html>