音乐可视化

本文是在慕课网学习了HTML5音乐可视化以后产生的，老师讲解的很详细，建议你先去看一看，我新增了播放控制列表、文件上传大小限制、重复上传文件检测、自动播放下一首，效果图以下:

在线体验地址: https://demo.luckyw.cn/code.h...
源码地址: https://github.com/leoyaojy/d...

Audio API

---

我将要介绍的HTML5 Audio API与Audio标签是不同的，Audio标签只是HTML5更语义化的一个表现，而HTML5 Audio API则让咱们能够在代码中直接操做原始的音频流数据，对其进行任意加工再造，这里我只涉及到对音频流的分析，从而实现音乐的可视化
一段音频在到达扬声器播放以前，咱们能够对其进行拦截获得音频流数据，本文涉及到的是对音量的控制以及对音频流数据的分析，这一切都是基于AudioContext对象来的，因此咱们须要建立这个对象，再从这个对象去建立其余音频节点。目前仅Chrome和Firefox对其提供了支持，因此咱们仅能在Chrome和Firefox下才能看到效果，为了能同时在这两种浏览器下工做，咱们须要作下兼容写法:

window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext;

页面布局

---

我采用的是左右两侧布局，左侧播放列表固定宽度300，右侧音乐可视化区域自适应宽度，并在左侧区域添加了控制面板，能够添加音乐、暂停、播放、上一首和下一首歌曲的切换，添加音乐实际上是经过一个label标签的for属性指向一个type为file的input文本框，这样更美观，指定multiple这样能够多选文件进行上传，并经过绑定input文本框的onchange事件把选择的音乐文件添加到播放列表中，获取目前的播放状态，若是正在播放，则只单单把音乐添加到播放列表，不然并播放第一首音乐

FileReader读取文件播放

---

建立一个FileReader对象，从保存音乐文件列表files中以ArrayBuffer读取音频文件，而后监听它的onload事件获取它解析出来的数据result，建立音量控制节点gainNode以及音频分析节点analyser。AudioContext经过解码result数据获得一个buffer数据，而后建立一个bufferSourceNode节点，并设置它的buffer属性为解码以后的buffer，并把它链接到音频分析节点，而后音频分析节点链接到音量控制节点，音量控制节点最后链接到AudioContext的destination上，再经过bufferSourceNode的start方法进行播放，音乐可视化的难点就在于理解这里。最后把这个bufferSourceNode保存到source变量中，设置它的onended事件也即播放结束事件，能够看下下面的图理解下:

var fr = new FileReader();
fr.onload = function (e) {
    var result = e.target.result;
    gainNode = ac[ac.createGain ? "createGain" : "createGainNode"]();
    gainNode.connect(ac.destination);
    analyser = ac.createAnalyser();
    analyser.fftSize = size;
    analyser.connect(gainNode);
    ac.decodeAudioData(result, function (buffer) {
        var bs = ac.createBufferSource();
        bs.buffer = buffer;
        bs.connect(analyser);
        bs[bs.start ? "start" : "noteOn"]();
        source = bs;
    }, function (err) {
        console.log(err)
    });
};
fr.readAsArrayBuffer(files[currIndex]);

绘制音频图谱

---

咱们须要建立一个长度为analyser.frequencyBinCount的Uint8Array的数组，而后把实时获得的音频数据赋值给它analyser.getByteFrequencyData(arr)，而后调用draw方法绘制到canvas上，大体就是这样，好好理解以后难度不大