上一篇 web audio API 音乐可视化(一)介绍了一些基本的API,以及如何简单的播放一个音频,本篇介绍一下怎么对获取到的音频进行分析,并将分析后的数据绘制成图像。

最终效果请戳这里;

完整版代码请戳这里,如果还看得过眼,请给一个start⭐️

一、API介绍###

分析音频要用到一个音频分析对象AnalyserNode,它能实时分析音频资源的频域和时域信息,但不会对音频流做任何处理。创建方法:

var analyser = ac.createAnalyser();

要用到的属性和方法:

  • fftSize:设置FFT(FFT是离散傅里叶变换的快速算法,用于将一个信号变换到频域)值得大小,用于分析得到的频域,为32-2048之间的2的整数次倍,默认为2048。实时得到的音频频域的数据个数为fftSize的一半;
  • frequencyBinCount:FFT值的一半,即实时得到的音频频域的数据个数;
  • getByteFrequencyData(Uint8Array):复制音频当前的频域数据(数量是frequencyBinCount)到Uint8Array中。

要实时的分析音频数据并绘制成图形,就要用到一个requestAnimationFrame动画函数,实时得去分析数据进行图像渲染,此动画函数默认的是每秒调用60次。

二、实例代码###

var size = 128;
var xhr = new XMLHttpRequest();
var ac = new window.AudioContext();
var analyser = ac.createAnalyser();
var gainNode = ac[ac.createGain ? "createGain" :"createGainNode"](); gainNode.connect(ac.destination);
analyser.fftSize = size * 2;
analyser.connect(gainNode); function getMusic(name){
xhr.abort();
xhr.open("get","media/"+name);
xhr.responseType = "arraybuffer";
xhr.onload = function(){
ac.decodeAudioData(xhr.response,function(buffer){
var bufferSource = ac.createBufferSource();
bufferSource.buffer = buffer;
bufferSource.connect(analyser);
bufferSource[bufferSource.start ? "start" : "noteOn"](0);
},function(err){
console.log(err)
})
};
xhr.send();
} //实时分析音频函数
function analysis(){
var arr = new Uint8Array(analyser.frequencyBinCount);
requestAnimationFrame = window.requestAnimationFrame;
function a(){
analyser.getByteFrequencyData(arr);
draw(arr); //调用绘图函数
console.log(arr); //在控制台可以看到输出的音频数据
requestAnimationFrame(a);
}
requestAnimationFrame(a);
} analysis();

接下来就是画图函数了。

对于canvas不熟悉的童鞋,请参照canvas基础知识

//创建canvas 并添加到文档中
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
$(".content").html(canvas); //.content是需要展示图形的位置 var height = $(".content").height();
var width = $(".content").width();
canvas.width = width;
canvas.height = height; function resize(){ //如果窗口的大小改变了,绘图跟着改变
canvas.height = height; //设置绘图相关的参数和属性
canvas.width = width;
var line = ctx.createLinearGradient(0,0,0,height);
line.addColorStop(0,"#CD96CD");
line.addColorStop(0.5,"#C6E2FF");
line.addColorStop(1,"#00BFFF"); ctx.fillStyle = line;
} resize(); function draw(arr){ //参数arr就是上面分析函数里得到的arr
ctx.clearRect(0,0,width,height); //每次画图之前先清空画布
var w = width / size; //平均每个柱的宽度 size 要画的柱子的个数
for(var i=0;i<size;i++){ //柱子的个数
var h = arr[i] / 256 * height; //每个柱的高度
ctx.fillRect(w*i,height - h,w *0.6, h); //w*i 表示第i个柱子的起始点的x坐标,height - h表示第i个柱子的起始点的y坐标,w*0.6表示柱子的宽度,h是高度
}
}

draw函数在 analysis分析函数中调用。

最终效果请戳这里;

完整版代码,请戳这里吧;

HTML5 ——web audio API 音乐可视化(二)的更多相关文章

  1. HTML5 ——web audio API 音乐可视化(一)

    使用Web Audio API可以对音频进行分析和操作,最终实现一个音频可视化程序. 最终效果请戳这里; 完整版代码请戳这里,如果还看得过眼,请给一个start⭐ 一.API AudioContext ...

  2. 【HTML5】Web Audio API打造超炫的音乐可视化效果

    HTML5真是太多炫酷的东西了,其中Web Audio API算一个,琢磨着弄了个音乐可视化的demo,先上效果图: 项目演示:别说话,点我!  源码已经挂到github上了,有兴趣的同学也可以去st ...

  3. Web Audio API之手把手教你用web api处理声音信号:可视化音乐demo

    1.Web Audio API 介绍 Web Audio API 提供了在Web上控制音频的一个非常有效通用的系统 ,这些通用系统通俗的讲就是我们可以利用Web Audio API提供的各种方法操作各 ...

  4. 关于HTML5音频——audio标签和Web Audio API各平台浏览器的支持情况

    对比audio标签 和 Web Audio API 各平台浏览器的支持情况:   audio element Web Audio API desktop browsers Chrome 14 Yes  ...

  5. Web Audio API 实现音频可视化

    声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 一转眼就已经有三个月没写博客了,毕业季事情确实多,现在也终于完全毕业了,博客还是不能落下.偶尔还是要写一下. 玩HTML5的Audio A ...

  6. 使用Web Audio API绘制音波图

    摘要:Web Audio API是对<audio> 标签功能上的补充,我们可以用它完成混音.音效.平移等各种复杂的音频处理,本文简单的使用其完成音波图的绘制. PS:本例子使用ES6编程, ...

  7. 【Web Audio API】 — 那些年的 web audio

    转 TAT.Jdo:[Web Audio API] - 那些年的 web audio 这主题主要是早期对 web audio api的一些尝试,这里整理一下以便以后翻阅,如有错误,诚请指正. 在这之前 ...

  8. H5的Web Audio Api

    概述 研究Web Audio Api的主要原因是:工作中需要在ios中实现声音的淡出效果,主要是通过setInterval来改audio标签的volume属性实现的,但是ios上面volume属性是只 ...

  9. [Javascript] Intro to the Web Audio API

    An introduction to the Web Audio API. In this lesson, we cover creating an audio context and an osci ...

随机推荐

  1. sql---字段类型转换,sql获取当前时间

    一.字段类型转换 convert(要转换成的数据类型,字段名称)例如 convert(varchar(100),col_name)Convert(int,Order_no) 二.sql获取当前时间 s ...

  2. 第二课作业——redis常用命令

    第二课时作业 静哥 by 2016.2.23~2016.2.22   [作业描述] 1.key string list hash结构中,每个至少完成5个命令,包含插入 修改 删除 查询,list 和h ...

  3. 码云平台, Git提交需要输入用户名/密码, 怎么办

    这是因为, 检出代码的时候, 使用了http的方式: 那么, 改为ssh的地址就行了

  4. 2.Access the mongo Shell Help-官方文档摘录

    总结: 1.使用help可以查看帮助信息db.help()  help等 2.查看对应的实现方法.比如 test@gzxkvm52$ db.updateUser function (name, upd ...

  5. MySQL数据库(1)- 数据库概述、MySQL的安装与配置、初始SQL语句、MySQL创建用户和授权

    一.数据库概述 1.什么是数据(Data) 描述事物的符号记录称为数据,描述事物的符号既可以是数字,也可以是文字.图片,图像.声音.语言等,数据由多种表现形式,它们都可以经过数字化后存入计算机. 在计 ...

  6. Linux ssh面密码登录

    1.生成自己的公钥和私钥 ssh-keygen -t rsa -P '' -f ~/.ssh/id_rsa 进入~/.ssh目录看多了两个文件:id_rsa  id_rsa.pub  其中一个是公钥一 ...

  7. Oracle DG强制激活 备库

    在实际运营环境中,我们经常碰到类似这样的需求,譬如想不影响现网业务评估DB补丁在现网环境中运行的时间,或者是想在做DB切换前想连接Standby DB做实际业务运行的测试,如果在9i版本的时候,想做到 ...

  8. 解决 hybird 应用中重复获取 WebView,导致页面元素无法识别的问题

    转载地址:http://blog.csdn.net/testman930/article/details/50799532 问题描述 在测APP的业务流,WebView和Native模式耦合在一起.例 ...

  9. java项目地址和服务器地址区分

    项目地址String filePath = request.getSession().getServletContext().getRealPath("/") + "up ...

  10. Python Tornado框架三(源码结构)

    Tornado 是由 Facebook 开源的一个服务器“套装”,适合于做 python 的 web 或者使用其本身提供的可扩展的功能,完成了不完整的 wsgi 协议,可用于做快速的 web 开发,封 ...