精华内容
下载资源
问答
  • h5 录音

    2017-08-10 20:33:00
    得益于前辈的分享,做了一个h5录音的demo。效果图如下: 点击开始录音会先弹出确认框: 首次确认允许后,再次录音不需要再确认,但如果用户点击禁止,则无法录音: 点击发送 将录音内容发送到对话框中。...

    得益于前辈的分享,做了一个h5录音的demo。效果图如下:

    点击开始录音会先弹出确认框:

    首次确认允许后,再次录音不需要再确认,但如果用户点击禁止,则无法录音:

    点击发送 将录音内容发送到对话框中。点击即可播放。点击获取录音即可下载最后一次的音频:

    播放下载都是围绕blob文件。播放就是让隐藏的audio标签的地址指向内存中的blob:

            this.play = function (audio,blob) {
                blob=blob||this.getBlob().blob;
                audio.src = URL.createObjectURL(blob);  
            };  
    createObjectURL 我们在用base64显示图片的时候也可以用到。
     img.src = URL.createObjectURL(blob);

    这样比一长串的字符串好看很多。同理如果你想销毁该地址对应的数据而节省内存可以这样:

     URL.revokeObjectURL(img.src);

    扯远了点。下载就是模拟a标签的点击。

       function downloadRecord(record){
                  var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
                    save_link.href = URL.createObjectURL(record);
                    var now=new Date;
                    save_link.download = now.Format("yyyyMMddhhmmss");
                    fake_click(save_link);
                }
    
           
                function fake_click(obj) {
                var ev = document.createEvent('MouseEvents');
                ev.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                obj.dispatchEvent(ev);
                }

    每次发送 ,其实是讲音频数据缓存下来,标记下id。下次点击的时候根据id获取缓存的数据,然后叫给audio元素播放:

    var msg={};
                //发送音频片段
                var msgId=1;
                function send(){
                    if(!recorder){
                        showError("请先录音");
                        return;
                    }
    
                   var data=recorder.getBlob();
                   if(data.duration==0){
                         showError("请先录音");
                        return;
                   }
                    msg[msgId]=data;
                    recorder.clear();
                    console.log(data);
                    var dur=data.duration/10;
                     var str="<div class='warper'><div id="+msgId+" class='voiceItem'>"+dur+"s</div></div>"
                    $(".messages").append(str);
                    msgId++;
                }
                
                $(document).on("click",".voiceItem",function(){
                    var id=$(this)[0].id;
                    var data=msg[id];
                    playRecord(data.blob);
                })

    内部是基于AudioContext实现:兼容性如下,基本上只能在谷歌和火狐浏览器里面玩。很可惜微信和ios目前不支持的。如果电脑没有音频驱动或者没有麦都会报错提示。

     

     有兴趣的朋友可以玩玩。未来移动端支持就更好了。

    源码:http://files.cnblogs.com/files/stoneniqiu/Voice.zip

    参考博客:

    展开全文
  • h5 录音功能的实现

    2018-12-18 13:30:48
    h5录音功能通过收集实现基于https的运行,对于http会报错
  • SpringBoot+html实现h5录音上传到后台,html录音是从网上下的,后台接收是自己写的,使用的SpringBoot框架
  • 值得庆幸的是微信的JSSDK提供了音频接口的支持,所以要在微信的H5页面中实现录音等功能,直接使用微信的API即可,兼容性也是妥妥的。下面说说在微信中使用录音接口的具体实现和其中的一些坑。前...

    HTML5原生是提供了音频录音的支持的,用到的是这个API--getUserMedia,然而……感人的是,iOS Safari & Safari 直接不支持,面对着庞大的水果系用户,这个方案显然行不通。值得庆幸的是微信的JSSDK提供了音频接口的支持,所以要在微信的H5页面中实现录音等功能,直接使用微信的API即可,兼容性也是妥妥的。下面说说在微信中使用录音接口的具体实现和其中的一些坑。

    前提

    用过微信JSSDK的童鞋都应该知道,使用它需要先在公众号上绑定安全域名、并且实现权限验证逻辑,具体细节可以参阅官方文档。做好了上述准备工作,在我们的页面中引入SDK的js,并且部署到安全域名下,即可调用API。

    接口列表

    开始录音接口

    wx.startRecord();

    停止录音接口

    wx.stopRecord({

    success: function (res) {

    var localId = res.localId;

    }

    });

    监听录音自动停止接口

    wx.onVoiceRecordEnd({

    // 录音时间超过一分钟没有停止的时候会执行 complete 回调

    complete: function (res) {

    var localId = res.localId;

    }

    });

    播放语音接口

    wx.playVoice({

    localId: '' // 需要播放的音频的本地ID,由stopRecord接口获得

    });

    暂停播放接口

    wx.pauseVoice({

    localId: '' // 需要暂停的音频的本地ID,由stopRecord接口获得

    });

    停止播放接口

    wx.stopVoice({

    localId: '' // 需要停止的音频的本地ID,由stopRecord接口获得

    });

    监听语音播放完毕接口

    wx.onVoicePlayEnd({

    success: function (res) {

    var localId = res.localId; // 返回音频的本地ID

    }

    });

    上传语音接口

    wx.uploadVoice({

    localId: '', // 需要上传的音频的本地ID,由stopRecord接口获得

    isShowProgressTips: 1, // 默认为1,显示进度提示

    success: function (res) {

    var serverId = res.serverId; // 返回音频的服务器端ID

    }

    });

    备注:上传语音有效期3天,可用微信多媒体接口下载语音到自己的服务器,此处获得的 serverId 即 media_id,参考文档 https://mp.weixin.qq.com/wiki... 目前多媒体文件下载接口的频率限制为10000次/天,如需要调高频率,请邮件weixin-open@qq.com,邮件主题为【申请多媒体接口调用量】,请对你的项目进行简单描述,附上产品体验链接,并对用户量和使用量进行说明。

    下载语音接口

    wx.downloadVoice({

    serverId: '', // 需要下载的音频的服务器端ID,由uploadVoice接口获得

    isShowProgressTips: 1, // 默认为1,显示进度提示

    success: function (res) {

    var localId = res.localId; // 返回音频的本地ID

    }

    });

    实现长按录音和保存上传录音

    长按录音的关键代码:

    var btnRecord = $('#record');

    btnRecord.on('touchstart', function(event) {

    event.preventDefault();

    btnRecord.addClass('hold');

    startTime = new Date().getTime();

    // 延时后录音,避免误操作

    recordTimer = setTimeout(function() {

    wx.startRecord({

    success: function() {

    },

    cancel: function() {

    alert('用户拒绝授权录音');

    }

    });

    }, 300);

    }).on('touchend', function(event) {

    event.preventDefault();

    btnRecord.removeClass('hold');

    // 间隔太短

    if (new Date().getTime() - startTime < 300) {

    startTime = 0;

    // 不录音

    clearTimeout(recordTimer);

    } else { // 松手结束录音

    wx.stopRecord({

    success: function(res) {

    localId = res.localId;

    // 上传到服务器

    uploadVoice();

    },

    fail: function(res) {

    alert(JSON.stringify(res));

    }

    });

    }

    });

    上传录音的关键代码:

    //上传录音

    function uploadVoice(){

    //调用微信的上传录音接口把本地录音先上传到微信的服务器

    //不过,微信只保留3天,而我们需要长期保存,我们需要把资源从微信服务器下载到自己的服务器

    wx.uploadVoice({

    localId: voice.localId, // 需要上传的音频的本地ID,由stopRecord接口获得

    isShowProgressTips: 1, // 默认为1,显示进度提示

    success: function (res) {

    //把录音在微信服务器上的id(res.serverId)发送到自己的服务器供下载。

    $.ajax({

    url: '后端处理上传录音的接口',

    type: 'post',

    data: JSON.stringify(res),

    dataType: "json",

    success: function (data) {

    alert('文件已经保存到自己的服务器');

    },

    error: function (xhr, errorType, error) {

    console.log(error);

    }

    });

    }

    });

    }

    微信的录音只能通过localId上传到微信服务器,然后通过localId从微信服务器上进行下载,文件只会在服务器上保存3天,格式是arm格式,所以一般还需要通过自己的服务器将文件下载下来保存转码,具体细节查阅文档。

    我们在做例如录音贺卡等H5页面时,就需要在自己的服务器下载录音转码成mp3,然后收到贺卡的用户是通过在我们的服务器中获取mp3路径来收听录音的。

    小细节处理

    阻止默认事件

    按钮的touch事件记得加 event.preventDefault();

    防止长按文字被选中出现复制框

    使用css设置按钮 user-select:none;

    避免授权弹窗导致touchend事件无法触发,一直不能结束录音

    用户第一次触发录音时,会弹出授权窗口,这时会导致无法触发touchend事件,导致录音一直无法中断。解决的办法是,进入页面时自动触发一次录音弹出授权,之后真正录音时就不需要授权了。 // 用localStorage进行记录,之前没有授权的话,先触发录音授权,避免影响后 续交互

    if (!localStorage.allowRecord || localStorage.allowRecord !== 'true') {

    wx.startRecord({

    success: function() {

    localStorage.allowRecord = 'true';

    // 仅仅为了授权,所以立刻停掉

    wx.stopRecord();

    },

    cancel: function() {

    alert('用户拒绝授权录音');

    }

    });

    }

    脑洞

    是否能利用录音接口实现类似“八分音符”这种麦克风游戏呢?目前微信的录音api更适合做录音类,像“八分音符”这种需要实时获取当前声音数据的交互还实现不了,因为我们仅仅能获得一个音频的id,不像原生H5接口那样能拿到音频的数据信息。

    展开全文
  • 录音功能的实现,针对于https可以使用的一个优秀文案代码
  • 微信H5录音实现

    千次阅读 2019-07-11 23:36:55
    前提 用过微信JSSDK的童鞋都应该知道,使用它需要先在公众号上绑定安全域名、并且实现权限验证逻辑,具体细节... 开始录音接口 wx.startRecord(); 停止录音接口 wx.stopRecord({ success: function (r...

    前提

    用过微信JSSDK的童鞋都应该知道,使用它需要先在公众号上绑定安全域名、并且实现权限验证逻辑,具体细节可以参阅官方文档。做好了上述准备工作,在我们的页面中引入SDK的js,并且部署到安全域名下,即可调用API。

    接口列表

    • 开始录音接口

    wx.startRecord();
    • 停止录音接口

    wx.stopRecord({
        success: function (res) {
            var localId = res.localId;
        }
    });
    • 监听录音自动停止接口

    wx.onVoiceRecordEnd({
        // 录音时间超过一分钟没有停止的时候会执行 complete 回调
        complete: function (res) {
            var localId = res.localId; 
        }
    });
    • 播放语音接口

    wx.playVoice({
        localId: '' // 需要播放的音频的本地ID,由stopRecord接口获得
    });
    • 暂停播放接口

    wx.pauseVoice({
        localId: '' // 需要暂停的音频的本地ID,由stopRecord接口获得
    });
    • 停止播放接口

    wx.stopVoice({
        localId: '' // 需要停止的音频的本地ID,由stopRecord接口获得
    });
    
    • 监听语音播放完毕接口

    wx.onVoicePlayEnd({
        success: function (res) {
            var localId = res.localId; // 返回音频的本地ID
        }
    });
    • 上传语音接口

    wx.uploadVoice({
        localId: '', // 需要上传的音频的本地ID,由stopRecord接口获得
        isShowProgressTips: 1, // 默认为1,显示进度提示
            success: function (res) {
            var serverId = res.serverId; // 返回音频的服务器端ID
        }
    });

    备注:上传语音有效期3天,可用微信多媒体接口下载语音到自己的服务器,此处获得的 serverId 即 media_id,参考文档 https://mp.weixin.qq.com/wiki... 目前多媒体文件下载接口的频率限制为10000次/天,如需要调高频率,请邮件weixin-open@qq.com,邮件主题为【申请多媒体接口调用量】,请对你的项目进行简单描述,附上产品体验链接,并对用户量和使用量进行说明。

    • 下载语音接口

    wx.downloadVoice({
        serverId: '', // 需要下载的音频的服务器端ID,由uploadVoice接口获得
        isShowProgressTips: 1, // 默认为1,显示进度提示
        success: function (res) {
            var localId = res.localId; // 返回音频的本地ID
        }
    });

    实现长按录音和保存上传录音

    长按录音的关键代码:

    var btnRecord = $('#record');
    btnRecord.on('touchstart', function(event) {
        event.preventDefault();
        btnRecord.addClass('hold');
        startTime = new Date().getTime();
        // 延时后录音,避免误操作
        recordTimer = setTimeout(function() {
            wx.startRecord({
                success: function() {
                },
                cancel: function() {
                    alert('用户拒绝授权录音');
                }
            });
        }, 300);
    }).on('touchend', function(event) {
        event.preventDefault();
        btnRecord.removeClass('hold');
        // 间隔太短
        if (new Date().getTime() - startTime < 300) {
            startTime = 0;
            // 不录音
            clearTimeout(recordTimer);
        } else { // 松手结束录音
            wx.stopRecord({
                success: function(res) {
                    localId = res.localId;
                    // 上传到服务器
                    uploadVoice();
                },
                fail: function(res) {
                    alert(JSON.stringify(res));
                }
            });
        }
    });

    上传录音的关键代码:

    //上传录音
    function uploadVoice(){
        //调用微信的上传录音接口把本地录音先上传到微信的服务器
        //不过,微信只保留3天,而我们需要长期保存,我们需要把资源从微信服务器下载到自己的服务器
        wx.uploadVoice({
            localId: voice.localId, // 需要上传的音频的本地ID,由stopRecord接口获得
            isShowProgressTips: 1, // 默认为1,显示进度提示
            success: function (res) {
                //把录音在微信服务器上的id(res.serverId)发送到自己的服务器供下载。
                $.ajax({
                    url: '后端处理上传录音的接口',
                    type: 'post',
                    data: JSON.stringify(res),
                    dataType: "json",
                    success: function (data) {
                        alert('文件已经保存到自己的服务器');
                    },
                    error: function (xhr, errorType, error) {
                        console.log(error);
                    }
                });
            }
        });
    }

    微信的录音只能通过localId上传到微信服务器,然后通过localId从微信服务器上进行下载,文件只会在服务器上保存3天,格式是arm格式,所以一般还需要通过自己的服务器将文件下载下来保存转码,具体细节查阅文档

    我们在做例如录音贺卡等H5页面时,就需要在自己的服务器下载录音转码成mp3,然后收到贺卡的用户是通过在我们的服务器中获取mp3路径来收听录音的。

    小细节处理

    • 阻止默认事件

    按钮的touch事件记得加 event.preventDefault();
    • 防止长按文字被选中出现复制框

    使用css设置按钮 user-select:none;
    • 避免授权弹窗导致touchend事件无法触发,一直不能结束录音

      用户第一次触发录音时,会弹出授权窗口,这时会导致无法触发touchend事件,导致录音一直无法中断。解决的办法是,进入页面时自动触发一次录音弹出授权,之后真正录音时就不需要授权了。

      // 用localStorage进行记录,之前没有授权的话,先触发录音授权,避免影响后 续交互
      if (!localStorage.allowRecord || localStorage.allowRecord !== 'true') {
          wx.startRecord({
              success: function() {
                  localStorage.allowRecord = 'true';
                  // 仅仅为了授权,所以立刻停掉
                  wx.stopRecord();
              },
              cancel: function() {
                  alert('用户拒绝授权录音');
              }
          });
      }
    展开全文
  • 文章目录一、Recorder H5录音库的特性(1)浏览器支持(2)功能支持二、使用预览截图(1)移动端H5(2)IOS Hybrid App(3)Android Hybrid App三、应用场景四、优化过程记录(1)为什么要升级优化(2)开始使用Web ...

    Recorder H5 GitHub开源库随着支持功能的增多,音频转码处理效率渐渐的跟不上需求了,近期抽时间对音频转码部分进行了升级优化,以支持更多实用的功能。
    另外IOS的Hybrid App也完成了移植,Android和IOS都有了Demo App。

    在线测试,GitHub地址:https://github.com/xiangyuecn/Recorder

    一、Recorder H5录音库的特性

    (1)浏览器支持

    1. PC:包括但不限于ChromeFirefox
    2. Android:ChromeFirefoxAndroid WebView腾讯Android X5内核(QQ、微信) (不支持UC系列浏览器,如:UC、支付宝、大部分国产手机厂商的浏览器)
    3. IOS:Safari微信(JsSDK)
    4. Hybrid App:提供Android、IOS端App的JsBridge接口进行对接即可

    (2)功能支持

    1. 已提供mp3 wav ogg(beta) webm(beta) amr(beta)格式支持,支持任意格式扩展
    2. 提供实时音量反馈
    3. 提供一个美观的实时波形绘制扩展插件
    4. 录音权限请求和录音功能分开设计,可先请求权限,在需要的时候开始录音
    5. mp3格式录音文件默认2kb大小/秒,语音音质尚可,再降低音质可小到1kb/秒
    6. 【新】 mp3 wav格式转码“迅速”,结束录音时几乎可立即得到音频文件,另外可实现边录边转码成小语音片段文件实时上传服务器
    7. 提供功能丰富的Demo,支持浏览器在线测试,【新】 提供Android(15+) Hybrid App安装包和源码,【新】 提供IOS(9.0+) Hybrid App源码供自行编译

    二、使用预览截图

    (1)移动端H5

    移动端H5

    (2)IOS Hybrid App

    IOS Hybrid App

    (3)Android Hybrid App

    Android Hybrid App

    三、应用场景

    • 移动端、PC端H5录音
    • 移动端、PC端H5发送语音
    • 移动端、PC端H5语音识别
    • 移动端、PC端H5语音聊天

    四、优化过程记录

    (1)为什么要升级优化

    最开始写Recorder的时候,只追求简短的语音录制,因此采用的是录音结束后一次性进行异步(setTimeout分片)转码,1分钟语音在pc端转码MP3花费100-300ms,移动端花费600-1500ms,体验上延迟不算大,并且代码逻辑很简单;如果使用Web Worker(多线程),几乎可以做到没有延迟,但代码似乎会复杂很多,就没有采用。

    后面实际使用过程中发现:

    1. 稍微长点的语音转码移动端非常吃力,2、3分钟的语音要花费5、10秒进行MP3转码;
    2. 进行实时转码发送给服务器时,除了wav格式本身编码非常迅速外,其他格式一律会导致录音卡顿,原因是编码占用了太多的时间,编码期间的录音数据无法正常接收。

    基于以上两点问题,似乎只有Web Worker(多线程)能够解决。

    (2)开始使用Web Worker加速转码

    “加速”是要加引号的,其实开启了Web Worker支持,转码速度还是一样的速度,只是转码工作放到了后台线程,不占用页面的时间而已。

    但可以做到边录音边转码,不需要等到录音结束时扎堆转码,结果就是不管录制的语音有多长,结束录音时转码都是瞬间完成的。

    也可以完美的做到实时进行转码成小语音片段文件上传到服务器,因为转码不占用网页的时间了,录音可以正常的接收数据,不会产生卡顿。

    (3)剩下的问题

    要支持边录边转码,并非仅仅开启Web Worker支持就可以了,还必须要有音频编码器的支持。如果编码器只能将完整的PCM数据一次性的转码成音频文件,那么就需要修改编码器源码,用来支持流式的转码,来一段PCM转一段。

    还好库里的MP3编码器是支持流式的,不需要改动就能用;不过其他的格式不改编码器源码似乎无法去支持;wav格式除外,wav编码速度出奇的快,不用优化也是没有问题的。

    因此目前MP3格式使用了Web Worker,MP3和wav格式都支持边录边转码,其他格式依旧是结束录音时异步(setTimeout分片)转码。

    五、Hybrid App存在的意义

    本身是无意义的(或者说纯粹是多余的),但无奈IOS各种不支持:非官方浏览器不支持、App内WebView不支持,但Android又各种都支持,本来纯粹的H5一把梭(包括在Hybrid App中)是最方便的,苹果要拖后腿也没办法。

    因此仅需在IOS的Hybrid App上做兼容即可,但考虑到简化js端的复杂性(出问题了好甩锅),不管是Android还是IOS都实现一下可能会简单很多;另外Android和IOS的音频编码并非易事,且不易更新,使用js版的音频转码可大大简化App的逻辑;所以Android端也提供Hybrid App支持。

    六、更多支持

    GitHub仓库内有所有的源代码,有详细的使用介绍和Demo,有使用交流群,如果使用过程中有什么问题可以提issue或发消息。要是能打赏支持就更好了,仓库内有二维码。哈哈嘿~ GitHub地址:https://github.com/xiangyuecn/Recorder

    展开全文
  • 需求描述制作一个H5页面,打开之后可以录音,并将录音文件提交至后台微信录音最长时长为1min代码如下// isVoice: 0-未录音 1-录音中 2-录完音// 点击录音/录音中 按钮展示点击录音 // isListen // 0-未试听/试听...
  • 完全依赖H5原生API所涉及的API:WebRTC、AudioContext、Worker、Video/Audio API、Blob、URL 兼容性 Chrome、FF、Edge、QQ、360(注:目前IE和Safari全版本不兼容)其中Chrome47以上以及QQ浏览器强制要求HTTPS的支持...
  • H5录音及保存到后台recorder.js实现

    万次阅读 2019-01-23 20:44:49
    插件地址:... ... 1.先进入测试地址测试浏览器是否可以进行录音 2.下载插件 在html页面引入src目录下的recorder-core.js、mp3.js、mp3-engine.js html页面创建好标签触发事件例如onclick...
  • 得益于前辈的分享,做了一个h5录音的demo。效果图如下: 点击开始录音会先弹出确认框: 首次确认允许后,再次录音不需要再确认,但如果用户点击禁止,则无法录音: 点击发送 将录音内容发送到对话框中。...
  • https://github.com/2fps/recorder
  • 虽然目前只用在了我的H5录音库里面当做实时的音频展示,但移植到别的语言还是很轻松的,因为他们的源码都没有用到浏览器特有的东西。 测试地址: https://xiangyuecn.github.io/Recorder/assets/工具-代码运行和...
  • FrequencyHistogramView音频可视化频率直方图显示 此功能源码:frequency.... 虽然目前只用在了我的H5录音库里面当做实时的音频展示,但移植到别的语言还是很轻松的,因为他们的源码都没有用到浏览器特有的东西。
  • HTML5原自就示加近己好效标近己好效标近己好效标近生是提供了...值得庆幸的是微信的JSSDK提供了音频接口的支持,所以要在微信的H5页面中实现录音等功能,直接使用微信的API即可,兼容性也是妥妥的。下面说说在微信中...
  • 目录 一、Recorder H5录音库的特性 (1)浏览器支持 (2)功能支持 二、使用预览截图 (1)移动端H5 (2)IOS Hybrid App (3)Android Hybrid App ...
  • H5网页录音

    2018-11-13 17:04:18
    支持Html5网页录音,格式为wav,单声道,采样率为16000,亲测可用!
  • recoder压缩包 h5实现录音代码
  • H5解决录音

    2017-09-07 17:53:11
    于Chrome47以上以及QQ浏览器需要HTTPS的支持,所以烦请更换至360、FF、Edge进行体验,另IE和Safari全版本不支持录音功能
  • h5使用audio标签录音

    千次阅读 2017-10-25 17:17:05
    今天在测试语音分析是发现h5录音解析,在第六条之后录音都是相同的,开始保存录音使用的是 CommonsMultipartFile uploadFile = (CommonsMultipartFile) audioData;  FileItem item = uploadFile.getFileItem(); ...
  • H5 实现录音功能

    万次阅读 2019-03-07 16:26:34
    最近接收H5 实现语音聊天,然后嵌入到安卓原生里面去。具体效果如图 1 在开发过程遇到很多坑,首先这个网页在本地上运行是可以录音的,部署到到服务器就不行了,研究了半天才知道需要安全链接访问才访问浏览器的...
  • h5 web录音并上传后端

    2018-03-01 15:49:16
    这是一个使用h5在web浏览器录音,并提交到后端的demo,若想上传按钮有效,则需要在wen容器下启,因为上传中使用了ajax。
  • Js H5 Web 录音

    2018-07-15 16:24:20
    需要以localhost:8080的方式来启动本页面才能录音. 可以使用tomcat Apache phpstudy来启动本页面. chrom firfox 测试没问题 其他浏览器不知道.默认ie不行. 上传的目的是为了找不到资源.不想存书签.想设置0分,但最少1...
  • 录音之所以放在移植的最后一个章节讲,主要是因为需要修改原生H5 录音的JS,并在JS中调用Android,Android处理完成后,还要调用js,过程比较复杂。 三、步骤 1、在Android中先实现录音功能,VoiceMgr.java代码...
  • 首先H5录音功能的话 对于普通H5网上是有很多的方法 插件 但是兼容性很差 特别是对于ios 一开始想的是用H5 做个通用的 但是一圈下来 发现兼容性就很难受 好在项目是基于微信公众号 放弃使用普通H5的想法 转战使用...
  • h5实现录音功能

    千次阅读 2020-02-20 17:47:22
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...录音</title> <link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0...
  • H5 pc端录音功能

    2019-07-10 14:02:01
    点击录音按钮时,弹出录音框,实现开始录音,录音试听,确认本次录音,将本次录音内容传递给第二个audio标签 import React, { Component } from 'react'; import "./index.less"; let recorder; class Audio extends ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,076
精华内容 830
关键字:

H5录音