出来。而支持 audio 标签的浏览器会忽略标签内任何文本。我们还可以为他加上 autoplay 、loop 等属性，使音频在进入页面之后立即循环播放。
<audio autoplay="autoplay" controls="controls" src="http://qianduannotes.duapp.com/file/tankWar.mp3"> 浏览器不支持 audio 标签。 </audio>运行代码
controls 属性是用来控制显示音频文件的控制部分的。默认未设置 controls 属性。
2. webRTC mediaStream Media Capture (多谢@Hehe123提醒,RTC属于通信了，此处只是获取 media 流)
利用 getUserMedia 拿到本地的音频流。
// 前缀处理 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("出了点问题~ 是否在服务器环境下运行？"); });
这里需要注意的是，使用 webRTC 需要在服务器环境下，你可以搭建一个本地服务器，也可以把代码上传到远程服务器上测试。
3. FileSystem
选择本地文件，读取音频流，拿到 Blob 流地址，送入 audio 中
<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>运行代码
4. 移动设备，还可以使用如下方式
1）HTML Media Capture
<input type="file" accept="audio/*;capture=microphone">
2）device 元素
<device type="media" onchange="update(this.data)"></device> <audio autoplay></video> <script> function update(stream) { document.querySelector('audio').src = stream.url; } </script>
5. 从键盘获取
本质并不是从键盘获取，而是通过键盘获取到我们设定的频率值，然后通过程序创建一段音频。如下面的程序：
下面例子中可以按键盘上中间的一排按键（A到K）来发出不同的声音。
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(); });运行代码
这段代码引自次碳酸钴的博客.
三、小结
本文是个介绍性的文章，提到了 Web Audio API 的相关知识，以及如何在你的 web 程序中引入 音频流。没有写相关 demo，感兴趣的童鞋可以复制代码自己去测试，在后续文章中会给出测试 DEMO。
四、参考文章
- http://www.csdn.net/article/2013-07-10/2816178-Web-Audio-API-Firefox CSND
- https://hacks.mozilla.org/2013/07/web-audio-api-comes-to-firefox/ Mozilla
- http://www.html5rocks.com/en/tutorials/webaudio/intro/#toc-contexthtml5rocks
- http://www.w3.org/TR/webaudio/ W3 Group
- http://www.web-tinker.com/article/20497.html 次碳酸钴
本文转自Barret Lee博客园博客，原文链接：http://www.cnblogs.com/hustskyking/p/webAudio-listen.html，如需转载请自行联系原作者
