精华内容
下载资源
问答
  • 运用云开发技术,可实现微信小程序云端录音采集、停止采集并上传录音、播放录音、播放上一条下一条录音功能。
  • 小程序小程序录音功能的开发

    千次阅读 2018-12-23 15:26:29
    最近做了一个新年贺卡项目,项目除了平常的选择贺卡和祝福语以外,还多了一项:录下自己的祝福语音。...其中,RecorderManager是全局唯一的录音管理器,比如我们要录音,首先要全局环境中创建一个管理器。 let RM =...

    最近做了一个新年贺卡项目,项目除了平常的选择贺卡和祝福语以外,还多了一项:录下自己的祝福语音。这就有一丢丢为难我了,毕竟没写过,想着前同事写的时候好像踩了不少坑,我也担心我会踩坑。不过,真上手写了,发现好像还不难。

    首先,我们在官网文档中找到与录音有关的api,

    其中,RecorderManager是全局唯一的录音管理器,比如我们要录音,首先要全局环境中创建一个管理器。

        let RM = wx.getRecorderManager();
    

    创建好录音管理器后,就可以开始录音了。当然,录音是需要获得权限了,我在测试的时候,发现,有了录音开始的方法的话,不用写自动弹出录音授权的窗口,不然会弹出两个同意授权的窗口,那样看着真的相当的尴尬。

    开始录音

    let option = {
        duration:10000,     //录音的时长,之前最大值好像只有1分钟,现在最长可以录音10分钟
        format:'mp3',         //录音的格式,有aac和mp3两种   
    }
        RM.start(option);//开始录音   这么写的话,之后录音得到的数据,就是你上面写得数据。
        RM.onStart(()=>{
        console.log('录音开始事件')    这个方法是录音开始事件,你可以写录音开始的时候图片或者页面的变化
    })
    options里其实包含的东西挺多的,但是对于我来讲,主要就是时长和格式,其他的用不上
    

    暂停录音

    RM.pause();
    同理:
    RM.onPause(()=>{
        console.log('录音暂停事件')
    })
    

    录音完成

    RM.stop();
    RM.onStop((res)=>{
        console.log(res)//这里是必须写完成事件的,因为最后的文件,就在这里面;
        其中:
        res.tempFilePath;//是临时的文件地址
        res.duration;//录音的时长
        res.fileSize;//文件的大小
    })
    

    录音在这里,其实就算是完成了,当然还涉及到后台上传的一些功能,后续我会添加上来。

    展开全文
  • 微信小程序录音开发

    千次阅读 2019-01-23 10:51:08
    第一步, <view class='container'> <button bindtap='start...开始录音</button> <button bindtap='pauseRecording'>暂停录音</button> <button bindtap='resumeRecording'&g...

    第一步,

    <view class='container'>
      <button bindtap='startRecording'>开始录音</button>
      <button bindtap='pauseRecording'>暂停录音</button>
      <button bindtap='resumeRecording'>继续录音</button>
      <button bindtap='stopRecording'>结束录音</button>
      <view>
        <view>时长:{{audioMsg.duration}}</view>
        <view>文件大小:{{audioMsg.fileSize}}</view>
        <view>临时路径:{{audioMsg.tempFilePath}}</view>
      </view>
    </view>

    第二步

    var app = getApp();
    var recorderManager = wx.getRecorderManager(); //录音管理
    
    var options = {
      duration: 300000,
      sampleRate: 16000,
      numberOfChannels: 1,
      encodeBitRate: 48000,
      format: 'mp3',//这里是生成的音频文件格式
      frameSize: 50,
    };
    Page({
    
      data: {
        audioMsg:{}
      },
      onLoad(){
        var that = this
        //监听录音结束 并返回本地MP3文件
        recorderManager.onStop((res) => {
          that.setData({
            audioMsg:res
          })
          console.log(res)
        })
      },
      //开始录音
      startRecording(){
        recorderManager.start(options)
        console.log('开始')
      },
      //暂停录音
      pauseRecording() {
        recorderManager.pause();
        console.log('暂停')
      }, 
      //继续录音
      resumeRecording(){
        recorderManager.resume();
      },
      //结束录音
      stopRecording() {
        recorderManager.stop();
      }
    })
    

    其实很简单,并没有那么复杂,拿到临时地址,上传服务器就可以了,

    如果需要延伸的小伙伴可以私聊我,

    有帮助到大家的记得关注噢~

     

    喜欢上方小程序,需要源码的,私信小编留下邮箱。

    展开全文
  • 小程序开发API之录音RecorderManager

    千次阅读 2019-01-31 17:49:58
    旧API wx.startRecord、wx.stopRecord、、停止维护,请使用 wx.getRecorderManager 代替 wx.startRecord(Object ...当用户离开小程序时,此接口无法调用。本接口停止维护,请使用 wx.getRecorderManager 代替 调用...

    旧API wx.startRecord、wx.stopRecord、、停止维护,请使用 wx.getRecorderManager 代替

    wx.startRecord(Object object)

    开始录音。当主动调用 wx.stopRecord,或者录音超过1分钟时自动结束录音。当用户离开小程序时,此接口无法调用。本接口停止维护,请使用 wx.getRecorderManager 代替
    调用前需要 用户授权 scope.record

    参数Object object在这里插入图片描述

    object.success 回调函数参数Object res在这里插入图片描述

    wx.stopRecord()
    停止录音。本接口停止维护,请使用 wx.getRecorderManager 代替

    示例代码

    wx.startRecord({ //开始录音
      success(res) {
        const tempFilePath = res.tempFilePath
      }
    })
    setTimeout(function () {
      wx.stopRecord() // 停止录音
    }, 10000)
    

    录音新的API

    wx.getRecorderManager()

    获取全局唯一的录音管理器 RecorderManager
    返回值
    RecorderManager

    RecorderManager

    全局唯一的录音管理器

    方法

    RecorderManager.start(Object object)
    开始录音
    参数Object object在这里插入图片描述

    object.sampleRate 的合法值在这里插入图片描述

    object.numberOfChannels 的合法值在这里插入图片描述

    object.format 的合法值在这里插入图片描述

    object.audioSource 的合法值在这里插入图片描述

    采样率与编码码率限制
    每种采样率有对应的编码码率范围有效值,设置不合法的采样率或编码码率会导致录音失败,具体对应关系如下表。在这里插入图片描述

    RecorderManager.pause()
    暂停录音

    RecorderManager.resume()
    继续录音

    RecorderManager.stop()
    停止录音

    RecorderManager.onStart(function callback)
    监听录音开始事件
    function callback
    录音开始事件的回调函数

    RecorderManager.onResume(function callback)
    监听录音继续事件
    function callback
    录音继续事件的回调函数

    RecorderManager.onPause(function callback)
    监听录音暂停事件
    function callback
    录音暂停事件的回调函数

    RecorderManager.onStop(function callback)
    监听录音结束事件
    function callback
    录音结束事件的回调函数
    参数Object res在这里插入图片描述

    RecorderManager.onFrameRecorded(function callback)
    监听已录制完指定帧大小的文件事件。如果设置了 frameSize,则会回调此事件。
    function callback
    已录制完指定帧大小的文件事件的回调函数
    参数Object res在这里插入图片描述

    RecorderManager.onError(function callback)
    监听录音错误事件
    function callback
    录音错误事件的回调函数
    参数Object res在这里插入图片描述

    RecorderManager.onInterruptionBegin(function callback)
    监听录音因为受到系统占用而被中断开始事件。以下场景会触发此事件:微信语音聊天、微信视频聊天。此事件触发后,录音会被暂停。pause 事件在此事件后触发
    function callback
    录音因为受到系统占用而被中断开始事件的回调函数

    RecorderManager.onInterruptionEnd(function callback)
    监听录音中断结束事件。在收到 interruptionBegin 事件之后,小程序内所有录音会暂停,收到此事件之后才可再次录音成功。
    function callback
    录音中断结束事件的回调函数

    示例:
    效果展示


    在这里插入图片描述

    代码
    index.wxml

    <button type="primary" bindtap="btnClick1">开始录音</button>
    <button type="primary" bindtap="btnClick2">录音暂停</button>
    <button type="primary" bindtap="btnClick3">录音暂停后继续播放</button>
    <button type="primary" bindtap="btnClick4">录音停止</button>
    

    index.wxss

    button{
      margin: 20rpx;
      font-size: 30rpx;
    }
    

    index.js

    Page({
      data: {
      },
      onLoad: function (options) {
        //获取全局唯一的录音管理器 RecorderManager
        this.recorderManager = wx.getRecorderManager()
        this.recorderManager.onStop((res) => {
          var tempFilePath = res.tempFilePath;// 文件临时路径
          var temp = tempFilePath.replace('.mp3', '')
          console.log('获取到文件')
        })
        this.recorderManager.onError((res) => {
          console.log('录音失败了!')
        })
      },
      //开始录音
      btnClick1:function(){
        this.recorderManager.start({
          duration: 60000,
          sampleRate: 16000,//采样率,有效值 8000/16000/44100
          numberOfChannels: 1,//录音通道数,有效值 1/2
          encodeBitRate: 96000,//编码码率
          format: 'mp3',//音频格式,有效值 aac/mp3
          frameSize: 50,//指定帧大小
          audioSource: 'auto'//指定录音的音频输入源,可通过 wx.getAvailableAudioSources() 获取
        })
      },
      //录音暂停
      btnClick2: function () {
        this.recorderManager.pause()
      },
      //录音暂停后继续播放
      btnClick3: function () {
        this.recorderManager.resume()
      },
      //录音停止
      btnClick4: function () {
        this.recorderManager.stop()
      }
    })
    





    展开全文
  • 请注意,请注意,请注意:重要的... 初学小程序的菜鸟们,录音功能在开发工具是没有反应,会一直提示录音失败,所以菜鸟们不要浪费更多的时间:研究为什么总是失败,使用开发工具的时候。 wx.startRecord(OBJECT) ...

    请注意,请注意,请注意:重要的事情要说三遍。

          初学小程序的菜鸟们,录音功能在开发工具是没有反应,会一直提示录音失败,所以菜鸟们不要浪费更多的时间:研究为什么总是失败,使用开发工具的时候。

    wx.startRecord(OBJECT)

    https://developers.weixin.qq.com/miniprogram/dev/api/media/recorder/RecorderManager.onFrameRecorded.html

    由于还没有申请APPID所以无法再手机上预览,对于这个功能就以后在补充。

    展开全文
  • 主要介绍了微信小程序开发录音机 音频播放 动画实例 (真机可用),这里整理了详细的代码,有需要的小伙伴可以参考下。
  • 前言书接上回的《SpringBoot开发案例之微信小程序文件上传》,正常的业务流程是,口语测评需要学生通过前端微信小程序录入一段音频,通过调用第三方音频处理服务商进行评分,然后服务端对原始录音、标准录音以及评分...
  • 使用微信小程序录音API和播放声音API实现微信小程序发送语音消息的功能。
  • 这是一个运行在微信上的小程序源代码:Record录音小程序,用来语音录制,你可以用腾讯官方的微信开发者工具打开项目源码。如示例图所示,在调试状态下的运行效果如图所示。本程序只是实现录音机的功能,功能不太多,...
  • 书接上回的《SpringBoot开发案例之微信小程序文件上传》,正常的业务流程是,口语测评需要学生通过前端微信小程序录入一段音频,通过调用第三方音频处理服务商进行评分,然后服务端对原始录音、标准录音以及评分信息...
  • 要注意的是,小程序模拟器对录音支持的并不好,因此,需要使用真机测试本节的例子。开启小程序真机调试模式后,点击“开始录音”按钮,弄出点声音,然后再点击“停止录音”按钮,会在真机的Console中输入如图1的...
  • 微信小程序开发注意指南和优化实践前言转眼间已经参与过我厂好几个小程序的开发了,下面本妹子将开发中的那些注意点和各位小伙伴们分享下,妥妥的干货一枚。一、WXML不要换行写,有空格不行微信开发者工具不会对代码...
  • 趁着周末用微信小程序做了个简易录音机.跟大家分享,欢迎批评! 老规矩,先几张图. 1.为了进来看得清楚.刚开始没有加载音频列表.代码往前挪一挪即可. 2.按住 录音按钮的时候会出现麦克风.中间的麦克风是个帧动画. ...
  • 功能描述:先通过录音程序录一段语音存放到手机SD卡的指定目录里,通过ListView显示录音文件内容,点击录音文件进入播放小程序,播放选中的录音文件播放、暂停、停止功能,中使用了Intent类实现两个Activity之间数据...
  • 小程序开发临时录音文件iOS播放只能播放一次,安卓可以无限播放问题解决在这里插入代码片 var res = wx.getSystemInfoSync() if (res.platform == 'ios') { this.audio = wx.getBackgroundAudioManager() } else ...
  • 小程序录音功能实现

    2021-03-07 09:42:44
    开发小程序过程中,有一个实现录音功能并播放录音,将录音上传至服务器的需求。开发过程中使用了Taro框架,录音功能通过Taro.getRecorderManager()接口实现,上传录音至服务器通过Taro.uploadFile接口实现,播放...
  • 前言微信小程序中可以实现录音的主要有wx.startRecord()和wx.getRecorderManager(),其中wx.startRecord()从微信开发者工具基础库1.6后停止维护,开始启用更加强大的wx.getRecorderManager()。一、关于wx....
  • 本书主要围绕Orange Can项目展开一系列编码工作,用几近真实的项目介绍小程序的各个API、组件用法,并附带一些小程序开发的经验、技巧以及常见的误区说明。整个Orange Can项目分为三部分:文章阅读、电影资讯以及...
  • 微信小程序中可以实现录音的主要有wx.startRecord()和wx.getRecorderManager(),其中wx.startRecord()从微信开发者工具基础库1.6后停止维护,开始启用更加强大的wx.getRecorderManager()。 一、关于wx.startRecord...
  • 今天在千聊直播用图文的方式分享了小程序框架,也是我的直播首秀。 整体感觉效果不是太满意,一方面用手机录音效果不是太好,另一方面,在直播的过程中,思维没有活跃起来,整个直播的过程感觉比较被动。 下面是...

空空如也

空空如也

1 2 3 4 5 ... 13
收藏数 245
精华内容 98
关键字:

录音小程序开发