H5:web audio接口和用法

在html中解析音频文件有专门的api和步骤。

要处理音频需要先创建一个音频环境AudioContext可以控制它所包含的节点的创建,以及音频处理、解码操作的执行。做任何事情之前都要先创建AudioContext对象,因为一切都发生在这个环境之中.类似于使用canvas时候创建的canvas环境。(   var canvas=$('canvas' ); ctx=canvas.getcontext('2d')).

1,var ac=new (window.AudioContext||window.webkitAudioContext)();//创建处理音频的环境

2,获取到arraybuffer(通过xhr.response)之后调用ac.decodeAudioData(audiodata,function(data){})进行解码。

3,当成功解码之后在回调函数function(data){}中通过ac.createBufferSource()创建的接口进行处理并获得一个AudioBufferSourceNode节点。写法:ac.createBufferSource().buffer=data;

4,将创建好的节点connect到ac.destination上面去,写法是:buffersource.connect(ac.destination);

5,启动节点。buffersource.start()

6,audiobuffersourcenode作用很大。

tips:

1,canvas不用new初始化,xhr用new初始化.同时AudioContext不是驼峰写法。

2,arraybuffer的数据不能直接访问,通过typed array的接口转换可以看的到。

3,获取audiobuffer对象有两种方法,一种是通过ac.createBuffer()创建空白的audiobuffer对象以用于数据填充。第二种是通过ac.decodeAudioData(arraybuffer,fn)成功解码音轨后获取。其中第二种方法decodeAudioData的第一个参数是从xhr返回的音频流。解码成功后返回audiobuffer给回调函数。最终,解码压缩后的音频,如mp3,需要使用异步的第二种方法以防止阻塞。

4,将获得的audiobuffer附加到一个audiobuffersourcenode接口上,这个接口可以播放音频。就是上面3的写法。最终这个sourcenode接口和硬件播放设备连接起来start()播放。

5,createBufferSource()方法创建的audiobuffersourcenode对象有三个属性:buffer,loop和onended。有两个属性:start和stop。这里用了buffer属性和start()方法。

这一套流程用到的接口和方法有:AudioContext.decodeAudioData(),AudioContext.createBufferSource(),AudioContext.destination,AudioContext.start(),

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 文章是我在学习Web Audio 时翻译的 原文在此 在html5 元素出现之前,一个网页想要发声,就得需要f...
    霹雳球阅读 13,838评论 4 31
  • Ajax和XMLHttpRequest 我们通常将Ajax等同于XMLHttpRequest,但细究起来它们两个是...
    changxiaonan阅读 6,831评论 0 2
  • “如毒似魅,如解似仙。程序世界,代码纷纷,web audio是流经存在的邂逅。九十刹那为一念,一念中一刹那经九百生...
    smilewalker阅读 13,424评论 2 6
  • 本文详细介绍了 XMLHttpRequest 相关知识,涉及内容: AJAX、XMLHTTP、XMLHttpReq...
    semlinker阅读 14,707评论 2 18
  • 做个深呼吸 将自己的心,平定下来 想象一道光 自上而下,慢慢流经你的身体 从头顶,到眉心、喉咙 保持缓慢而深沉的呼...
    袖里乾坤真明阅读 832评论 0 0

友情链接更多精彩内容