Web Audio API 弹奏demo

先看demo
参考自张鑫旭 利用HTML5 Web Audio API给网页JS交互增加声音

Web Audio API 提供了在Web上控制音频的一个非常有效通用的系统，允许开发者来自选音频源，对音频添加特效，使音频可视化，添加空间效果 （如平移），等等。

既然web上能够直接产生声音，那就能用一连串的声音组合来替代一些音频文件
播放音频的这段代码来自 张鑫旭

1.只需要申明一个数组，里面放着不同音调的声音的字符串
2.监听用户的键盘输入 a-z对应不同字符串
3.用户开始录音之后，把用户的输入存到一个数组里
4.点击播放时，按照顺序播放即可

  // a -z 是 65到90
  let keyList = {
    '65':'196.00',
    '66':'220.00',
    '67':'246.94',
    '68':'261.63',
    '69':'293.66',
    '70':'329.63',
    '71':'349.23',
    '72':'392.00',
    '73':'440.00',
    '74':'493.88',
    '75':'523.25',
    '76':'587.33',
    '77':'659.25',
    '78':'698.46',
    '79':' 783.99',
    '80':'880.00',
    '81':'987.77',
    '82':'1046.50',
    '83':'1150.55',
    '84':'1270.12',
    '85':'1300.69',
    '86':'1459.89',
    '87':'1600.95',
    '88':'1751.34',
    '89':'1951.34',
    '90':'2251.34',
  }

核心的播放

    playVoice(frequency){
      let audioCtx = this.audioCtx
      var oscillator = audioCtx.createOscillator();
      // 创建一个GainNode,它可以控制音频的总音量
      var gainNode = audioCtx.createGain();
      // 把音量，音调和终节点进行关联
      oscillator.connect(gainNode);
      // audioCtx.destination返回AudioDestinationNode对象，表示当前audio context中所有节点的最终节点，一般表示音频渲染设备
      gainNode.connect(audioCtx.destination);
      // 指定音调的类型，其他还有square|triangle|sawtooth
      oscillator.type = 'sine';
      // 设置当前播放声音的频率，也就是最终播放声音的调调
      oscillator.frequency.value = frequency;
      // 当前时间设置音量为0
      gainNode.gain.setValueAtTime(0, audioCtx.currentTime);
      // 0.01秒后音量为1
      gainNode.gain.linearRampToValueAtTime(1, audioCtx.currentTime + 0.01);
      // 音调从当前时间开始播放
      oscillator.start(audioCtx.currentTime);
      // 1秒内声音慢慢降低，是个不错的停止声音的方法
      gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 1);
      // 1秒后完全停止声音
      oscillator.stop(audioCtx.currentTime + 1);
    }

记录音频到数组

playVoice(frequency){
  //  省...
  if(this.isRecord) this.record(frequency)
}

播放创作

// 点击
  ul.onclick = function (e) {
    let target = e.target
    console.log(target)
    let id =target.getAttribute('data-id')
    if(id>=0){
      creater.playRecord(id)
    }
  }

    // 播放记录的音乐
    playRecord(index){
      let arr = this.recordLsit[index]
      let lastLime = 1
      let time = 1
      arr.forEach((item,index)=>{
        if(index){
          time = item.time - lastLime
        }else{
          lastLime = item.time
        }
        setTimeout(() => {
          this.playVoice(item.val)
        }, time);
      })
    }