web前端|js教程
Canvas,html5,音乐
web前端-js教程在B站我们有很多的小伙伴们应该都看到过用AE做的可视化音乐播放器播放音乐的视频,看着特别酷炫带感有木有。
欧洲杯php源码,ubuntu如何更改网段,tomcat静态配置文件,乌龙爬虫部落,php入门教学视频,网络seo优化seo博客lzw
快乐秒赞源码2.,ubuntu怎么终端,tomcat定时任务脚本,爬虫预约挂号,php 悬浮,江苏抖音seo优化推广快速排名lzw
所以今天我就用 Canvas 做个简单 环形频谱图。
任务悬赏的源码,vscode鼠标选中模式,ubuntu终端mima,tomcat jar包存在,sqlite3 注册码,爬虫爬自己哔哩哔哩的视频,php免安装版,港区网络seo费用多少,万博企业网站管理系统 漏洞,电子商城模板站lzw
那么~ ヾ(ｏ･ω･)ﾉ 开始吧！
1.首先绘制静态的效果
静态效果
绘制静态效果很简单,我们只要从一点出发根据一定角度绘制线条,然后画个圆从中点开始覆盖线条就行了
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();})();
2.调用AudioAPI,绘制音乐的频谱图
绘制音乐的频谱图
第一步完成后，第二步就很简单了,通过调用AudioAPI获取音频变化来改变线条长度。
注意！！！最新chrome浏览器可能需要在http服务器上运行~
你可以参考文章绘制音乐的频谱图（使用Analyser节点）
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); })();
3.环形左右同步显示
实习步骤2后其实已经完成一大半了,不过细心的小伙伴们会发现环形最右端点上的线条间差了好多。
处理办法很多,我们用其中一个简单的办法处理,那就是让其左右对称的显示。
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); })();
4.添加波形图
最后我们来尝试在圈内,添加一个波形图
你可以参考文章绘制音乐的波形图（使用Analyser节点）
示例
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); })();
