音乐可视化

2017-02-04

Html5

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

在线体验地址: https://demo.luckyw.cn/code.html?path=music-visualize
源码地址: https://github.com/leoyaojy/demo/blob/master/src/music-visualize/index.html

Audio API

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

1	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上，大致就是这样，好好理解之后难度不大

如果您觉得我的文章对您有用，请随意打赏。

您的支持将鼓励我继续创作！

¥ 打赏支持