[Voice communications] 音量的控制
改变音频的音量是音频处理中最基础的部分,我们可以利用 GainNode 来构建 Mixers 的结构块。GainNode 的接口是很简单的:
interface GainNode : AudioNode {
readonly attribute AudioParam gain;
};
通过调节 GainNode.gain.value 就可以实现音频大小的调控了。下文会先介绍使用 Processor 来处理,这是一个最通用的节点,可以处理很多东西。在上文看得到的音频流中我们也使用了该节点。
本文地址:http://www.cnblogs.com/hustskyking/p/webAudio-volume.html,转载请注明源地址。
P.S:请在较新版的 chrome 火狐 Firefox 中测试。
一、音频流音量大小的控制
1. 使用 Processor 处理
这个过程比较简单:
source Node -> Processor Node -> Destination Node
数据送入到 Processor 后,由于输入 channel 和输出的 channel 之间的对应关系需要我们自己去处理,这些对应关系可以在 onaudioprocess 事件中处理,只要上面的连接导通,那这个事件就一直会处于触发状态,无论是否有数据流送入(其实没有数据流送入也就是数据流 bufferArray 为 0 嘛)。
可以看下面这个 DEMO:
<audio src="http://qianduannotes.duapp.com/file/tankWar.mp3" id="audio" autoplay></audio>
<input type="range" min="0" max="100" id="volume" />
<script type="text/javascript">
var AudioContext = AudioContext || webkitAudioContext;
var context = new AudioContext();
var source = context.createMediaElementSource(audio);
// 低通滤波节点(高频信号被过滤,听到的声音会很沉闷)
var processor = context.createScriptProcessor(1024, 1, 1);
// sourceNode - > processor -> destinationNode
source.connect(processor);
processor.connect(context.destination);
//处理过程
processor.onaudioprocess = function(e){
//获取输入和输出的数据缓冲区
var input = e.inputBuffer.getChannelData(0);
var output = e.outputBuffer.getChannelData(0);
//将输入数缓冲复制到输出缓冲上,并调整音量
for(var i =0; i < input.length; i++)
output[i] = input[i] * value;
};
//音量控制
var value;
onload = volume.onchange = function(){
value = volume.value / 200;
};
</script>
2. 使用 GainNode 控制
上面这种方式,我们可以在 onaudioprocess 事件中拿到几乎我们想要的所有数据,并且可以进行各种处理,可以说 processor 这个节点十分通用,但他的性能并不是高,你应该也看到了上面的代码中有:
//将输入数缓冲复制到输出缓冲上,并调整音量
for(var i =0; i < input.length; i++)
output[i] = input[i] * value;
需要将数据一一复制到输出节点,上面 demo 中我们设定的 bufferSize 是 1024 ,如果再大一些,或者文中需要处理的节点数太多,那页面将会很卡。Web Audio API 中提供了提供音量的节点,GainNode,既然提供了,毫无疑问,就用它呗~
节点连接方式也是十分的方便:
source → gain → destination
然后通过一个 range 控件来调节 Gain 的 gain 参数。DEMO如下:
<audio src="http://qianduannotes.duapp.com/file/tankWar.mp3" id="audio" autoplay></audio>
<input type="range" min="0" max="100" id="volume" />
<script type="text/javascript">
var AudioContext = AudioContext || webkitAudioContext;
var context = new AudioContext();
var source = context.createMediaElementSource(audio);
var Gain = context.createGain();
//连接:source → Gain → destination
source.connect(Gain);
Gain.connect(context.destination);
//音量控制
var value;
onload = volume.onchange = function(){
gain.gain.value = volume.value / 200;
};
</script>
十分轻松简洁的处理一个音量控制。
二、小结
本文主要是介绍 Web Audio API 中的 GainNode 节点,以及相关的应用。文中的两个 DEMO ,前者利用 processor 节点来处理,关于这个几点的说明,可以参考上两篇文章的接受;后者是使用 GainNode ,通过控制 Gain.gain.value 的值来调节音量的大小,过程十分简单,所以本文的思路也是比较的清晰。
如果本文中有叙述不正确的地方,还请斧正!
三、参考资料
- http://www.w3.org/TR/webaudio/ W3C Group
- http://www.web-tinker.com/ 次碳酸钴
[Voice communications] 音量的控制的更多相关文章
- [Voice communications] 声道的转换
本系列文章主要是介绍 Web Audio API 的相关知识,以及 web语音通信 中会遇到的一些问题,阐述可能存在错误,还请多多斧正! 很多粤语剧都提供了两个声道,一个左声道为粤语,一个右声道有国语 ...
- [Voice communications] 声音的滤波
本系列文章主要是介绍 Web Audio API 的相关知识,以及 web语音通信 中会遇到的一些问题,阐述可能存在错误,还请多多斧正! 通过设备获取音频流会不可避免的渗入一些杂音,这些杂音可能来自你 ...
- [Voice communications] 看得到的音频流
上文介绍了 Web Audio API 的相关知识,以及如何在你的 web 程序中引入 音频流,内容都是介绍性的,所以没有写太多 DEMO.本文重点讲解如何利用 Web Audio API 中的中间节 ...
- [Voice communications] 让音乐响起来
本系列文章主要是介绍 Web Audio API 的相关知识,由于该技术还处在 web 草案阶段(很多标准被提出来,至于取舍需要等待稳定版文档来确定,草案阶段的文档很多都会被再次编辑甚至重写.全部删除 ...
- Android手机音量的控制
1.AudioManager audio=(AudioManager) super.getSystemService(Context.AUDIO_SERVICE);//获得手机的声音服务 //设置加音 ...
- Android原生音量控制【转】
本文转载自:http://blog.csdn.net/u013082948/article/details/65630085 本文主要涉及AudioService.还是基于5.1.1版本的代码. Au ...
- audio 基本功能实现(audio停止播放,audio如何静音,audio音量控制等)
audio最简单原始的播放.暂停.停止.静音.音量大小控制的功能,注意某些浏览器会有权限无法自动播放噢(video也会如此) <!doctype html> <html> &l ...
- PCM音量控制(高级篇)
http://blog.jianchihu.net/pcm-volume-control.html 去年写过一篇文章,有关PCM的音量控制:http://blog.jianchihu.net/pcm- ...
- EasyPlayerPro windows播放器本地音频播放音量控制实现
背景描述 作为一个播放器, 除了能播放视频和声音外,音量控制是绝对不能缺少的功能; 本文在音视频播放的基础上,增加对音量的控制: 实现流程 调用mixerGetDevCaps获取音频输出设备列表; 打 ...
随机推荐
- 在Mac上开启自带的Apache,httpd服务
下面演示的是Mac自带的httpd服务 启动httpd服务 AppledeMacBook-Pro:python2_zh apple$ sudo apachectl start AppledeMacBo ...
- 【leetcode】Length of Last Word
题目简述 Given a string s consists of upper/lower-case alphabets and empty space characters ' ', return ...
- 表单验证<AngularJs>
常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" requir ...
- 解决C# WinForm Graphics绘制闪烁问题
不直接使用form的CreateGraphics创建Graphics进行绘制,可以先在Form上面放一个需要大小的PictureBox,再创建一个同大小的Bitmap,将这个Bitmap设置为Pict ...
- 使用SHFB(Sandcastle Help File Builder)建立MSDN风格的代码文档
使用SHFB(Sandcastle Help File Builder)建立MSDN风格的代码文档 下载地址:http://sandcastle.codeplex.com/ 下载地址2:http:// ...
- 《DSP using MATLAB》示例Example5.22
代码: Nmax = 2048; fft_time = zeros(1, Nmax); for n = 1:1:Nmax x=rand(1,n); t=clock; fft(x); fft_time( ...
- 安卓手持智能POS端上能扫描开单的软件-店面销售开单系统
安卓移动POS终端上能扫描开单的软件: 一.登录验证,以业务员.密码登录: 二.订单列表,显示相关信息,包括日期.单据号.客户名.金额.单据状态.有新增订单及按特定条件查询订单的功能(日期.客户等). ...
- Node.js-中文分词【1】-node-segment
node-segment是基于盘古分词写的Node.js中文分词模块,鉴于盘古分词给我留下的好印象,我们在Node.js上选择了它 一.安装node-segment npm install -g se ...
- C#调用C++动态库方法及动态库封装总结
我只是粗浅的学习过一些C++语法, 变量类型等基础内容, 如有不对的地方还望指出. 如果你跟我一样, 对指针操作不了解, 对封装C++动态库头疼的话, 下面内容还是有帮助的. 转载请注明出处: htt ...
- 再记录一下如何配置oracle instantclient
这问题遇到很多次,每次重装系统就遇到一次,却总是搞半天才搞定. 今天再次花费几个小时解决,终于有一个清晰的认识必须记录一下. 一.下载解压,不建任何目录,直接复制tnsname.ora过来.(当然也可 ...