首页 web前端 js教程 在微信小程序中如何实现录音与播放录音功能

在微信小程序中如何实现录音与播放录音功能

Jun 15, 2018 pm 04:21 PM
录音 微信小程序

这篇文章主要介绍了微信小程序录音与播放录音功能,小程序中提供了两种录音的API,旧版本录音功能和新版录音功能,需要的朋友可以参考下

小程序中提供了两种录音的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()
登录后复制

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在JS中如何实现offset和匀速动画

在Bootstrap中如何实现表格合并单元格

在JavaScript中如何实现获取select下拉框中第一个值

在AngularJS中如何做到实时获取并显示密码

以上是在微信小程序中如何实现录音与播放录音功能的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

闲鱼微信小程序正式上线 闲鱼微信小程序正式上线 Feb 10, 2024 pm 10:39 PM

闲鱼官方微信小程序悄然上线,在小程序中可以发布闲置与买家/卖家私信交流、查看个人资料及订单、搜索物品等,有用好奇闲鱼微信小程序叫什么,现在快来看一下。闲鱼微信小程序叫什么答案:闲鱼,闲置交易二手买卖估价回收。1、在小程序中可以发布闲置、与买家/卖家私信交流、查看个人资料及订单、搜索指定物品等功能;2、在小程序的页面中有首页、附近、发闲置、消息、我的5项功能;3、想要使用的话必要要开通微信支付才可以购买;

苹果手机打电话怎么录音 iphone来电录音的方法 苹果手机打电话怎么录音 iphone来电录音的方法 Feb 22, 2024 pm 05:52 PM

拨通电话后在控制中心长按录屏,打开麦克风进行录制即可。教程适用型号:iPhone13系统:IOS15.3解析1首先在手机桌面中找到并点击电话功能。2然后先拨通一个号码,再下滑屏幕调出控制中心。3接着在控制中心中长按录屏图标。4之后在弹出页面中点击打开麦克风。5接下来麦克风打开后点击开始录制选项。6看到录制时间开始计时就可以返回通话界面了。7通话结束后再次进入控制中心,点击录制按钮,停止录制。8最后这段电话录音就就会以屏幕录制的形式保存在你的相册。补充:iPhone为什么没有电话录音功能1至关重要

vivo手机中进行录音的简单步骤 vivo手机中进行录音的简单步骤 Mar 26, 2024 pm 09:11 PM

1、首先在vivo手机的桌面上找到并点击进入【录音机】。2、点击左下角红色的录音按钮开始录音。3、录音完毕后,点击右下角的按钮结束录音并保存。

微信小程序实现图片上传功能 微信小程序实现图片上传功能 Nov 21, 2023 am 09:08 AM

微信小程序实现图片上传功能随着移动互联网的发展,微信小程序已经成为了人们生活中不可或缺的一部分。微信小程序不仅提供了丰富的应用场景,还支持开发者自定义功能,其中包括图片上传功能。本文将介绍如何在微信小程序中实现图片上传功能,并提供具体的代码示例。一、前期准备工作在开始编写代码之前,我们需要先下载并安装微信开发者工具,并注册成为微信开发者。同时,还需要了解微信

荣耀v30pro设置指定号码通话自动录音的操作流程 荣耀v30pro设置指定号码通话自动录音的操作流程 Mar 23, 2024 am 09:16 AM

1、点击打开拨号界面。2、点击右上方三个点,在弹出选项中点击设置。3、点击通话自动录音。4、开启通话自动录音功能,点击自动录音对象,在弹出选项点击指定号码。5、对指定号码进行设置即可。

实现微信小程序中的下拉菜单效果 实现微信小程序中的下拉菜单效果 Nov 21, 2023 pm 03:03 PM

实现微信小程序中的下拉菜单效果,需要具体代码示例随着移动互联网的普及,微信小程序成为了互联网开发的重要一环,越来越多的人开始关注和使用微信小程序。微信小程序的开发相比传统的APP开发更加简便快捷,但也需要掌握一定的开发技巧。在微信小程序的开发中,下拉菜单是一个常见的UI组件,实现了更好的用户操作体验。本文将详细介绍如何在微信小程序中实现下拉菜单效果,并提供具

实现微信小程序中的图片滤镜效果 实现微信小程序中的图片滤镜效果 Nov 21, 2023 pm 06:22 PM

实现微信小程序中的图片滤镜效果随着社交媒体应用的流行,人们越来越喜欢在照片中应用滤镜效果,以增强照片的艺术效果和吸引力。在微信小程序中也可以实现图片滤镜效果,为用户提供更多有趣和创造性的照片编辑功能。本文将介绍如何在微信小程序中实现图片滤镜效果,并提供具体的代码示例。首先,我们需要在微信小程序中使用canvas组件来加载和编辑图片。canvas组件可以在页面

使用微信小程序实现轮播图切换效果 使用微信小程序实现轮播图切换效果 Nov 21, 2023 pm 05:59 PM

使用微信小程序实现轮播图切换效果微信小程序是一种轻量级的应用程序,具有简单、高效的开发和使用特点。在微信小程序中,实现轮播图切换效果是常见的需求。本文将介绍如何使用微信小程序实现轮播图切换效果,并给出具体的代码示例。首先,在微信小程序的页面文件中,添加一个轮播图组件。例如,可以使用<swiper>标签来实现轮播图的切换效果。在该组件中,可以通过b

See all articles