0.启发

在B站我们有很多的小伙伴们应该都看到过用AE做的可视化音乐播放器播放音乐的视频,看着特别酷炫带感有木有。

B站截图

B站截图

B站截图

所以今天我就用 Canvas 做个简单 环形频谱图。

那么~ ヾ(ｏ･ω･)ﾉ 开始吧！

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服务器上运行~

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后其实已经完成一大半了,不过细心的小伙伴们会发现环形最右端点上的线条间差了好多。

demo

处理办法很多,我们用其中一个简单的办法处理,那就是让其左右对称的显示。

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.添加波形图

最后我们来尝试在圈内,添加一个波形图

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);

})();

5.尝试波形反向显示

如果是波形向圆形内显示 又改如何实现呢?

起始也很简单稍微改下上面的代码就可以了

首先我们要去掉圆形覆盖,用空心圆代替

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(180);

var du = 2;//角度

var potInt = { x: 300, y: 300 };//起始坐标

var R = 200;//半径

var W = 2;//宽

(function drawSpectrum() {

analyser.getByteFrequencyData(output);//获取频域数据

cxt.clearRect(0, 0, wrap.width, wrap.height);

//画线条

for (var i = 0; i < 180; i++) {

var value = output[i] / 10;//<===获取数据

cxt.beginPath();

cxt.lineWidth = W;

cxt.moveTo(( Math.sin((i * du) / 180 * Math.PI) * R + potInt.y),-Math.cos((i * du) / 180 * Math.PI) * R + potInt.x);//从圆边开始

Rv = (R + value);

cxt.lineTo( ( Math.sin((i * du) / 180 * Math.PI) * Rv + potInt.y),-Math.cos((i * du) / 180 * Math.PI) * Rv + potInt.x);

cxt.stroke();

}

cxt.fill();

//画一个空心小圆，将线条覆盖

cxt.beginPath();

cxt.lineWidth = 1;

cxt.arc(300, 300, 200, 0, 2 * Math.PI, false);

cxt.stroke();

cxt.closePath();

//请求下一帧

requestAnimationFrame(drawSpectrum);

})();

示例

接下去就简单了 只要让圆半径减去对应值就行了

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(180);

var du = 2;//角度

var potInt = { x: 300, y: 300 };//起始坐标

var R = 200;//半径

var W = 2;//宽

(function drawSpectrum() {

analyser.getByteFrequencyData(output);//获取频域数据

cxt.clearRect(0, 0, wrap.width, wrap.height);

//画线条

for (var i = 0; i < 180; i++) {

var value = output[i] / 10;//<===获取数据

cxt.beginPath();

cxt.lineWidth = W;

Rv = (R -value);

cxt.moveTo(( Math.sin((i * du) / 180 * Math.PI) * R + potInt.y),-Math.cos((i * du) / 180 * Math.PI) * R + potInt.x);

cxt.lineTo( ( Math.sin((i * du) / 180 * Math.PI) * Rv + potInt.y),-Math.cos((i * du) / 180 * Math.PI) * Rv + potInt.x);

cxt.stroke();

}

cxt.fill();

//画一个空心小圆，将线条覆盖

cxt.beginPath();

cxt.lineWidth = 1;

cxt.arc(300, 300, 200, 0, 2 * Math.PI, false);

cxt.stroke();

cxt.closePath();

//请求下一帧

requestAnimationFrame(drawSpectrum);

})();

示例

6.双向显示

既然实现了反向显示了那双向显示也就很简单了

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(180);

var du = 2;//角度

var potInt = { x: 300, y: 300 };//起始坐标

var R = 200;//半径

var W = 4;//宽

(function drawSpectrum() {

analyser.getByteFrequencyData(output);//获取频域数据

cxt.clearRect(0, 0, wrap.width, wrap.height);

//画线条

for (var i = 0; i < 180; i++) {

var value = output[i] / 10;//<===获取数据

cxt.beginPath();

cxt.lineWidth = W;

Rv1 = (R -value);

Rv2 = (R +value);

cxt.moveTo(( Math.sin((i * du) / 180 * Math.PI) * Rv1 + potInt.y),-Math.cos((i * du) / 180 * Math.PI) * Rv1 + potInt.x);

cxt.lineTo( ( Math.sin((i * du) / 180 * Math.PI) * Rv2 + potInt.y),-Math.cos((i * du) / 180 * Math.PI) * Rv2 + potInt.x);

cxt.stroke();

}

cxt.fill();

//画一个空心小圆，将线条覆盖

cxt.beginPath();

cxt.lineWidth = 1;

cxt.arc(300, 300, 200, 0, 2 * Math.PI, false);

cxt.stroke();

cxt.closePath();

//请求下一帧

requestAnimationFrame(drawSpectrum);

})();

示例

添加自己的创意

添加自己的创意

(oﾟvﾟ)ノ 大家可以参考着尝试自己DIY一个好玩的播放器出来

html音乐播放器 频谱,HTML5 Canvas 实现简易 绘制音乐环形频谱图相关推荐

  1. 在线音乐播放器 html,html5实现在线响应式音乐播放器

    大概很早的时候就有想法做一个音乐播放器玩玩,以前可能还考虑过做APP,大一的时候第一个html的静态页面也是做的音乐网站,想想,大概小时候比较喜欢音乐吧.然而,现在入了前端大坑,就用h5做一个耍耍好了 ...

  2. java音乐播放器的应用价值,基于JAVA的音乐播放器开发.docx

    摘要:从工业革命以来,科技日新月异,计算机网络现在已经慢慢融入我们的平常生活和工作,计算机网络作为信息传播的一大重要组成工具,可以这样说我们以往单一的生活方式在悄悄的被网络改变,正是因如此,网络变成了 ...

  3. php文件添加音乐播放器,window_win10系统自带Groove音乐播放器在哪？自带Groove音乐播放器添加音乐等功能的使用教程， 　　播放器在哪？1 - phpStudy...

    win10系统自带Groove音乐播放器在哪?自带Groove音乐播放器添加音乐等功能的使用教程 播放器在哪? 1.点击桌面的左下端"开始菜单"符号,然后在右上角,找到" ...

  4. html5中音乐播放器怎么写,打造属于自己的音乐播放器 HTML5之audio标签

    我的音乐播放器 HTML5中增加了Audio和Video标签,这两个标签的用法非常相似.功能却是相当强大,我们先来看一下Audio标签各个浏览器的支持情况.这里用的依然是Can I Use这个在线网站 ...

  5. html音乐播放器样式,html5扁平化mp3音乐播放器样式代码

    特效描述:html5 扁平化mp3 音乐播放器样式.扁平风格的简易的mp3音乐播放器样式代码.html5 mp3音乐播放器 代码结构 1. 引入JS 2. HTML代码 0:00 0:00 'use ...

  6. html制作在线视频音乐播放器,用html5制作音乐播放器，这3款就足够了！

    用HTML5结合Jquery做一个简易版的音乐播放器 代码展示: 三生草 var sum = 1; function ssss(a) { var s = document.getElementById ...

  7. wordpress html音乐,【WordPress插件】QPlayer音乐播放器插件html5音乐插件

    音乐播放器,这个大家不陌生了,wordpress也是可以直接插入的,但是不够美观,而且只支持本地的,今天给大家推荐一款自动解析各大音乐网站的播放器,界面美观,支持歌词显示. 使用方法: Downloa ...

  8. 基于IOS音乐播放器在线歌词同步小程序系统（音乐小程序）

    目 录 目 录 1 摘 要 3 Abstract 4 1 导论 6 1.1 背景问题 6 1.2 选题意义 6 1.3 本文内容 7 2 核心功能 9 2.1 功能调研 9 2.2 可行性分析 12 ...

  9. 计算机音乐播放器设置,Win7系统下设置默认音乐播放器的两种方法

    可能很多新手用户不知道Win7系统下怎么设置默认音乐播放器?我们习惯将某一程序设置为默认打开方式,音乐播放器也可以这样子的.一些用户想把酷狗播放器.或者qq音乐设置为默认音乐播放器,只要打开音乐文件, ...

最新文章

  1. /dev、/sys/dev 和/sys/devices 和udev的关系
  2. 关于C++指针的理解
  3. 云服务器系统盘升级会不会丢失数据,云服务器 系统盘快还是数据盘快
  4. python函数结构_PYTHON 之结构体,全局变量,函数参数,lambda编程 等
  5. 在使用win 7 无线承载网络时，启动该服务时，有时会提示：组或资源的状态不是执行请求操作的正确状态。 网上有文章指出，解决这个问题的方法是在设备管理器中启动“Microsoft托管网络虚拟适配
  6. php对键盘控制,键盘控制 - 陈映亮的个人空间 - OSCHINA - 中文开源技术交流社区...
  7. 拓端tecdat|R语言有极值（EVT）依赖结构的马尔可夫链(MC)对洪水极值分析
  8. cannot spawn XXX\bin\TortoiseGitPlink.exe: No such file or directory
  9. 单机塔防游戏推荐_给大家推荐六款爆好玩的塔防游戏
  10. java语言，MP3音频文件进行合并功能
  11. 利用NEO与Unity制作游戏（第2部分）
  12. 51单片机常用功能及相关内容
  13. 发布pip项目（包含静态文件）遇到的坑
  14. hi3516配置wifi_海思Hi3516A全功能开发板支持4G网络支持BT1120输入方案订制开发
  15. 英雄联盟英雄数据son_如何为您的网站找到完美的英雄形象
  16. OSChina App代码分析二
  17. 孙陶然：切合实际是设定目标的基础
  18. 北风：美团饿了么外卖返利cps项目是什么做的？（实操）
  19. 【转载】传统蓝牙协议栈 串口协议SPP
  20. 神经网络---第一章 基础知识 1.0 人工智能与神经网络

热门文章

  1. 读《史蒂夫•乔布斯传》（一）
  2. LinkedIn开源Dr.elephant，Hadoop爽了
  3. 解析IE6,IE7,火狐浏览器兼容性写法
  4. 计算机打印机提示无法打印,电脑打印提示由于打印机的当前设置有问题,Windows无法打印怎么解决...
  5. 奔驰灯光互动项目开发历险记，2019春节前10天
  6. python爬取历史天气查询_python爬虫爬取各个城市历史天气及数据可视化
  7. Python 已知对数和底数，求真数
  8. user script
  9. 【论文阅读】NeRF: Representing Scenesas Neural Radiance Fieldsfor View Synthesis
  10. jQuery.Switchable v2.0 发布