<option id="tpnx7"><p id="tpnx7"><pre id="tpnx7"></pre></p></option>
<output id="tpnx7"></output>
<output id="tpnx7"><ruby id="tpnx7"></ruby></output>
    <output id="tpnx7"></output><acronym id="tpnx7"><button id="tpnx7"><div id="tpnx7"></div></button></acronym><code id="tpnx7"><menuitem id="tpnx7"></menuitem></code>

    首页 > 上网技巧 > 电脑小技巧 > 纯JS实现WEB端网页录音与播放功能

    纯JS实现WEB端网页录音与播放功能

    时间:2019-04-13 10:10 作者:QQ地带 我要评论

     a纯js实现web端录音功能,功能并不是特别多,逐步增加中,详细地址:github。

    getUserMedia在非localhost和127的情况下,需要开启https,由于腾讯云的没备案,demo就不放了,可以自行获取代码并启动测试。
    实现方式
    实现原理的话,主要是以下三点,
     
    利用webrtc的getUserMedia方法获取设备音频输入,使用audioprocess得到音频流(pcm流,范围-1到1)。
    转码,利用前端中的ArrayBuffer等二进制操作按采样位数处理流信息。
    使用decodeAudioData转码arraybuffer到audioBuffer并播放(小文件,大文件使用audio)。
     
    使用方式
    script方式
    直接引入dist下的recorder.js?#32431;?/div>
    let recorder = new Recorder();
    npm方式
    安装:
    npm i js-audio-recorder
    调用:
    import Recorder from ‘js-audio-recorder’;
     
    let recorder = new Recorder();
    API
    基本方法
    // 开始录音
    recorder.start();
    // 暂停录音
    recorder.pause();
    // 继续录音
    recorder.resume()
    // 结束录音
    recorder.stop();
    // 录音播放
    recorder.play();
    // 销毁录音实例,释放资源,fn为回调函数,
    recorder.destroy(fn);
    recorder = null;
    ?#30053;?/u>功能
    // ?#30053;豴cm文件
    recorder.downloadPCM();
    // ?#30053;豾av文件
    recorder.downloadWAV();
    // 重命名pcm文件,wav也支持
    recorder.downloadPCM(‘重命名’);
    获取录音时长
    // 回调?#20013;?#36755;出时长
    recorder.onprocess = function(duration) {
    console.log(duration);
    }
    // 手动获取录音时长
    console.log(recorder.duration);
    默认配置
    sampleBits,采样位数,默认是16 sampleRate,采样频率,浏览器默认的,我的chrome是48000 numChannels,声道数,默认是1
    传入参数
    new Recorder时支持传入参数,
    {
    sampleBits: 16, // 采样位数,范围8或16
    sampleRate: 16000, // 采样率,范围11025、16000、22050、24000、44100、48000
    numChannels: 1, // 声道,范围1或2
    }
    注意
    使用127.0.0.1或localhost尝试,因为getUserMedia在高版本的chrome下需要使用https。
    兼容性
    主要是以?#24405;?#20010;方面:
    Web Audio Api
    https://caniuse.com/#search=w…
    getUserMedia
    https://caniuse.com/#search=g…
    Typed Arrays
    https://caniuse.com/#search=t…
    欢迎访问和查看:recorder。
    其他资源
    基于阿里云实现简单的语音识别功能web Audio学习与音频播放web Audio实现pcm音频数据收集js实现pcm数据编码js转化pcm到wav格式与播放

    标签: JS
    顶一下
    (0)
    0%
    踩一下
    (0)
    0%

    Google提供的广告

    广东十分快乐开奖结果
    <option id="tpnx7"><p id="tpnx7"><pre id="tpnx7"></pre></p></option>
    <output id="tpnx7"></output>
    <output id="tpnx7"><ruby id="tpnx7"></ruby></output>
    <output id="tpnx7"></output><acronym id="tpnx7"><button id="tpnx7"><div id="tpnx7"></div></button></acronym><code id="tpnx7"><menuitem id="tpnx7"></menuitem></code>

    <option id="tpnx7"><p id="tpnx7"><pre id="tpnx7"></pre></p></option>
    <output id="tpnx7"></output>
    <output id="tpnx7"><ruby id="tpnx7"></ruby></output>
    <output id="tpnx7"></output><acronym id="tpnx7"><button id="tpnx7"><div id="tpnx7"></div></button></acronym><code id="tpnx7"><menuitem id="tpnx7"></menuitem></code>

    彩票销售站 彩票历史查询器 江苏快3走势图 南昌彩票投注站 澳门赌场十八桑拿 星河娱乐城网络赌场 安徽25选5昨天开奖号码 吉林快三跨度图 广西快乐10分开结果 壮元红心水论坛 澳洲幸运5开奖直播 5尾中特 幸运五分彩官网 上海时时彩下载 快3基本走势