仓库源文，站点原文

title: 声道的转换 categories:

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

var tank = new Audio("http://qianduannotes.duapp.com/file/tankWar.mp3");

tank.loop = true;

var source1 = context.createMediaElementSource(tank);

<input type="range" min="0" max="100" id="volume">
<script type="text/javascript">
    var tank = new Audio("http://qianduannotes.duapp.com/file/tankWar.mp3");
    tank.loop = true;
    var mario = new Audio("http://qianduannotes.duapp.com/file/SuperMario.mp3");
    mario.loop = true;

    var AudioContext = AudioContext || webkitAudioContext;
    var context = new AudioContext();
    var source1 = context.createMediaElementSource(tank);
    var source2 = context.createMediaElementSource(mario);
    var gain1 = context.createGain();
    var gain2 = context.createGain();
    //连接：source → gain → destination
    source1.connect(gain1);
    source2.connect(gain2);
    gain1.connect(context.destination);
    gain2.connect(context.destination);
    //音量控制
    var value;
    onload = volume.onchange = function(){
      gain1.gain.value = volume.value / 100;
      gain2.gain.value = 1 - volume.value / 100;
    };

    tank.onload = mario.onlond = function(){
        console.log("var1, var2");
    }
    tank.play();
    mario.play();

</script>

gain1.gain.value = volume.value / 100;
gain2.gain.value = 1 - volume.value / 100;

var vol = volume.value / 100;
gain1.gain.value = Math.cos(vol * 0.5 * Math.PI);
gain2.gain.value = Math.cos((1.0 - vol) * 0.5 * Math.PI);

<p>可以感受到音量的变化是这样的：</p>

<p><img src="https://images.cnitblog.com/blog/387325/201402/271310163176584.png" alt=""></p>

<p>详情可以戳这个demo：<a href="http://qianduannotes.duapp.com/demo/audio/" target="_blank">http://qianduannotes.duapp.com/demo/audio/</a></p>

<h3>二、小结</h3>

<p>本文的目的是介绍 Web Audio API 的 GainNode 节点的使用，并将此应用到声道的切换之中，上面的例子不能算是严格的声道切换，但如果我们只给 volume 参数设定 0 ,50, 100 这三个值，那效果跟声道的切换就差不多了~</p>

<p>由于这几篇文章都是关于 Node 之间的相互连接，技术含量并不多，主要是读懂 API 以及相关使用方法。行文仓促，如有错误地方，还请斧正！</p>

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