web Audio 音频可视化

栏目: Html5 · 发布时间: 6年前

内容简介:简单的录音功能已经实现了,在此基础上,实现下录音音频可视化。开始录音时,需要connect,这样的话,音频源(声音源)输入到analyse节点,我们再根据频率绘制波形图。

简单的录音功能已经实现了,在此基础上,实现下录音音频可视化。

createAnalyser

创建

可视化主要用到的是这个 方法 ,他返回的是一个录音分析节点。在录音时,只需要将节点connect上,我们就能拿到频率数据。

this.analyser = this.context.createAnalyser(); // 录音分析节点
this.analyser.fftSize = 2048; // 表示存储频域的大小

连接音频源

开始录音时,需要connect,

// audioInput 为声音源,连接到处理节点 recorder
this.audioInput.connect(this.analyser);
this.analyser.connect(this.recorder);
// 处理节点 recorder 连接到扬声器
this.recorder.connect(this.context.destination);

这样的话,音频源(声音源)输入到analyse节点,我们再根据频率绘制波形图。

获取频率数据

api提供了 接口 用来获取频率数据,我这使用的是getByteTimeDomainData()方法,他会将波形或时域数据复制并传入到方法的第一个参数中(Uint8Array类型,和方法有关),还有其他方法,也可以使用。

let dataArray = new Uint8Array(this.analyser.frequencyBinCount);
// 将数据拷贝到dataArray中。
this.analyser.getByteTimeDomainData(dataArray);

frequencyBinCount,FFT大小的一半,表示dataArray可使用的数据值的数量。

可视化

requestAnimationFrame

用requestAnimationFrame取代setTimeout或setInterval,稳定60fps的输出。

canvas

此处可视化借助canvas绘图,将波形绘制出来。

ctx.beginPath();

var sliceWidth = canvas.width * 1.0 / bufferLength, // 一个点占多少位置,共有bufferLength个点要绘制
    x = 0; // 绘制点的x轴位置

for (var i = 0; i < bufferLength; i++) {
    var v = dataArray[i] / 128.0;
    var y = v * canvas.height / 2;

    if (i === 0) {
        // 第一个点
        ctx.moveTo(x, y);
    } else {
        // 剩余的点
        ctx.lineTo(x, y);
    }

    // 依次平移,绘制所有点
    x += sliceWidth;
}

ctx.lineTo(canvas.width, canvas.height / 2);
ctx.stroke();

思路就是将canvas的宽度分割成对应数量的,再计算y轴方向的位置,并绘制成线。

详细的代码可以参考: github

欢迎关注微信公众号[ 我不会前端 ]或扫描下方二维码!

web Audio 音频可视化


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

创业者

创业者

[美] 杰西卡·利文斯顿 / 夏吉敏 / 机械工业出版社 / 2010-5 / 58.00元

本书源自作者对32个IT行业创业者的访谈,包括Apple, Gmail, hotmail, TiVo, Flickr, Lotus 及 Yahoo公司等著名公司,主题为创业初期的人和事。 对于做梦都想创业的人来说,这本书一定要读,可以看看前辈高人是如何创业的。 对于希望了解企业家成功历程和经验的人来说,这是一本必读之书,因为里面有很多成功人士年轻时的故事,你可以好象看着他们长大一样,知......一起来看看 《创业者》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

SHA 加密
SHA 加密

SHA 加密工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具