仓库源文，站点原文

title: 让音乐响起来 categories:

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

var context;
try{
    window.AudioContext = window.AudioContext || window.webkitAudioContext;
    context = new AudioContext();
}
catch(e) {
    alert('请更新至最新版的 Chrome 或者 Firefox');
}

<h3>二、音频流的获取</h3>

<h4>1. 标签引入</h4>

<audio autoplay src="http://qianduannotes.duapp.com/file/tankWar.mp3">
    浏览器不支持 audio 标签。
</audio>

<audio autoplay="autoplay" controls="controls" src="http://qianduannotes.duapp.com/file/tankWar.mp3">
    浏览器不支持 audio 标签。
</audio>

// 前缀处理
window.AudioContext = window.AudioContext ||
                  window.webkitAudioContext;
navigator.getUserMedia =  navigator.getUserMedia ||
                      navigator.webkitGetUserMedia ||
                      navigator.mozGetUserMedia ||
                      navigator.msGetUserMedia;

var context = new AudioContext();

navigator.getUserMedia({audio: true}, function(stream) {
  // 获取本地流送入 AudioContext
  var microphone = context.createMediaStreamSource(stream);

  // filter为一个中间处理器，用来过滤音频
  var filter = context.createBiquadFilter();

  // microphone -> filter -> destination.
  microphone.connect(filter);
  filter.connect(context.destination);
}, function(){
    console.log("出了点问题~ 是否在服务器环境下运行？");
});

<input type="file" onchange="return run(this.files);"><br><br>
<audio controls id="audio"></audio>
<script type="text/javascript">
    function run(files){
        var blob = window.webkitURL.createObjectURL(files[0]);
        audio.src = blob;
        audio.autoplay = "autoplay";
    }
</script>

<h4>4. 移动设备，还可以使用如下方式</h4>

<input type="file" accept="audio/*;capture=microphone">

<device type="media" onchange="update(this.data)"></device>
<audio autoplay>
<script>
  function update(stream) {
    document.querySelector('audio').src = stream.url;
  }
</script>

</audio>

<h4>5. 从键盘获取</h4>

var AudioContext=AudioContext||webkitAudioContext;
var context=new AudioContext;
//为每个键盘位对应一个频率
var s={65:256,83:288,68:320,70:341,71:384,72:426,74:480,75:512};
//为每个频率创建一个Oscillator
for(var i in s)
  value=s[i],
  s[i]=context.createOscillator(),
  s[i].frequency.value=value,
  s[i].start();
//键盘按下时将相应频率的Oscillator连接到输出源上
addEventListener("keydown",function(e){
  if(e=s[e.keyCode])e.connect(context.destination);
});
//键盘松开时将相应频率的Oscillator的连接取消
addEventListener("keyup",function(e){
  if(e=s[e.keyCode])e.disconnect();
});

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

<h3>三、小结</h3>

<p>本文是个介绍性的文章，提到了 Web Audio API 的相关知识，以及如何在你的 web 程序中引入 音频流。没有写相关 demo，感兴趣的童鞋可以复制代码自己去测试，在后续文章中会给出测试 DEMO。</p>

<h3>四、参考文章</h3>