webaudio ajax,初识webAudio

webAudio是网页上除了audio之外可以用来播放声音的东西,和audio相比,webAudio就显得更加专业,可操作性更强。今天我们就通过几个小demo来简单认识一下webAudio,看看这东西怎么玩。利用webAudio发声

我们知道audio是无法自己发出声音的,只能通过链接到mp3等文件,然后播放发声,但是webAduio自己是可以发出声音的:

上面就是一个简单的demo,鼠标移不同的键上会有不同的声音,这个是怎么做到的呢?

在讲解之前,我先抛出一个webAudio播放声音的一般套路,因为和audio那种简单的播放声音方式不同,webAudio播放声音是有一套流程的。

6t8zern6ync_1.svg

webAudio播放声音必须要有一个声音源,这个声音源可以来自声音数据,也可以利用webAudio创造一个音调;有了声音源之后,我们就可以在后面链接处理器,比如控制音量的处理器,声音波形的处理器等,过滤器可以多个,一个链接一个;最后需要链接扬声器,播放声音。

知道了上面的套路之后,那么对于理解代码将会有所帮助,现在看看webAudio播放声音的关键代码:

var oscillator = audioCtx.createOscillator(); //webAudio创造的音调

var gainNode = audioCtx.createGain(); //控制音量的过滤器

oscillator.connect(gainNode);//声音源链接过滤器

gainNode.connect(audioCtx.destination);//过滤器链接杨声器我们可以看到它们是用connect来链接的,按照上面的顺序,一个链接一个。

audioCtx.createOscillator创造的音调有几个参数,第一个是type,type表明声波的不同类型,有sine,square,sawtooth,triangle四种类型;frequency表示声音的频率,这里通过设置不同的频率来发出不同的声音。

需要注意的是,在webAudio中的声音源只能播放一次,例如上面的createOscillator一旦调用了start,那么就不能调用第二次。如果需要多次调用,每次都需要重新生一个声音源。XHR获取声音

之前我们说到,webAudio中的声音源可以来自声音数据,这里webAudio播放的声音数据为ArrayBuffer格式的。那么如何通过XHR获取声音呢?

jQuery的ajax底层就是封装了XHR,但是jQuery的ajax没有接受arraryBuffer类型的数据,因此为了可以获取到arrayBuffer数据,我们需要用原始的XHR:

var request = new XMLHttpRequest(); //建立一个请求

request.open('GET', 'a.mp3', true); //配置好请求类型,文件路径等

request.responseType = 'arraybuffer'; //配置数据返回类型

// 一旦获取完成,对音频进行进一步操作,比如解码

request.onload =function(){}

request.send();

接下来我们将传过来的arrayBuffer进行解析,解析之后就可以作为声音源进行播放了。

audioContext.decodeAudioData(arraybuffer, function(buffer) {

var audioBufferSouceNode = audioContext.createBufferSource();

audioBufferSouceNode.buffer = buffer;

});audioCtx.createGain()是创建一个声音的控制器,用来控制声音的音量的,它会链接在声音源的后面。

audioContext的suspend和resume是用来暂停和恢复声音播放的,然后audioContext的onended事件将会在声音停止后调用。文件选择获取声音

上面讲了XHR获取声音,我们是通过XHR设置arrayBuffer类型来获取内容,那如何通过文件选择来获取声音呢?

var file = this.files[0];

var fileReader = new FileReader();

fileReader.onload = function(e) {

var arraybuffer = e.target.result;

audioContext.decodeAudioData(arraybuffer, function(buffer) {

var audioBufferSouceNode = audioContext.createBufferSource();

audioBufferSouceNode.buffer = buffer;

});

}

fileReader.readAsArrayBuffer(file);

这里要做的是将得到的file对象转换成arrayBuffer。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值