Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

AudioAPI的音量控制

  音量控制实际上很简单,只要将振幅等比缩放即可。Processor节点几乎什么都能做,当然也包括音量控制。在从输入数据复制到输出数据时乘上一个系数就可以控制音量了。但还有更方便的方法——直接使用Gain节点。这是AudioAPI自带的用于控制音量的节点。
  首先是Processor方式处理 [实例] <input type="range" min="0" max="200" id="volume" />
<script>
var AudioContext=AudioContext||webkitAudioContext;
var context=new AudioContext;
//加载音乐
var audio=new Audio("/files/SuperMario.mp3");
//创建节点
var media=context.createMediaElementSource(audio);
var processor=context.createScriptProcessor(1024,1,1);
//连接:media→processor→destination
media.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;
};
//播放
audio.play();
</script>
  这个代码是可以正常工作的,只是有点麻烦,而且通过JavaScript复制数据,性能上可能有问题。下面是直接使用Gain节点来做音量控制 [实例] <input type="range" min="0" max="100" id="volume" />
<script>
var AudioContext=AudioContext||webkitAudioContext;
var context=new AudioContext;
//加载音乐
var audio=new Audio("/files/SuperMario.mp3");
//创建节点
var media=context.createMediaElementSource(audio);
var gain=context.createGain();
//连接:media→gain→destination
media.connect(gain);
gain.connect(context.destination);
//音量控制
onload=volume.onchange=function(){
  gain.gain.value=volume.value/100;
};
//播放
audio.play();
</script>
  这个代码就简单的多,只需要修改Gain节点上的一个子属性就可以调整音量。
网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^