web端audio-context进行音频采集和播放

web audio 使用audiocontext进行声音的采集播放以及一些音效操作：

1 学习网站

https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/getUserMedia

https://developer.mozilla.org/zh-CN/docs/Web/API/AudioContext

2准备工作

下载小而美H5编辑器，Hbulider.用于代码编辑和运行测试；

下载瑞昱高清晰音频管理器，用于保证麦克风扬声器可调式可用；

3 代码

 

 

 

 

以下代码是麦克风采集直接回环播放的；注意目前由于对web 不甚了解，改代码要在调试模式下，获取媒体输入许可后，才正常；直接浏览器运行，允许麦克风后，好像还是会报无法获取媒体输入许可；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>web音频采集播放audio-context</title>
    </head>
    <body>
        <button onclick="startRecord()">start麦克风采集</button>
        <button onclick="stopRecoed()">stop麦克风采集</button>
        <button onclick="startPlay()">startplayAudioFile</button>
        <button onclick="stopPlay()">stopplayAudio</button>
    </body>
    
    <script>
        function startRecord()
        {
            //窗口约束
            var constrains1 = window.constrains={
                
                /*请求的音频和视频参数,用于说明请求的媒体类型。
                必须至少一个类型或者两个同时可以被指定。
                如果浏览器无法找到指定的媒体类型或者无法满足相对应的参数要求，
                那么返回的 Promise 对象就会处于 rejected［失败］状态，
                NotFoundError作为 rejected［失败］回调的参数*/
                
                audio: {
                    sampleRate: 44100, // 采样率
                    channelCount: 2,   // 声道
                    volume: 2.0        ,// 音量 
                    },
                video:false
            }
            //会提示用户给予使用媒体输入的许可,媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道
            navigator.mediaDevices.getUserMedia(constrains1).
            then(function(mediaStream){
                //1 MediaStream 接口是一个媒体内容的流。一个流包含几个轨道，比如视频和音频轨道。
                Window.mediaStream =mediaStream;
                console.log(mediaStream);
                
                //2 创建音频上下文,AudioContext接口表示由链接在一起的音频模块构建的音频处理图
                var AudioContext = window.AudioContext || window.webkitAudioContext;
                var audioCtx = new AudioContext();
                
                //3 创建音频媒体源节点
                /*createMediaStreamSource() 方法用于创建一个新的 MediaStreamAudioSourceNode 对象，
                需要传入一个媒体流对象 (MediaStream 对象)
                (可以从 navigator.getUserMedia 获得 MediaStream 对象实例),
                 然后来自 MediaStream 的音频就可以被播放和操作*/
                var audioMediaSourceNode =  audioCtx.createMediaStreamSource(mediaStream);
                window.mediaSOurceNode = audioMediaSourceNode;//记录临时变量（Window 对象是全局对象）
                //4 创建滤波器,返回一个滤波器节点
                /*滤波器种类很多，如gainNode,convolver等，详见audiocontext文档*/
                //var FilterOneNode = audioCtx.createBiquadFilter();
                //FilterOneNode.type = "lowshelf";//low shelf滤波器就是高频部分直通,低频部分可调
                //FilterOneNode.frequency.value = 100;
            
                
                //5 节点连接；起点连接到终点，采集的数据会直接播放输出；
                audioMediaSourceNode.connect(audioCtx.destination);
                
                
            }).catch(function(err){
                console.error(err);
                //注意这里，如果你是使用IDE开发的，可能不会弹出是否允许麦克风使用权限的弹框，导致报错；
                //请直接到浏览器测试
                alert("获取输入媒体许可失败",err);
            });
            alert("启动CAP成功");
        }
        
        function stopRecoed()
        {
            window.mediaSOurceNode.disconnect();
            if (window.mediaStream == null || window.mediaStream.getAudioTracks() == null || window.mediaStream.getAudioTracks().length == 0) {
                alert("媒体源或者轨道为空")
                return;}
               
            window.mediaStream.getAudioTracks()[0].stop();
            alert("停止CAP成功")
        }
        function startPlay()
        {
            alert("启动播放成功")
        }
        function stopPlay()
        {
            alert("停止播放成功")
        }
    </script>
</html>

 

posted on 2023-04-14 19:10  邗影  阅读(516)  评论(0)  编辑  收藏  举报

导航