这次给大家带来h5的canvas如何实现绘制音乐环形频谱图，h5canvas实现绘制音乐环形频谱图的注意事项有哪些，下面就是实战案例，一起来看一下。
在b站我们有很多的小伙伴们应该都看到过用ae做的可视化音乐播放器播放音乐的视频,看着特别酷炫带感有木有。
所以今天我就用 canvas 做个简单 环形频谱图。
那么~ ヾ(ｏ･ω･)ﾉ 开始吧！
1.首先绘制静态的效果
静态效果
绘制静态效果很简单,我们只要从一点出发根据一定角度绘制线条,然后画个圆从中点开始覆盖线条就行了
<canvas id="wrap" height="800" width="800"></canvas><script>
var wrap = document.getelementbyid("wrap"); var cxt = wrap.getcontext("2d");
(function drawspectrum() {
cxt.clearrect(0, 0, wrap.width, wrap.height); //画线条
for (var i = 0; i < 360; i++) { var value = 8;
cxt.beginpath();
cxt.linewidth = 2;
cxt.moveto(300, 300); //r * cos (pi/180*一次旋转的角度数) ,-r * sin (pi/180*一次旋转的角度数)
cxt.lineto(math.cos((i * 1) / 180 * math.pi) * (200 + value) + 300, (- math.sin((i * 1) / 180 * math.pi) * (200 + value) + 300));
cxt.stroke();
} //画一个小圆，将线条覆盖
cxt.beginpath();
cxt.linewidth = 1;
cxt.arc(300, 300, 200, 0, 2 * math.pi, false);
cxt.fillstyle = "#fff";
cxt.stroke();
cxt.fill();
})();</script>
2.调用audioapi,绘制音乐的频谱图
绘制音乐的频谱图
第一步完成后，第二步就很简单了,通过调用audioapi获取音频变化来改变线条长度。
注意！！！最新chrome浏览器可能需要在http服务器上运行~
你可以参考文章绘制音乐的频谱图（使用analyser节点）
<input type="button" onclick="audio.play()" value="播放" /><input type="button" onclick="audio.pause()" value="暂停" /><canvas id="wrap" height="800" width="800"></canvas><script>
var wrap = document.getelementbyid("wrap"); var cxt = wrap.getcontext("2d"); //获取api
var audiocontext = audiocontext || webkitaudiocontext; var context = new audiocontext; //加载媒体
var audio = new audio("demo.mp3"); //创建节点
var source = context.createmediaelementsource(audio); var analyser = context.createanalyser(); //连接：source → analyser → destination
source.connect(analyser);
analyser.connect(context.destination); //创建数据
var output = new uint8array(360);
(function drawspectrum() {
analyser.getbytefrequencydata(output);//获取频域数据
cxt.clearrect(0, 0, wrap.width, wrap.height); //画线条
for (var i = 0; i < 360; i++) { var value = output[i] / 8;//<===获取数据
cxt.beginpath();
cxt.linewidth = 2;
cxt.moveto(300, 300); //r * cos (pi/180*一次旋转的角度数) ,-r * sin (pi/180*一次旋转的角度数)
cxt.lineto(math.cos((i * 1) / 180 * math.pi) * (200 + value) + 300, (- math.sin((i * 1) / 180 * math.pi) * (200 + value) + 300));
cxt.stroke();
} //画一个小圆，将线条覆盖
cxt.beginpath();
cxt.linewidth = 1;
cxt.arc(300, 300, 200, 0, 2 * math.pi, false);
cxt.fillstyle = "#fff";
cxt.stroke();
cxt.fill(); //请求下一帧
requestanimationframe(drawspectrum);
})();</script>
3.环形左右同步显示
实习步骤2后其实已经完成一大半了,不过细心的小伙伴们会发现环形最右端点上的线条间差了好多。
处理办法很多,我们用其中一个简单的办法处理,那就是让其左右对称的显示。
<input type="button" onclick="audio.play()" value="播放" /><input type="button" onclick="audio.pause()" value="暂停" /><canvas id="wrap" height="550" width="800"></canvas><script>
var wrap = document.getelementbyid("wrap"); var cxt = wrap.getcontext("2d"); //获取api
var audiocontext = audiocontext || webkitaudiocontext; var context = new audiocontext; //加载媒体
var audio = new audio("demo.mp3"); //创建节点
var source = context.createmediaelementsource(audio); var analyser = context.createanalyser(); //连接：source → analyser → destination
source.connect(analyser);
analyser.connect(context.destination); //创建数据
var output = new uint8array(361);
(function drawspectrum() {
analyser.getbytefrequencydata(output);//获取频域数据
cxt.clearrect(0, 0, wrap.width, wrap.height); //画线条
for (var i = 0; i < output.length; i++) { var value = output[i] / 10; //绘制左半边
cxt.beginpath();
cxt.linewidth = 1;
cxt.moveto(300, 300);
cxt.lineto(math.cos((i *0.5 + 90) / 180 * math.pi) * (200 + value) + 300, (- math.sin((i *0.5 + 90) / 180 * math.pi) * (200 + value) + 300));
cxt.stroke(); //绘制右半边
cxt.beginpath();
cxt.linewidth = 1;
cxt.moveto(300, 300);
cxt.lineto( (math.sin((i *0.5) / 180 * math.pi) * (200 + value) + 300),-math.cos((i *0.5) / 180 * math.pi) * (200 + value) + 300);
cxt.stroke();
} //画一个小圆，将线条覆盖
cxt.beginpath();
cxt.linewidth = 1;
cxt.arc(300, 300, 200, 0, 2 * math.pi, false);
cxt.fillstyle = "#fff";
cxt.stroke();
cxt.fill(); //请求下一帧
requestanimationframe(drawspectrum);
})();</script>
4.添加波形图
最后我们来尝试在圈内,添加一个波形图
你可以参考文章绘制音乐的波形图（使用analyser节点）
示例
<input type="button" onclick="audio.play()" value="播放" /><input type="button" onclick="audio.pause()" value="暂停" /><canvas id="wrap" height="550" width="800"></canvas><script>
var wrap = document.getelementbyid("wrap"); var cxt = wrap.getcontext("2d"); //获取api
var audiocontext = audiocontext || webkitaudiocontext; var context = new audiocontext; //加载媒体
var audio = new audio("demo.mp3"); //创建节点
var source = context.createmediaelementsource(audio); var analyser = context.createanalyser(); //连接：source → analyser → destination
source.connect(analyser);
analyser.connect(context.destination); //创建数据
var output = new uint8array(361); //计算出采样频率44100所需的缓冲区长度
var length = analyser.frequencybincount * 44100 / context.samplerate | 0; //创建数据
var output2 = new uint8array(length);
(function drawspectrum() {
analyser.getbytefrequencydata(output);//获取频域数据
cxt.clearrect(0, 0, wrap.width, wrap.height); //画线条
for (var i = 0; i < output.length; i++) { var value = output[i] / 10; //绘制左半边
cxt.beginpath();
cxt.linewidth = 1;
cxt.moveto(300, 300);
cxt.lineto(math.cos((i * 0.5 + 90) / 180 * math.pi) * (200 + value) + 300, (- math.sin((i * 0.5 + 90) / 180 * math.pi) * (200 + value) + 300));
cxt.stroke(); //绘制右半边
cxt.beginpath();
cxt.linewidth = 1;
cxt.moveto(300, 300);
cxt.lineto((math.sin((i * 0.5) / 180 * math.pi) * (200 + value) + 300), -math.cos((i * 0.5) / 180 * math.pi) * (200 + value) + 300);
cxt.stroke();
} //画一个小圆，将线条覆盖
cxt.beginpath();
cxt.linewidth = 1;
cxt.arc(300, 300, 200, 0, 2 * math.pi, false);
cxt.fillstyle = "#fff";
cxt.stroke();
cxt.fill(); //将缓冲区的数据绘制到canvas上
analyser.getbytetimedomaindata(output2); var height = 100, width = 400;
cxt.beginpath(); for (var i = 0; i < width; i++) {
cxt.lineto(i + 100, 300 - (height / 2 * (output2[output2.length * i / width | 0] / 256 - 0.5)));
}
cxt.stroke(); //请求下一帧
requestanimationframe(drawspectrum);
})();</script>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
相关阅读：
如何使用canvas来制作好用的涂鸦画板
如何使用s-xlsx实现excel 文件导入和导出（下）
以上就是h5的canvas如何实现绘制音乐环形频谱图的详细内容。