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

这篇文章主要介绍了微信小程序录音与播放录音功能,小程序中提供了两种录音的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和匀速动画

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

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

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

以上就是在微信小程序中如何实现录音与播放录音功能的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3184149.html

(0)
上一篇 2025年3月31日 21:35:38
下一篇 2025年3月31日 21:35:48

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 归纳整理微信小程序权限接口

    本篇文章给大家带来了关于微信小程序的相关问题,其中主要介绍了微信小程序中的权限接口的相关内容,包括了用户授权接口、获取用户权限设置接口、打开用户权限设置接口等内容,下面一起来看一下,希望对大家有帮助。 【相关学习推荐:小程序学习教程】 1、…

    2025年4月28日 建站经验
    000
  • 微信小程序之页面路由知识点总结

    本篇文章给大家带来了关于微信小程序的相关知识,其中主要介绍了关于页面路由的相关内容,路由是指分组从源到目的地时,决定端到端路径的网络范围的进程,下面就一起来看一下,希望对大家有帮助。 【相关学习推荐:小程序学习教程】 什么是路由? 路由(r…

    2025年4月28日 建站经验
    000
  • 微信小程序开发常用功能汇总

    本篇文章给大家带来了关于微信小程序的相关知识,主要介绍了微信小程序开发常用功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,希望对大家有帮助。 【相关学习推荐:小程序学习教程】 获取用户信息 调用 wx.…

    2025年4月28日 建站经验
    000
  • 微信小程序全局配置以及页面配置详解

    本篇文章给大家带来了关于微信小程序的相关知识,其中主要介绍了关于全局配置以及页面配置的详细解析,其中包括了全局配置文件及常用配置项、小程序窗口组成部分、设置导航栏的标题、背景色、标题颜色等等内容,下面一起来看一下,希望对大家有帮助。 【相关…

    2025年4月28日 建站经验
    000
  • 开发微信小程序需要掌握哪些基础知识

    开发微信小程序需要掌握以下基础知识:1. 前端基础:html、css 和 javascript。2. 小程序特有技术:wxml、wxss 和小程序框架。3. 开发工具与调试技巧:使用微信开发者工具。4. 后端知识与 api 调用:理解 ht…

    2025年4月28日
    000
  • 如何使用 WXML 和 WXSS 构建微信小程序界面

    wxml 和 wxss 是构建微信小程序界面的关键技术。1)wxml 定义界面结构和内容,支持数据绑定。2)wxss 控制界面样式和布局,支持响应式设计和动画。通过结合使用,它们能创建美观、高效的用户界面。 引言 在探索如何使用 WXML …

    2025年4月28日
    000
  • 微信小程序的前端框架(如 Taro、uni-app)使用教程

    taro 和 uni-app 是用于开发微信小程序的高效前端框架。1. taro 采用 react 语法,uni-app 基于 vue.js。2. 它们通过编译器将代码转换为各平台原生代码,支持跨平台开发。3. 使用示例包括基本页面创建和复…

    2025年4月28日
    000
  • 微信开发者工具如何创建新的小程序项目

    微信开发者工具创建新的小程序项目步骤如下:1. 打开微信开发者工具,点击右上角“+”号,选择“新建小程序项目”。2. 填写项目名称、目录和appid(可选“无appid”)。3. 配置project.config.json文件,确保appi…

    2025年4月28日
    000
  • 零基础也能制作微信小程序教你如何轻松上手

    如果你认为制作微信小程序是一项只有编程高手才能完成的任务,那么我可以自信地告诉你:你错了!今天,我将揭示如何在没有任何基础的情况下,轻松掌握制作自己的微信小程序。 首先,让我们澄清一些误解。制作微信小程序并不需要你精通复杂的编程语言,它更像…

    2025年4月28日
    000
  • 微信小程序怎样做出弹出框功能

    这次给大家带来微信小程序怎样做出弹出框功能,微信小程序怎样做出弹出框功能的注意事项有哪些,下面就是实战案例,一起来看一下。 电商项目中商品详情页,加入购物车或者下单时可以选择商品属性的弹出框,通过设置view的平移动画,达到从底部弹出的样式…

    编程技术 2025年3月31日
    100

发表回复

登录后才能评论