HTML5获取麦克风音频,输出到扬声器

最新推荐文章于 2025-10-16 08:19:09 发布

原创最新推荐文章于 2025-10-16 08:19:09 发布 · 2.2w 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#HTML5 #AudioContext

HTML5 专栏收录该内容

2 篇文章

订阅专栏

这篇博客介绍了如何在HTML5中使用AudioContext接口获取麦克风输入的音频，并将其实时输出到扬声器，已在Chrome浏览器上成功测试。

本例子在谷歌浏览器上测试通过！

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5获取麦克风音频,输出到扬声器</title>
	<meta charset="UTF-8">
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
		var audioCtx;
		try
		{
			audioCtx=new (window.AudioContext || window.webkitAudioContext)();
		}
		catch(e)
		{
			console.log("Your browser does not support AudioContext!");
		}
    	navigator.getUserMedia=(navigator.getUserMedia || navigator.webkitGetUserMedia || 
								navigator.mozGetUserMedia || navigator.msGetUserMedia);
		if(navigator.getUserMedia) 
		{
			navigator.getUserMedia(
      		{
      			audio:true
      		},
      		function(stream)
      		{
      			var source=audioCtx.createMediaStreamSource(stream);
          		var biquadFilter=audioCtx.createBiquadFilter();
          		biquadFilter.type="lowshelf";
          		biquadFilter.frequency.value=1000;
          		biquadFilter.gain.value=25;
          		source.connect(biquadFilter);
          		biquadFilter.connect(audioCtx.destination);
         	},
      		function(err)
      		{
      			console.log("The following gUM error occured: "+err);
      		});
      	}
      	else 
      	{
      		console.log("getUserMedia not supported on your browser!");
      	}
    </script>
  </head>
  <body>
    This is my HTML page. <br>
  </body>
</html>