微信小程序录音与播放录音功能

小程序中提供了两种录音的API

旧版录音功能

首先启动录音，然后停止录音即可拉到音频的临时地址

启动录音：

var that = this;
  wx.startRecord({
   success: function (res) {
    // 调用了停止录音接口就会触发这个函数，res.tempFilePath为录音文件临时路径
    var tempFilePath = res.tempFilePath
    that.setData({
     src: tempFilePath
    })
   },
   fail: function (res) {
    //录音失败的处理函数
   }
  })

停止录音：

wx.stopRecord()

播放录音：

wx.playVoice({
 filePath: src // src可以是录音文件临时路径
})

新版录音

获取全局唯一的录音管理器，然后录音都依赖他，而播放录音则需要内部 audio 上下文 innerAudioContext 对象。

获取全局唯一的录音管理器：

var that = this;
  this.recorderManager = wx.getRecorderManager();
  this.recorderManager.onError(function(){
   // 录音失败的回调处理
  });
  this.recorderManager.onStop(function(res){
   // 停止录音之后，把录取到的音频放在res.tempFilePath
   that.setData({
    src: res.tempFilePath
   })
   console.log(res.tempFilePath )
  });

开始录音：

this.recorderManager.start({
   format: 'mp3' // 如果录制acc类型音频则改成aac
});

结束录音：

this.recorderManager.stop()

播放音频：

this.innerAudioContext = wx.createInnerAudioContext();
  this.innerAudioContext.onError((res) => {
   // 播放音频失败的回调
  })
  this.innerAudioContext.src = this.data.src; // 这里可以是录音的临时路径
  this.innerAudioContext.play()

DEMO地址

github: https://github.com/yubang/appletRecordDemo

总结

以上所述是小编给大家介绍的微信小程序录音与播放录音功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 微信小程序开发之录音机 音频播放 动画实例 (真机可用)

    微信小程序开发之录音机 音频播放 动画实例 (真机可用)

    趁着周末用微信小程序做了个简易录音机.跟大家分享,欢迎批评! 老规矩,先几张图. 1.为了进来看得清楚.刚开始没有加载音频列表.代码往前挪一挪即可. 2.按住 录音按钮的时候会出现麦克风.中间的麦克风是个帧动画. 其实就是用js控制图片显示隐藏.没啥好说的.这里值得说一说的是录音.微信的录音API后,如果录音时间太短,会录音失败.所以fail的时候还是需要处理一下.录音时间的限制和微信语音是一样的.60秒. 3.我在录音完成后才加载列表. 下图就是从微信存储的文件里获取到的列表信息.有储存路径,

  • 微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例

    微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例

    本文介绍了微信小程序的开发,主要包括图片.录音.音频播放.音乐播放.视频.文件,具体如下: 图片: wx.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照. OBJECT参数说明: 注:文件的临时路径,在小程序本次启动期间可以正常使用,如需持久保存,需在主动调用 wx.saveFile,在小程序下次启动时才能访问得到. 示例代码: wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'],

  • 微信小程序录音与播放录音功能

    小程序中提供了两种录音的API 旧版录音功能 首先启动录音,然后停止录音即可拉到音频的临时地址 启动录音: var that = this; wx.startRecord({ success: function (res) { // 调用了停止录音接口就会触发这个函数,res.tempFilePath为录音文件临时路径 var tempFilePath = res.tempFilePath that.setData({ src: tempFilePath }) }, fail: function

  • 微信小程序录音实现功能并上传(使用node解析接收)

    背景 我在开发小程序的时候,有需求要实现录音功能,并能上传给服务器.小程序录音功能我是使用的微信的wx.getRecorderManager()实现的,通过该方法创建实例,实例录音得到的文件是本地临时文件,上传文件需要使用微信的wx.uploadFile(Object object)方法,这就是本次项目的背景. 小程序端 html页面主要是第一个按钮,两个事件,长按开始录音,松手停止录音.第二个按钮只是一个播放录音的功能,用于确定录音是否成功 <!--pages/record/record.wx

  • 微信小程序录音文件格式silk遇到的问题及解决方法

    不好意思,误导大家了,这种将silk解密的方式只是在小程序测试的时候可以,上线以后这种方法是不行的,还是需要使用解密转码.参见:https://github.com/kn007/silk-v3-decoder 微信小程序的录音文件就是个坑... 录音文件为silk格式,说是silk其实是base64加密后的webm格式,只需将其转为webm格式即可. 我在解决问题的过程中,学到了,遇到问题一定要抓住本质,本来我以为silk是啥格式,这不懵逼了,赶紧找audio是否能播放silk,不能播放就去找网

  • 微信小程序 audio音频播放详解及实例

    微信小程序 audio音频播放详解及实例

     微信小程序 audio音频播放 audio audio为音频组件,我们可以轻松的在小程序中播放音频. 属性名 类型 默认值 说明 id String   video 组件的唯一标识符, src String   要播放音频的资源地址 loop Boolean false 是否循环播放 controls Boolean true 是否显示默认控件 poster String   默认控件上的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效 name

  • 微信小程序实现音乐播放器

    微信小程序实现音乐播放器

    今天继续玩小程序的api,看着别人例子跟着做一个小程序,留下一个脚印吧.末尾附上github源码地址.实现以下微信小程序的音乐播放器,先看下效果图 界面做的确实挺丑的,先上wxss文件 //index.wxss .button-style{ background-color: #eee; border-radius: 8rpx; margin: 20rpx; } 只是顶一个简单的按钮的圆角和间距,颜色这个我还是用primary这个小绿色. 下面是index.wxml文件 //index.wxml

  • 微信小程序多音频播放进度条问题

    微信小程序多音频播放进度条问题

    真的脑子疼,小程序的音频组件居然没有进度控制的功能,网上的方法又很少,逻辑通了就好写了. 1.所有音频播放.停止按钮使用状态切换控制 2.当点击某个音频播放时,首先将所有音频的状态置为停止状态,然后将当前音频置为播放状态 3.滚动条插件配合音频控件一起使用 4.播放状态时滚动条的长度随音频进度变化而变化,时间也要显示 5.拖动滚动条时,音频的当前时间随滚动条变化而变化 1.wxml <text class="left_text">{{item.currentProcess}

  • 微信小程序实现音乐播放页面布局

    微信小程序实现音乐播放页面布局

    本文实例为大家分享了微信小程序实现音乐播放页面的布局,供大家参考,具体内容如下 1.效果图如下,点击播放按钮后,光碟转动,播放按钮变为暂停按钮:播放中点击暂停,光碟复位,暂停按钮恢复为播放按钮. 本文仅提供样式布局,其他具体响应不作介绍 2.样式布局代码 wxml: <view class="page_music"> <view class='icon {{isPlay?"rotateAu":""}}' mode="w

  • 微信小程序实现自动播放视频模仿gif动图效果实例

    微信小程序实现自动播放视频模仿gif动图效果实例

    需求背景: 在小程序页面插入gif动态图,但gif图一般体积比较大,转而用自动播放视频的模式来模拟gif图的效果,丰富页面展示.自动播放的视频,无控制条,无声音,自动循环播放. 技术难点: 因为微信小程序在同一个页面,存在多个视频时(建议不超过3个视频),会出现卡顿甚至闪退的情况. developers.weixin.qq.com/community/d- 方案: 参考小程序社区讨论方案,当视频未出现在屏幕可视区域时,用图片占位,出现在屏幕中,把图片替换成视频,并且自动播放. 代码注意点: vi

  • 微信小程序  audio音频播放详解及实例

    微信小程序  audio音频播放详解及实例

     微信小程序 audio音频播放 audio audio为音频组件,我们可以轻松的在小程序中播放音频. 属性名 类型 默认值 说明 id String   video 组件的唯一标识符, src String   要播放音频的资源地址 loop Boolean false 是否循环播放 controls Boolean true 是否显示默认控件 poster String   默认控件上的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效 name

  • 微信小程序实现录音与音频播放功能

    微信小程序实现录音与音频播放功能

    目录 1.录音 1.1 案例 2.音频播放控制 2.1 案例 小程序继承了微信强大的语音处理功能,提供了录音.音频播放控制和背景音乐等功能,它们的功能不同,但有相似性. 1.录音 小程序提供了wx.startRecord(Object object)开始录音.wx.stopRecord()停止录音和RecorderManager录音管理器等接口对录音功能进行控制.因为RecorderManager录音管理器包含前两个接口的功能,所以这里只介绍RecorderManager. 接口 功能和用途 R

随机推荐