HTML5 ——web audio API 音乐可视化(二)
上一篇 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 音乐可视化(二)的更多相关文章
- HTML5 ——web audio API 音乐可视化(一)
使用Web Audio API可以对音频进行分析和操作,最终实现一个音频可视化程序. 最终效果请戳这里; 完整版代码请戳这里,如果还看得过眼,请给一个start⭐ 一.API AudioContext ...
- 【HTML5】Web Audio API打造超炫的音乐可视化效果
HTML5真是太多炫酷的东西了,其中Web Audio API算一个,琢磨着弄了个音乐可视化的demo,先上效果图: 项目演示:别说话,点我! 源码已经挂到github上了,有兴趣的同学也可以去st ...
- Web Audio API之手把手教你用web api处理声音信号:可视化音乐demo
1.Web Audio API 介绍 Web Audio API 提供了在Web上控制音频的一个非常有效通用的系统 ,这些通用系统通俗的讲就是我们可以利用Web Audio API提供的各种方法操作各 ...
- 关于HTML5音频——audio标签和Web Audio API各平台浏览器的支持情况
对比audio标签 和 Web Audio API 各平台浏览器的支持情况: audio element Web Audio API desktop browsers Chrome 14 Yes ...
- Web Audio API 实现音频可视化
声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 一转眼就已经有三个月没写博客了,毕业季事情确实多,现在也终于完全毕业了,博客还是不能落下.偶尔还是要写一下. 玩HTML5的Audio A ...
- 使用Web Audio API绘制音波图
摘要:Web Audio API是对<audio> 标签功能上的补充,我们可以用它完成混音.音效.平移等各种复杂的音频处理,本文简单的使用其完成音波图的绘制. PS:本例子使用ES6编程, ...
- 【Web Audio API】 — 那些年的 web audio
转 TAT.Jdo:[Web Audio API] - 那些年的 web audio 这主题主要是早期对 web audio api的一些尝试,这里整理一下以便以后翻阅,如有错误,诚请指正. 在这之前 ...
- H5的Web Audio Api
概述 研究Web Audio Api的主要原因是:工作中需要在ios中实现声音的淡出效果,主要是通过setInterval来改audio标签的volume属性实现的,但是ios上面volume属性是只 ...
- [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 ...
随机推荐
- 并发编程8 线程的创建&验证线程之间数据共享&守护线程&线程进程效率对比&锁(死锁/递归锁)
1.线程理论以及线程的两种创建方法 2.线程之间是数据共享的与join方法 3.多线程和多进程的效率对比 4.数据共享的补充线程开启太快 5.线程锁 互斥锁 同步锁 6.死锁现象和递归锁 7.守护线程 ...
- 微信公众号 订单 待发货-配送中-已收货 logic
w function logistics_sameorder($logistics) { $arr = array(); $tmp_wxout_trade_no = ''; $w = 0; $wi = ...
- 分布式计算 要不要把写日志独立成一个Server Remote Procedure Call Protocol
w https://en.wikipedia.org/wiki/Remote_procedure_call In distributed computing a remote procedure ca ...
- Linux入门之运维(1) 系统监控 vmstat top
vmstat命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存使用,虚拟内存交换情况,IO读写情况.这个命令是我查看Linux/Unix最 ...
- Linux学习笔记(9)linux网络管理与配置之一——Linux基础网络命令与学习大纲(0)
大纲目录 0.常用linux基础网络命令 1.配置主机名 2.配置网卡信息与IP地址 3.配置DNS客户端 4.配置名称解析顺序 5.配置路由与默认网关 6.双网卡绑定 [1] ping [2]net ...
- C语言自带快速排序对比插入排序
#include <stdio.h> #include <stdlib.h> #include <time.h> void getRandomArr (int ar ...
- 图形数据库 Neo4j 开发实战【转载】
简介: Neo4j 是一个高性能的 NoSQL 图形数据库.Neo4j 使用图(graph)相关的概念来描述数据模型,把数据保存为图中的节点以及节点之间的关系.很多应用中数据之间的关系,可以很直接地使 ...
- Java IO流简单使用
Java IO流简单使用 也许是以前IO方面接触的比较少,我对于读和写的概念老是混淆. 趁着现在实习比较闲小结一下,我个人理解读和写都是针对程序,分别就是程序的输入和输出,或者叫读入写出. Java ...
- HTML布局--使用<div>元素
div元素是用于分组HTML元素的块级元素 上图代码示例如下: <!DOCTYPE html> <html lang="en"> <head> ...
- Python(模块(modue)、包(package))
''' 一 模块 模块一共三种: python标准库 第三方模块 应用程序自定义模块 模块两种执行方式: 1 用于启动执行 2 用于被调用执行 key:import module: 将执行文件(mod ...