likes
comments
collection
share

网页与声音的交互-用JavaScript制作一个简单Piano(钢琴）

作者站长头像
站长
· 阅读数 28

前言

在现在的网页中，网页具有各式各样的效果，融合了各式各样的功能，B站的弹幕功能，地图网站的定位功能，还有具有声音效果的网站，这篇文章，我们就来将声音融合进网页，在网页中演奏乐章。

正文

要做一个前端页面首先要思考三部曲

1.页面的各容器布置

2.各容器的样式设置

3.事件的布置

思考了前端三部曲之后，我们就可以开始我们的“钢琴”制造了

1.先将乐器的样子设置出来

新建html文件，我们就简单设置一个大容器，里面放八个小容器，分别为"do,re,mi,fa,sol,la,si,do#"八个音 分别命名为键盘上的"A S D F G H J K"

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RichWeb Application with HTML5</title>
    <link rel="stylesheet" href="./common.css">
</head>
<body>
    <div class="keys">
        <div class="key" data-key="65">
            <div class="title">A</div>
            <span class="sound">do</span>
        </div>
        <div class="key" data-key="83">
            <div class="title">S</div>
            <span class="sound">re</span>
        </div>
        <div class="key" data-key="68">
            <div class="title">D</div>
            <span class="sound">mi</span>
        </div>
        <div class="key" data-key="70">
            <div class="title">F</div>
            <span class="sound">fa</span>
        </div>
        <div class="key" data-key="71">
            <div class="title">G</div>
            <span class="sound">sol</span>
        </div>
        <div class="key" data-key="72">
            <div class="title">H</div>
            <span class="sound">la</span>
        </div>
        <div class="key" data-key="74">
            <div class="title">J</div>
            <span class="sound">si</span>
        </div>
        <div class="key" data-key="75">
            <div class="title">K</div>
            <span class="sound">do#</span>
        </div>
        
    </div>
    <script src="./common.js">
        //静态页面 
    </script>
</body>
</html>

2.设置钢琴样式

我们设置一个页面背景图：

html{
    font-size: 10px; /* css inhert */
    background: url('./background.jpg') bottom center;
    background-size: cover;
}

然后给大容器设置为弹性，使得里面的子容器可以排成一行

再将其设为居中摆放：

.keys{
    display: flex;
    min-height: 100%;
    align-items: center;
    justify-content: center;
}
然后就是重头戏了，我们设置一下我们的琴键
为了让我们的钢琴更加美观，我们可以给他设置过渡动画：
.key{
    border: 4px solid black;
    border-radius: 5px;
    margin: 10px;
    font-size: 15px;
    padding: 10px,5px;
    /*过渡动画*/
    transition: all .7s ease;
    width: 100px;
    text-align: center;
    color: white;
    background: rgba(0,0,0,0.4);
    text-shadow: 0 0 .5rem black;/*立体感*/
}

接着给里面的字体设置样式，然后我们再设置一下按下琴键后琴键的变化

.key .title{
    font-size: 40px;
}

.sound{
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color:#ffc600;
}

.playing{
    transform: scale(1.1);
    border-color: #ffc600;
    box-shadow: 0 0 5px #ffc600;
}

现在我们的页面就是这样的了：

网页与声音的交互-用JavaScript制作一个简单Piano(钢琴）

3.设计JavaScript，增加事件。

我们先从网站上下载八个基础音

也可以私信博主获取

网页与声音的交互-用JavaScript制作一个简单Piano(钢琴）

接着我们来写以下几步：

  1. 初始化: 首先，通过querySelectorAll选取页面中所有具有.key类的元素，并将它们存储在变量keys中。这通常是HTML中的按键表示元素。
const keys = document.querySelectorAll('.key');
  1. 定义音频映射: 创建一个对象audioFiles，其中键为键盘按键的ASCII码(例如，A的ASCII码是65)，值为对应的音频文件路径。这样，当用户按下特定按键时，可以迅速找到并播放相应的音频。
const audioFiles = {
    65:'sound/do.wav',
    83:'sound/re.wav',
    68:'sound/mi.wav',
    70:'sound/fa.wav',
    71:'sound/sol.wav',
    72:'sound/la.wav',
    74:'sound/si.wav',
    75:'sound/do (1).wav' 
};

  1. 定义播放音频的函数 playSound:

    • 监听键盘事件: 通过event.keyCode获取用户按下的键盘键码。

    • 查找对应音频文件: 使用获取到的键码在audioFiles对象中查找是否有匹配的音频文件路径。

    • 播放音频: 如果找到了匹配的音频文件，则创建一个新的Audio对象并播放音频。

    • 视觉反馈:

      • 找到与按下的键盘键码相匹配的.key元素（如果有）。
      • 给匹配到的元素添加playing类，这通常用于改变按键的样式以提供视觉反馈（如变色或动画）。
      • 设置一个定时器，在500毫秒后移除playing类，同时暂停音频并重置播放时间为0，以便于下一次播放。
const playSound = ()=>{
    const keyCode = event.keyCode;
    const audioFile = audioFiles[keyCode];

    if(audioFile){
        const audio = new Audio(audioFile);
        audio.play();
    
   
    const ele =document.querySelector(`.key[data-key="${keyCode}"]`)
    
    if(ele){
        ele.classList.add('playing')
        setTimeout(()=>{
            ele.classList.remove('playing')
            audio.pause();
            audio.currentTime = 0;
        },500)
        
    }
}
}
  1. 绑定事件监听器: 使用addEventListener为整个窗口添加一个keydown事件监听器，当键盘按键被按下时，触发playSound函数。
window.addEventListener('keydown',playSound)

这样我们的一个钢琴就做好了

让我们来弹一首小星星吧！

1 1 5 5 6 6 5 - 4 4 3 3 2 2 1 -

试着做一个并弹出来吧

转载自:https://juejin.cn/post/7372096358415810595
评论
请登录