[Voice communications] 声道的转换

本系列文章主要是介绍 Web Audio API 的相关知识，以及 web语音通信中会遇到的一些问题，阐述可能存在错误，还请多多斧正！

很多粤语剧都提供了两个声道，一个左声道为粤语，一个右声道有国语。观看者可以自由切换声道，那么切换声道的原理是什么呢？在播放器中，只需要把不同的声道切换到声轨就行了，因为有左右两个声道，所以播放器至少是包含两个声轨的。如果我们想听粤语，只需要将右声道声轨的声音设置为 0，或者临时删掉右声道声轨。本文主要是利用 GainNode 节点控制音量的属性实现两个音轨之间的相互切换，Cross-fading 的意思可以在后面的 DEMO 中用耳朵体会出来~

本文地址：http://www.cnblogs.com/hustskyking/p/webAudio-cross-fading.html，转载请注明源地址。

P.S：请在较新版的 chrome 火狐 Firefox 中测试。

一、两个声音之间的声轨切换

1. 原理介绍

在一个 AudioContext 中可以输入多个音频流，而这些音频流在 AudioContext 这个环境中辗转反侧，最后的出路也就是 DestinationNode：

而要实现上面两个声轨的切换，实则是它容易了，我们可以在他们到达 Destination 之前，加一个 GainNode，上文已经对 GainNode 做了详细的说明，本文就不继续赘述了。

2. DEMO 演示

首先要创建两个音频，平时我们都是使用 audio 节点带上 src 属性，插入到 DOM 中让其自动播放音频，本文将使用其他的方式拿到音频流：

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

我准备了两个音频，一个是 tankWar.mp3 ，经典的坦克大战开场音乐，另一个是 SuperMario.mp3，超级玛丽的背景音乐，前者稍微短一些，所以在播放的时候将其设定为循环播放：

tank.loop = true;

然后利用 createMediaElementSource 这个函数从 Media 中获取到音频流：

var source1 = context.createMediaElementSource(tank);

过程十分简单，整个 AudioContext 的连接模型为：

然后用同一个控制棒来控制 GainNode 1 和 2。

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

代码没有封装，写的稍微有些乱，不过看了之前的说明，应该可以理解这段代码~

3. 效果增强

上面的音量控制，我使用的是线性控制：

gain1.gain.value = volume.value / 100;

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

效果并不是特别好，他对音量的控制如下图：

[Voice communications] 声道的转换-LMLPHP

稍微修改下控制函数：

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

可以感受到音量的变化是这样的：

[Voice communications] 声道的转换-LMLPHP

详情可以戳这个demo：http://qianduannotes.duapp.com/demo/audio/

二、小结

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

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