【JS30-Wes Bos】钢琴琴键 01

最新推荐文章于 2023-11-05 19:55:54 发布

高孜晗

最新推荐文章于 2023-11-05 19:55:54 发布

阅读量406

点赞数

分类专栏：原生JavaScript Wes Bos JS30 文章标签： css html css3

本文链接：https://blog.csdn.net/qq_39701204/article/details/123480930

版权

这篇博客展示了如何利用JavaScript、HTML和CSS构建一个简单的交互式钢琴应用。用户可以通过点击或按键盘上的特定键来播放不同的音符，琴键在被点击时会有高亮效果。文章详细解释了HTML布局、CSS居中对齐和Flexbox布局的运用，以及JavaScript中处理键盘事件和添加交互效果的代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引言

本文介绍如何用javascripty语法写一个简单的琴键(drum ang piano)网页，通过敲击特定键盘（音键），可以发出不同音调。

网址为(https://janice143.github.io/musicKit.github.io/)

正文

1网页布局与功能

网页整体分为3个部分：

是最顶上居中排布的乐器切换(Drum Kit, Piano Kit)组块，选中响应的kit，背景图和琴键切换为响应的内容，同时kit字体变为白色；
是页面居中排布的琴键；
是背景图。

琴键可以通过鼠标点击或者按下响应的键盘来操作，可以发出对应的音效（黄色字体表示音效的名称）。琴键被点击按下后，加以一定的css动画（黄色高亮边框）来区分。

2实现原理

一、 html代码

1 乐器切换组块：

   <div id="switch">
        <a class="drum chosen" href="#" onclick="addChosenDrum()">Drum Kit</a>
        <a class="piano" href="#" onclick="addChosen()">Piano Kit</a>
   </div>

2 Drum Kit:

<div id="pianoKit">
    <div data-key="65" class="key1 key" >
        <a href="#" οnclick="clickPlaySound(65)">
            <p class="key-ABC">A</p>
            <p class="key-tune">DO</p>
        </a>
    </div>

    <div data-key="83" class="key2 key">
        <a href="#" οnclick="clickPlaySound(83)">
            <p class="key-ABC">S</p>
            <p class="key-tune">RE</p>
        </a>

    </div>
    <div data-key="68" class="key3 key">
        <a href="#" οnclick="clickPlaySound(68)">
            <p class="key-ABC">D</p>
            <p class="key-tune">MI</p>
        </a>

    </div>
    <div data-key="70" class="key4 key">
        <a href="#" οnclick="clickPlaySound(70)">
            <p class="key-ABC">F</p>
            <p class="key-tune">FA</p>
        </a>

    </div>
    <div data-key="71" class="key5 key">
        <a href="#" οnclick="clickPlaySound(71)">
            <p class="key-ABC">G</p>
            <p class="key-tune">SOL</p>
        </a>

    </div>
    <div data-key="72" class="key6 key">
        <a href="#" οnclick="clickPlaySound(72)">
            <p class="key-ABC">H</p>
            <p class="key-tune">LA</p>
        </a>

    </div>
    <div data-key="74" class="key7 key">
        <a href="#" οnclick="clickPlaySound(74)">
            <p class="key-ABC">J</p>
            <p class="key-tune">SI</p>
        </a>

    </div>

    <audio data-key="65" src="sounds/1.MP3"></audio>
    <audio data-key="83" src="sounds/2.MP3"></audio>
    <audio data-key="68" src="sounds/3.MP3"></audio>
    <audio data-key="70" src="sounds/4.MP3"></audio>
    <audio data-key="71" src="sounds/5.MP3"></audio>
    <audio data-key="72" src="sounds/6.MP3"></audio>
    <audio data-key="74" src="sounds/7.MP3"></audio>

</div>

3 Piano Kit

 <div id="drumKit" class="chosen">
     <div data-key="65" class="key1 key">
         <a href="#1" onclick="clickPlaySound(65)">
             <p class="key-ABC">A</p>
             <p class="key-tune">CLAP</p>
         </a>

     </div>
     <div data-key="83" class="key2 key">
         <a href="#1" onclick="clickPlaySound(83)