js做一个简易钢琴

原生js实现简易钢琴

---

js能干什么？控制页面逻辑，完成行为的控制？其实js的api极其丰富，今天我们就用js来做一个简易的钢琴来体会

一下js的强大之处吧

API介绍

首先我们来了解一下下面几个关于音频的API

创建音频上下文

我们需要在页面中创建音频上下文，才可以进行操作

var ctx = new Audiocontext()

需要注意：

• 音频上下文不能在页面加载时直接创建
• 上下文创建后自动启动，不可停止
• 上下文创建后相当于一个时间轴，一直向后延伸，我们后续可以通过对象控制发声的时间和频率等，也因此建议只创建一个音频上下文，防止时间轴紊乱
• 属性 ctx.current 代表在当前的时间点标一个点，延伸向未来

---

获取音量控制对象

获得该对象已控制音量

var g = ctx.createGain()

该对象有一个操作：

• 方法 connect

  将该对象连接到制定设备，这里直接连接到上下文的默认扬声器

  g.connect(ctx.desination)
  

• 属性 gain.value

  控制音量音高 （0 - 1）

• 方法 gain.linearRampToValueAtTime

  g.gain.linearRampToValueAtTime(0.6,ctx.currentTime + 0.01)
  //在0.01s时间内从音量音高从value值变到0.6
  

• 方法 .gain.exponentialRampToValueAtTime

  g.gain.exponentialRampToValueAtTime(0.01 , ctx.currentTime + duration)
  //音高在duration时间内由原value变为0.01
  

---

获取振荡器对象

只获得上下文是无法进行更多操作的，我们还需要获得振荡器对象，来控制音色音高

var osc = ctx.createOscillator();

振荡器对象的属性或方法：

• 方法 connect

  获得振荡器后，我们还需要将其连接到音量控制器，不连接不会发声

  osc.connect(g)
  

• 属性 type

  音频震荡的波形，不同波形产生不同的音色 有下面四个值

  • sine:默认值，正弦波
  • square:方形波
  • sawtooth：锯齿波
  • triangle：三角波

• 属性 frequency.value

  频率越高，声音越高

  按照第一国际高音，标准中音6的频率是440HZ

  这里我们的简易钢琴需要的频率区间是

  以下是按照第一国际高音，从低音1，到高音7的频率（不包含小数）

  [130,147,165,175,196,220,246,262,294,330,349,392,440,494,523,587,659,698,784,880,988,1047]

• 方法 start

  在制定的音频上下文时间播放声音

• 方法 stop

  在制定的音频上下文时间停止播放

  ---

上面的这么多API是不是有些复杂和难记？别急，我们把它封装一下，咱们跟着代码走一遍

首先是创建上下文函数

var ctx;
function setContext(){
    if(!ctx){
        ctx = new AudioContext()
    }
}

发声函数

function makeSound(index){               // 钢琴传入是钢琴的第几个按键
  setContext();                         //获得上下文
  var osc = ctx.createOscillator()        //获得音频振荡器
  var g = ctx.createGain()               //获得音量控制器
  osc.connect(g)                        //连接音量控制器
  osc.type = 'sine'                     //设置波形
  osc.frequency.value = sounds[index]     //对应钢琴不同键的不同频率
  var duration = 1                      //控制时间
  g.connect(ctx.destination)             //连接扬声器
  g.gain.value = 0                      //初始音高为0
  osc.start();                          //从当前开始发生
  g.gain.linearRampToValueAtTime(0.6,ctx.currentTime + 0.01)    //从当前时间到0.01s后，音高从0~0.6
  osc.stop(ctx.currentTime + duration);                       //当前时间duration后停止
  g.gain.exponentialRampToValueAtTime(0.01 , ctx.currentTime + duration)    //从0.6~0.01

HTML CSS

    

        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
1
        
2
        
3
        
4
        
5
        
6
        
7
    

body{
    width: 100%;
    height: 100%;
    background: url(img/img.jpg) no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
    user-select: none;
}

.container{
    text-align: center;
    margin: 200px auto;
}

li{
    position: relative;
    display: inline-block;
    width:50px;
    height: 200px;
    background-color: #fff;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.5em;
    box-shadow: 0  0  5px 3px rgba(0, 0, 0, 0.5);
}

li span{
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 20px;
}

.low::after{
    content: '.';
    position: absolute;
    left: 0;
    bottom: 10px;
    width: 100%;

}

.high::after{
    content: '.';
    position: absolute;
    left: 0;
    bottom: 45px;
    width: 100%;
}

剩余javaScript逻辑

var ctx;
var sounds = [130,147,165,175,196,220,246,262,294,330,349,392,440,494,
    523,587,659,698,784,880,988,1047]
//点击钢琴样式改变
function changeColor(li){
    
    li.style.background = '#ccc';
    setTimeout(function(){
        li.style.background = '#fff';
    } , 100)
}

var container = document.getElementsByClassName('container')[0];

//函数控制钢琴键点击事件钢琴键样式的改变
container.onclick = function(e){

    if(e.target.tagName === 'UL'){
        return;
    }

    li = e.target;
    //点击到SPAN要控制父级变色
    if(e.target.tagName == 'SPAN'){
        li = e.target.parentNode
    }
   
    changeColor(li);
    //获得钢琴是第几键
    var index = getIndex(li);
    makeSound(index);
}


window.onkeydown = function(e){
    //属性选择器
    var selector = "li[key=\"" + e.key + "\"]"  
   
    var li = document.querySelector(selector);
    
    if(li){
        this.changeColor(li);
        var index = getIndex(li);
        makeSound(index);
    }
}


function setContent(){
    if(!ctx){
        ctx = new AudioContext()
    }
}

function getIndex(li){
    var ul = li.parentNode;
    //Array.from（类数组）返回真数组
    var children = Array.from(ul.children)
    return children.indexOf(li);
}

function makeSound(index){
    // 获得音频上下文
    setContent();
    //得到音频振荡器
    var osc = ctx.createOscillator();
    //得到音量控制对象
    var g = ctx.createGain();

    // 连接振荡器和音量控制对象
    osc.connect(g);
    osc.type = 'sine';
    osc.frequency.value = sounds[index];

    var duration = 1;

    g.connect(ctx.destination);
    g.gain.value = 0;
    osc.start();
    g.gain.linearRampToValueAtTime(0.6,ctx.currentTime + 0.01)
    
    osc.stop(ctx.currentTime + duration);
    g.gain.exponentialRampToValueAtTime(0.01 , ctx.currentTime + duration)

    
}