仓库源文，站点原文

title: 看得到的音频流 categories:

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

  +---------------+------------------------------------+
  | AudioContext  |                                    |
  +---------------+                                    |
  |        +-------+    +-------+    +-------+         |
  |        |       |    |       |    |       |         |
==========>| Source|===>|Lots of|===>|  Dest | Output  |
Multi Input|       |    |       |    |       |===========>
==========>|  Node |===>| Nodes |===>|  Node |         |
  |        |       |    |       |    |       |         |
  |        +-------+    +-------+    +-------+         |
  |                         |                          |
  |                         |    Created By Barret Lee |
  +-------------------------|--------------------------+
                            |         +-------------+
                            +========>| Other Tools |
                              signal  +-------------+

// 创建一个 AudioContext 环境
var context = new AudioContext();

function playSound() {
    // 创建一个 Source 节点
    var source = context.createBufferSource();
    // 拿到输入源（狗吠）
    source.buffer = dogBarkingBuffer;
    // 将 source 节点链接到 destination 节点（输出节点）
    source.connect(context.destination);
    // currentTime 设定为 0，开始播放
    source.start(0);
}

var audio = document.getElementsByTagName("audio")[0];
// context 为一个 AudioContext 环境
// 从 audio 元素中拿到输入源，也就是上图所看到的 Mutil Input
var source = context.createMediaElementSource(audio);
// 建立一个处理延时节点
var delayNode = context.createDelay();
// sourceNode -> delayNode -> destinationNode
source.connect(delayNode);
delayNode.connect(context.destination);

<audio src="https://qianduannotes.duapp.com/file/tankWar.mp3" id="origin"></audio>
<audio src="https://qianduannotes.duapp.com/file/tankWar.mp3" id="audio"></audio>
<input type="button" onclick="origin.play()" value="原始音质 播放">
<input type="button" onclick="origin.pause()" value="原始音源 暂停"><br>
<input type="button" onclick="audio.play()" value="滤波音质 播放">
<input type="button" onclick="audio.pause()" value="滤波音源 暂停">
<script type="text/javascript">
    var AudioContext = AudioContext || webkitAudioContext;
    var context = new AudioContext();
    var source = context.createMediaElementSource(audio);
    // 低通滤波节点（高频信号被过滤，听到的声音会很沉闷）
    var FilterNode = context.createBiquadFilter("lowpass");
    // sourceNode -> FilterNode -> destinationNode
    source.connect(FilterNode);
    FilterNode.connect(context.destination);
</script>

 +----------+------------------------------+
 | audio    |                              |
 +----------+                              |
 |     +--------+      //  +-------------+ |
 |     | Source |=====//==>| Destination | |
 |     +--------+  | //    +-------------+ |
 |                 |                       |
 +-----------------|-----------------------+
                   |   Created By Barret Lee
          +--------|-----+--------------------------+
          |        ↓                                |
          |     +--------+    +-------+    +------+ |
          |     | Source |===>| Nodes |===>| Dest | |
          |     +--------+    +-------+    +------+ |
          |                          +--------------+
          |                          | AudioContext |
          +--------------------------+--------------+

<h3>二、两个中间节点的介绍</h3>

<h4>1. ScriptProcessorNode</h4>

var processor=context.createScriptProcessor(4096, 1, 1);

processor.onaudioprocess = function(e){
    //获取输入和输出的数据缓冲区
    var input = e.inputBuffer.getChannelData(0);
    var output = e.outputBuffer.getChannelData(0);

    //将输入数缓冲复制到输出缓冲上
    for(var i = 0, len = input.length; i < len; i++){
        output[i] = input[i];
    }
}

interface AnalyserNode : AudioNode {

    // Real-time frequency-domain data 
    void getFloatFrequencyData(Float32Array array);
    void getByteFrequencyData(Uint8Array array);

    // Real-time waveform data 
    void getByteTimeDomainData(Uint8Array array);

    attribute unsigned long fftSize;
    readonly attribute unsigned long frequencyBinCount;

    attribute double minDecibels;
    attribute double maxDecibels;

    attribute double smoothingTimeConstant;

};

processor.onaudioprocess = function(e){
    //获取输入和输出的数据缓冲区
    var input = e.inputBuffer.getChannelData(0);

    doSomething(input);
};

//以fftSize为长度创建一个字节数组作为数据缓冲区
var output = new Uint8Array(analyser.fftSize);
// 将获取得到的数据赋值给 output
analyser.getByteTimeDomainData(output);

var width = canvas.width,
    height = canvas.height,
    g = canvas.getContext("2d");

// 将坐标原点移动到(0.5, height / 2 + 0.5)的位置
g.translate(0.5, height / 2 + 0.5);

processor.onaudioprocess=function(e){
    //获取输入和输出的数据缓冲区
    var input = e.inputBuffer.getChannelData(0);
    var output = e.outputBuffer.getChannelData(0);
    //将输入数缓冲复制到输出缓冲上
    for(var i=0; i
<p>下面是整个 DEMO 的代码，效果预览：</p>
<p><img src="https://images.cnitblog.com/blog/387325/201402/222051302848233.jpg" alt=""></p>
<p>代码：</p>

<canvas id="canvas" width="400" height="100"></canvas>

<audio id="audio" autoplay src="https://qianduannotes.duapp.com/file/tankWar.mp3"></audio> <br>

<input type="button" onclick="audio.play()" value="播放">

<input type="button" onclick="audio.pause()" value="暂停">

DEMO ```

<p>该段代码引自次碳酸钴的<a href="http://www.web-tinker.com/article/20498.html" target="_blank">博客</a>。</p>

<h3>五、小结</h3>

<p>本文着重讲述了 AudioContext 内部节点之间的交互原理，以及如何使用节点获取数据，关于图形的绘制是 canvas 的操作，不是本系列文章的重点，所以一笔带过。</p>

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

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