音乐可视化

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

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

页面布局


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

FileReader读取文件播放


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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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.frequencyBinCountUint8Array的数组,然后把实时得到的音频数据赋值给它analyser.getByteFrequencyData(arr),然后调用draw方法绘制到canvas上,大致就是这样,好好理解之后难度不大

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

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

¥ 打赏支持

文章导航

目录

×
  1. 1. Audio API
  2. 2. 页面布局
  3. 3. FileReader读取文件播放
  4. 4. 绘制音频图谱