HTML5 —— audio API 音乐可视化(一)
来源:互联网 发布:mysql union 用法 编辑:程序博客网 时间:2024/06/09 21:11
HTML5 ——web audio API 音乐可视化(一)
使用Web Audio API可以对音频进行分析和操作,最终实现一个音频可视化程序。
最终效果请戳这里;
完整版代码请戳这里,如果还看得过眼,请给一个star:
一、API
AudioContext
: 该接口表示由音频模块链接而成的一个音频上处理下文,类似于canvas
里面getContext(2d)
返回的对象,对音频的一切 操作都在这个环境里进行;它包含各个AudioNode
对象以及他们相关联的对象,创建方法如下:
var ac = new window.AudioContect()
;AudioNode
:音频节点,是一个音频处理模块,它包括GainNode
(音量控制器)、BiquadFilterNode
(滤波器)等;AudioContext
的属性:AudioContext.currentTime
:AudioContext
从创建开始到当前的时间,单位秒,是一个只读属性,不可对其进行操作;AudioContext.destination
:返回AudioDestinationNode
对象,所有音频输出的聚集地,所有的AudioNode
都直接或间接地链接到这里;AudioContext.state
:返回AudioContext
的当前状态;
AudioContext
的方法:AudioContext.close()
:关闭音频环境,释放正在使用的音频资源;AudioContext.createBuffer()
:创建一个空的AudioBuffer对象,并能通过AudioBufferSourceNode来进行数据填充和播放;AudioBuffer可以通过AudioContect.createBuffer方法创建或使用AudioAudioContext.createBufferSource()
:创建一个空的AudioBufferSourceNode对象,并能通过AudioBuffer来进行数据填充和播放;AudioCount.createAnalyser()
:创建一个AnalyserNode
,他可以用来显示音频时间和频率的数据。AudioContext.decodeAudioData(arrayBuffer,succ(buffer),err)
:从ArrayBuffer对象中异步解码音频文件,这个ArrayBuffer对象通常是通过使用responseType为arraybuffer类型的XMLHttpRequest方法来获取.接受三个参数,第一个是AudioData数据,第二个是解码成功的回调函数,第三个是失败的回调函数。createGain()/createGainNode()
:创建GainNode对象,通过改变其value的值可以改变音频音量,创建方法:
var gainNode = ac.createGain() || ac.createGainNode()
;
AudioBufferSourceNode
:表示内存中的一段音频资源,其音频数据存储于AudioBuffer中(buffer属性中),创建方式:
var buffersource = ac.createBufferSource()
;此对象有3个常用的属性:
1).buffer:AudioBuffer对象,表示要播放的音频资源数据。他有一个子属性:duration,该音资源的时长,单位秒;
2).loop:是否循环播放,默认是false;
3).onended:绑定音频播放完毕时调用的实践处理程序;
常用的方法:
- start/noteOn(when=ac.currentTime,offset=0,duration=buffer.duration-offset),开始播放音频。其中,when:何时开始播放;offset:从音频的第几秒开始播放;duration:播放几秒;
- stop/noteOff(when=ac.currentTime):结束播放;
二、播放一个音频
通过xhr 获取到arrayBuffer类型的音频资源,用audioContext对象的decodeAudioData方法将arrayBuffer类型解析为buffer类型,用audioContext对象的createBufferSource()方法创建一个bufferSource对象,将刚才解析的buffer 数据复制给bufferSource对象的buffer属性,bufferSource对象用contect()方法链接audioContext对象的 destination 属性,最后调用bufferSource对象的“start/noteOn”方法播放音频。
实例代码:
//获取到arrayBuffer类型的音频资源 var xhr = new XMLHttpRequest(); function getMusic(name){ xhr.abort(); xhr.open("get","media/"+name); // 文件位于media文件夹下,要获取的音频文件名为 name xhr.responseType = "arraybuffer"; //返回类型设置为 xhr.onload = function(){ console.log(xhr.response); //ArrayBuffer 类型的返回数据 }; xhr.send(); }
//用decodeAudioData方法将arrayBuffer类型解析为buffer类型 var ac = new window.AudioContext(); //接上例 xhr.onload = function(){ ac.decodeAudioData(xhr.response,function(buffer){ var bufferSource = ac.createBufferSource(); bufferSource.buffer = buffer; bufferSource.connect(ac.destination); bufferSource[bufferSource.start ? "start" : "noteOn"](0); //播放 },function(err){ console.log(err) }) };
实现对音量的控制:
改变音量要用到gainNode对象,用gainNode对象链接到destination对象,然后让bufferSource对象链接到gainNode对象,对音量的控制,是对gainNode对象的gain.value 对象的改变达到的效果。
//音量控制元素 <input type="range" id="volume" mix="0" max="100" value="50">
var gainNode = ac[ac.createGain ? "createGain" :"createGainNode"](); gainNode.connect(ac.destination); function getMusic(name){ //...代码同上,只有一处需要修改 bufferSource.connect(gainNode); //因为上面已经将gainNode连接到ac.destination了,所以这里只需链接到gainNode即可; } $("#volume").change(function(){ changeVolume($(this).val()/$(this).attr("max")); }) function changeVolume(num){ gainNode.gain.value = num * num; }
以上代码就可以实现获取音频进行播放了,当然这只是一个开始,接下来一篇对音频进行分析。
- HTML5 —— audio API 音乐可视化(一)
- HTML5 ——web audio API 音乐可视化(二)
- HTML5 Web Audio Api-3 可视化声音
- 使用html5 audio api音频可视化: Hello by OMFG
- 通过html5的Audio API和canvas实现音频可视化
- 使用Audio API设计绚丽的HTML5音乐播放器
- HTML5 <Audio>标签API整理(一)
- html5,audio音乐播放器
- html5,audio音乐播放器
- HTML5项目笔记4:使用Audio API设计绚丽的HTML5音乐播放器
- HTML5 Audio API
- html5 Audio音乐播放器(canvas圆形音乐播放进度条)(一)
- html5 音乐播放器 audio 标签用法
- Audio--- HTML5环形音乐播放器
- HTML5 标签audio添加网页背景音乐代码
- HTML5 标签audio添加网页背景音乐代码
- Html5 audio标签实现音乐播放
- HTML5 Speech API和Audio API
- 用poi做excel自定义格式的导出
- 向上转型与向下转型
- nohup 输出重定向
- JavaScript 面向对象之二 —— 函数上下文(call() 和 apply())
- 【数据压缩】实验四 DPCM
- HTML5 —— audio API 音乐可视化(一)
- IOS开源项目--拖拽游戏
- 【模拟题】页码统计
- acm parctic(1)
- Java基础-网络编程之UDP编程
- Dapper执行Sql语句HitCache导致很慢
- JavaScript之面向对象研究一
- 【剑指offer】和为S的连续正数序列
- Javascript高级程序设计学习笔记(二)