HTML在浏览器中用JavaScript来演奏乐曲《卡农》- 编程源码 -卓越飞翔博客

最近发现了一个开源的网络音频库Tone.js
Tone.js 是一个强大的 Web Audio 框架，为在浏览器中创建交互式音乐提供了丰富的工具和功能。
于是动手写了一段简单的乐曲演奏代码试了下，挺简单挺好用。
把代码保存成html文件（如: player.html ，注意保存时选utf-8编码），然后拖到Chrome浏览器中就可以用了。代码如下：
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>卡农</title>
  <script type="text/javascript" src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/tone/14.8.37/Tone.min.js"></script>
  <style type="text/css">
  .Player{
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
  .Player>.NoteList{
    font-size: 26px;
    line-height: 30px;
    height: 30px;
  }
  .Player>.PlayButton{
    margin: 30px auto;
    padding: 5px 25px;
    font-size: 16px;
    line-height: 30px;
    cursor: pointer;
  }
  </style>
</head>
<body>
  <div class="Player">
    <div class="NoteList">音符</div>
    <button class="PlayButton">按钮</button>
  </div>
  <script type="text/javascript">
  var 卡农=("C4 E4 G4 E5,,,,,,,,G3 B3 D4 D5,,,,,,,,A3 C4 E4 C5,,,,,,,,E3 G3 B3 B4,,,,,,,,F3 A3 C4 A4,,,,,,,,C3 E3 G3 G4,,,,,,,,F3 A3 C4 A4,,,,,,,,G3 B3 D4 B4,,,,,,,,C3 E5,,G3,,C4,,,,G2 D5,,D3,,G3 G4,,,,A2 C5,,E3,,A3,,,,E2 B4,,B2,,E3 E4,,,,F2 A4,,C3,,F3,,,,C2 G4,,G2,,C3 C4,,,,F2 A4,,C3,,F3,,,,G2 B4,,D3,,G3 D4,,,,C3 C5,,G3 B4,,E4 C5,,E4,,G2 G4,,D3,,B3 B4,,,,A2 C5,,E3,,C4 E5,,,,E2 G5,,B2 E5,,G3 G5,,A5,,F2 F5,,C3 E5,,A3 D5,,F5,,C2 E5,,G2 D5,,E3 C5,,B4,,F2 A4,,C3 G4,,A3 F4,,C5,,G2 C5,,D3,,B3 C5,,B4,,C3 C5,,G3 B4,,E4 C5,,C4 E4,,G2 G4,,D3,,B3 B4,,G3,,A2 C5,,E3,,C4 E5,,A3,,E2 G5,,B2 E5,,G3 G5,,E3 A5,,F2 F5,,C3 E5,,A3 D5,,F3 F5,,C2 E5,,G2 D5,,E3 C5,,C3 B4,,F2 A4,,C3 G4,,A3 F4,,F3 C5,,G2 C5,,D3,,B3 D5,,G3 G4,,C3 E5,,G3,G4,E4 E5,D5,G3 C5,D5,G2,G4,D3,E5,B3 F5,E5,D3 D5,E4,A2 D5,,E3,C5,C4,E4,E3 B4,C5,E2 B4,,B2 G4,E4,G3,G4,B2,C4,F2 A4,C4,C3,B4,A3,C4,C3 C5,C4,C2 G4,,G2,,E3,,G2 C4,,F2 A4,C4,C3,C5,A3 F4,A4,C3 C5,D4,G2 C5,D4,D3,B4,B3,,D3 D5,G4,C3 E5,,G3,G4,E4 E5,D5,G3 C5,D5,G2,G4,D3,E5,B3 F5,E5,D3 D5,E4,A2 D5,,E3,C5,C4,E4,E3 B4,C5,E2 B4,,B2 G4,E4,G3,G4,B2,C4,F2 A4,C4,C3,C5,A3,,C3 F5,,C2 E5,,G2 D5,C5,E3,,G2,,F2 A4,C4,C3,C5,A3 F4,A4,C3 C5,,G2 B4,,D3,C5,B3,,D3 D5,,C3 G5,,G3 E5,F5,E4 G5,,G3 E5,F5,G2 G5,B4,D3 A4,B4,B3 C5,D5,D3 E5,F5,A2 E5,,E3 C5,D5,C4 E5,,E3 E4,F4,E2 G4,A4,B2 G4,F4,G3 G4,C5,B2 B4,C5,F2 A4,,C3 C5,B4,A3 A4,,C3 G4,F4,C2 G4,F4,G2 E4,F4,E3 G4,A4,G2 B4,C5,F2 A4,,C3 C5,B4,A3 C5,,C3 B4,C5,G2 B4,A4,D3 B4,C5,B3 D5,E5,D3 F5,G5,C3 E5,,G3 C5,D5,E4 E5,,G3 D5,C5,G2 D5,B4,D3 C5,D5,B3 E5,D5,D3 C5,B4,A2 C5,,E3 A4,B4,C4 C5,,E3 C4,D4,E2 E4,F4,B2 E4,D4,G3 E4,C5,B2 B4,C5,F2 A4,,C3 C5,B4,A3 A4,,C3 G4,F4,C2 G4,F4,G2 E4,F4,E3 G4,A4,G2 B4,C5,F2 A4,,C3 C5,B4,A3 C5,,C3 B4,A4,G2 B4,C5,D3 D5,C5,B3 B4,C5,D3 A4,B4,C3 C5,,G3,,C4,,E4,,G2,,D3,,G3,,B3,,A2,,E3,,A3,,C4,,E2,,B2,,E3,,G3,,F2,,C3,,F3,,A3,,C2,,G2,,C3,,E3,,F2,,C3,,F3,,A3,,G2,,D3,,G3,,B3,,C3,,G3 E5,F5,C4 G5,,E4 E5,,G2,,D3 D5,E5,G3 F5,,B3 D5,,A2,,E3 C5,D5,A3 E5,,C4 C5,,E2,,B2 E5,D5,E3 C5,,G3 B4,,F2,,C3 A4,B4,F3 C5,,A3 A4,,C2,,G2 G4,A4,C3 C5,,E3 G4,,F2,,C3 A4,B4,F3 C5,,A3 A4,,G2,,D3 B4,C5,G3 D5,,B3 B4,,C3,,G3 E5,F5,C4 G5,,E4 E5,,G2,,D3 D5,E5,G3 F5,B4,B3 D5,A4,A2,A4,E3 C5,D5,A3 E5,,C4 C5,B4,E2,B4,B2 G5,F5,E3 E5,,G3 G5,,F2 A5,,C3 A5,G5,F3 F5,,A3 A5,,C2 G5,,G2,F5,C3 E5,,E3 G5,,F2 A5,G5,C3 F5,A5,F3 G5,F5,A3 A5,D5,G2 B5,A5,D3 D5,G4,G3 B4,C5,B3 D5,,C3 E5,G4,G3,,E4 E5,,G3 F5,,G2 G5,G4,D3 A5,A4,B3 G5,G4,D3 F5,F4,A2 E5,E4,E3,E4,C4 C5,C5,E3 D5,,E2 E5,E4,B2 F5,F4,G3 E5,E4,B2 D5,D4,F2 C5,C4,C3,C4,A3 A4,B4,C3 C5,G4,C2,C5,G2 B4,C5,E3 G4,C5,G2 B4,C5,F2 A4,C5,C3 B4,C5,A3 A4,C5,C3 B4,C5,G2 B4,G4,D3 D4,C5,B3,,D3 D5,,C3 E5,G4,G3,G4,E4 E5,E5,G3 F5,,G2 G5,G4,D3 A5,A4,B3 G5,G4,D3 F5,F4,A2 E5,E4,E3,E4,C4 C5,C5,E3 D5,,E2 E5,E4,B2 F5,F4,G3 E5,E4,B2 D5,D4,F2 C5,C4,C3,C4,A3 A4,B4,C3 C5,G4,C2,C5,G2 B4,C5,E3 G4,C5,G2 B4,C5,F2 A4,C5,C3 B4,C5,A3 A4,C5,C3 B4,C5,G2 B4,G4,D3 D4,C5,B3,,D3 D5,,C3 E5,,G3,,C4,,E4,,G2 D5,,D3,,G3,,B3,,A2 C5,,E3,,A3,,C4,,E2 B4,,B2,,E3,,G3,,F2 A4,,C3,,F3,,A3,,C2 G4,,G2,,C3,,E3,,F2 A4,,C3,,F3,,A3,,G2 B4,,D3,,G3,,B3,,C3 E4 G4 C5").split(",");
  var 乐器=new Tone.PolySynth(Tone.Synth).toDestination();
  var 计时器=null;
  var 播放进度=-1;
  var 播放音符=document.querySelector(".Player .NoteList");
  播放音符.innerText="准备就绪";
  var 播放按钮=document.querySelector(".Player .PlayButton");
  播放按钮.innerText="播放";
  播放按钮.addEventListener("click",function(){
    if(计时器){
      clearInterval(计时器);
      计时器=null;
      播放按钮.innerText="播放";
    }else{
      播放按钮.innerText="停止";
      播放音符.innerText="";
      播放进度=-1;
      计时器=setInterval(function(){
        播放进度++;
        if(播放进度>=卡农.length){
          clearInterval(计时器);
          计时器=null;
          播放按钮.innerText="播放";
          return;
        }
        if(卡农[播放进度]){
          播放音符.innerText=卡农[播放进度];
          乐器.triggerAttackRelease(卡农[播放进度].split(" "),"4n");
        }
      },227);
    }
  },false);
  </script>
</body>
</html>
相关推荐
