仓库源文，站点原文

title: 音量的控制 categories:

• JavaScript
• 前端杂烩
• 网络交互 tags:
• tech
• cnblogs
• webaudio warning: true date: 2014-02-26 12:56:00 fromUrl: http://www.cnblogs.com/hustskyking/archive/2014/02/26/webAudio-volume.html from: 博客园

interface GainNode : AudioNode {
    readonly attribute AudioParam gain;
};

<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>

<h4>2. 使用 GainNode 控制</h4>

//将输入数缓冲复制到输出缓冲上，并调整音量  
for(var  i =0; i < input.length; i++)
    output[i] = input[i] * value;

<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>

<p>十分轻松简洁的处理一个音量控制。</p>

<h3>二、小结</h3>

<p>本文主要是介绍 Web Audio API 中的 GainNode 节点，以及相关的应用。文中的两个 DEMO ，前者利用 processor 节点来处理，关于这个几点的说明，可以参考上两篇文章的接受；后者是使用 GainNode ，通过控制 Gain.gain.value 的值来调节音量的大小，过程十分简单，所以本文的思路也是比较的清晰。</p>

<p>如果本文中有叙述不正确的地方，还请斧正！</p>

<h3>三、参考资料</h3>