html5 音乐可视化(跟着音乐舞动起来吧)

点击右上角的关注,不定期前端干货分享!!

html5 音乐可视化(跟着音乐舞动起来吧)(1)

在前端界当提到音视频的时候,大家最开始联想到的可能是<audio>和<video>音视频标签。But 大家可能忽视了在html5的api中有一个WebAudio的对象。可以实现时时对音频数据分析获取并可视化。效果如下面的视频(视频有音乐哦):demo预览地址:https://aifly.github.io/toutiao/three.html

Web Audio

html5 音乐可视化(跟着音乐舞动起来吧)(2)

Web Audio API使用户可以在音频上下文(AudioContext)中进行音频操作。音频节点通过它们的输入输出相互连接,形成一个链或者一个简单的网。打个比方,我们平时一般听音乐,把耳机插在手机上,然后把耳塞塞在耳朵里,音频才可以传入到我们听觉系统里面。

而音频文件本身就是声音的采样数据,这些采样数据可以来自麦克风,也可以来自电子乐器,然后混合成一个单一的复杂的波形。

知识点:

1、获取音频上下文对象。

var ac = new (window.AudioContext || window.webkitAudioContext)();

2、创建媒体源。

var audioSrc = ac.createMediaElementSource(oAudio);//oAudio为<audio>对象

3、创建分析器。

var analyser = ac.createAnalyser();

4、我们要将刚获取到的媒体源对象和分析器对象相互链接

audioSrc.connect(analyser);

5、分析器和上下文的destination属性连接。

analyser.connect(ac.destination);

6、设置分析器的fftSize属性。

analyser.fftSize = 1024; //这个属性值一般是2的N次方。

frequencyBinCount 的值固定为analyser.fftSize值的一半. 该属性通常用于可视化的数据值的数量.也就是说 analyser.frequencyBinCount 的值为512

7、创建用于接收音频分析返回的数据。

this.arr = new Uint8Array(analyser.frequencyBinCount);

注意这里我们用了Uint8Array类型化的数组。我们平时写js程序的时候很少会用到这种数组。了解Webgl的童鞋应该知道这个类型化的数组用的比较多。

html5 音乐可视化(跟着音乐舞动起来吧)(3)

8、接下来就是要在一个循环周期函数里面不停的获取音频数据,然后将数据可视化。

(function render(){

requestAnimationFrame(render);

if (arr.length) {

analyser.getByteFrequencyData(arr);

....arr里面就会时进得到分析的音频的数据了。//dosomething

}

})();

数据的可视化载体我的这个案例里面是用的ThreeJs。因为threejs本身就是属于前端图形学的一个复杂的学科,这里就不再过多的赘述了,后面的文章我会单独分享有关ThreeJs的文章。这个案例的源代码已经在demo地址源代码中找得到。感兴趣的可以关注我,这个案例有什么问题的可以评论留言给我或者私信我哦。

总结:

1、音频的可视化和我们听音乐的步骤差不多。

2、threejs作为可视化的载体,当然我们也可以拿canvas甚至是html作为载体都是没问题的。

(全文完)

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页