广告
返回顶部
首页 > 资讯 > 前端开发 > html >微信小程序如何实现录音与播放录音功能
  • 479
分享到

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

2024-04-02 19:04:59 479人浏览 独家记忆
摘要

这篇文章主要为大家展示了“微信小程序如何实现录音与播放录音功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“微信小程序如何实现录音与播放录音功能”这篇文章吧。小

这篇文章主要为大家展示了“微信小程序如何实现录音与播放录音功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“微信小程序如何实现录音与播放录音功能”这篇文章吧。

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

以上是“微信小程序如何实现录音与播放录音功能”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网html频道!

--结束END--

本文标题: 微信小程序如何实现录音与播放录音功能

本文链接: https://www.lsjlt.com/news/70749.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 微信小程序如何实现录音与播放录音功能
    这篇文章主要为大家展示了“微信小程序如何实现录音与播放录音功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“微信小程序如何实现录音与播放录音功能”这篇文章吧。小...
    99+
    2022-10-19
  • 微信小程序实现录音与音频播放功能
    目录1、录音1.1 案例2、音频播放控制2.1 案例小程序继承了微信强大的语音处理功能,提供了录音、音频播放控制和背景音乐等功能,它们的功能不同,但有相似性。 1、录音 小程序提供了...
    99+
    2022-11-13
  • 微信小程序如何实现录音与音频播放功能
    这篇文章将为大家详细讲解有关微信小程序如何实现录音与音频播放功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。小程序继承了微信强大的语音处理功能,提供了录音、音频播放控制和背景音乐等功能,它们的功能不同,...
    99+
    2023-06-29
  • 微信小程序如何实现录音和播放录音的开发
    这篇文章主要介绍了微信小程序如何实现录音和播放录音的开发,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。  关于微信小程序录音与播放录音的开发,小程序中提供了两种录音的API。...
    99+
    2023-06-26
  • 微信小程序实现播放音频功能
    本文实例为大家分享了微信小程序实现播放音频的具体代码,供大家参考,具体内容如下 功能描述:一进页面就会播放音乐,点击暂停再次点击后可以开始播放,退出页面后播放停止。 HTML: &l...
    99+
    2022-11-13
  • 微信小程序实现录音Record功能
    本文实例为大家分享了微信小程序实现录音Record功能的具体代码,供大家参考,具体内容如下 布局 <!--pages/record/record.wxml--> &l...
    99+
    2022-11-12
  • 微信小程序如何实现录音Record功能
    这篇文章主要介绍了微信小程序如何实现录音Record功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体内容如下布局<!--pages/record/record.w...
    99+
    2023-06-14
  • 微信小程序实现音频录制功能
    微信小程序实现音频录制功能近年来,随着移动互联网的发展,微信小程序的普及越来越广泛。微信小程序作为一种轻量级、易于使用的应用,在帮助企业拓展市场和提升用户体验方面发挥着重要的作用。而在实现音频录制功能方面,微信小程序同样提供了简单易用的接口...
    99+
    2023-11-21
    微信小程序音频录制
  • 实现微信小程序中的音频播放功能
    标题:实现微信小程序中的音频播放功能微信小程序作为一种快速便捷的应用开发平台,为开发者提供了众多丰富的功能。在小程序中,音频播放功能是非常常见且重要的需求之一。本文将介绍如何在微信小程序中实现音频播放功能,并提供具体的代码示例。一、准备工作...
    99+
    2023-11-21
    音频播放 微信小程序 实现功能
  • 微信小程序实现录音
    本文实例为大家分享了微信小程序实现录音的具体代码,供大家参考,具体内容如下 为录音 录音中 wxml: <!-- 开始录音 --> <image src="/i...
    99+
    2022-11-13
  • 微信小程序实现播放音频
    本文实例为大家分享了微信小程序实现播放音频的具体代码,供大家参考,具体内容如下 wxml: <!-- 语音 --> <view wx:if="{{content...
    99+
    2022-11-13
  • java实现录音播放功能
    本文实例为大家分享了java实现录音播放的具体代码,供大家参考,具体内容如下 需求: 1.实现可以从麦克风进行录音 2.可以停止录音 3.实现播放录音内容 4.并将所录的mp3文件全...
    99+
    2022-11-13
    java 录音 播放
  • 微信小程序如何实现音乐播放器
    这篇文章主要介绍微信小程序如何实现音乐播放器,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!效果图又用小程序内置的背景音乐播放的方法写了一遍,逻辑是一样的逻辑,希望对大家有所帮助!&n...
    99+
    2022-10-19
  • 微信小程序中实现——【音乐播放器】
    文章目录 一、学习目标1、掌握swiper组件、scroll-view组件的使用2、掌握image组件的使用3、掌握音频API的使用4、掌握slider组件的使用 二、开发前的准备1...
    99+
    2023-09-13
    微信小程序 小程序
  • 微信小程序怎么实现播放音频
    这篇文章主要介绍“微信小程序怎么实现播放音频”,在日常操作中,相信很多人在微信小程序怎么实现播放音频问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”微信小程序怎么实现播放音频”的疑惑有所帮助!接下来,请跟着小编...
    99+
    2023-06-19
  • 微信小程序怎么实现录音
    今天小编给大家分享一下微信小程序怎么实现录音的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。为录音录音中wxml:<!-...
    99+
    2023-07-02
  • 微信小程序怎么实现音乐播放器
    本篇内容介绍了“微信小程序怎么实现音乐播放器”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!   开始构建小程序首页。  第一步,我...
    99+
    2023-06-26
  • 如何用PHP开发微信小程序的音乐播放功能?
    如何用PHP开发微信小程序的音乐播放功能?随着微信小程序的不断发展,越来越多的开发者开始关注如何在小程序中添加音乐播放功能。在本文中,我将介绍如何使用PHP开发微信小程序的音乐播放功能,并提供具体的代码示例。1.准备工作在开始之前,确保你已...
    99+
    2023-10-27
    音乐播放 PHP 微信小程序
  • Android如何实现仿微信语音消息的录制和播放功能
    小编给大家分享一下Android如何实现仿微信语音消息的录制和播放功能,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!一、简述效果:实现功能:长按Button时改变Button显示文字,弹出Dialog(动态更新音量),动态...
    99+
    2023-05-30
    android
  • 微信小程序中如何实现开始录音
    这篇文章主要为大家展示了微信小程序中如何实现开始录音,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“微信小程序中如何实现开始录音”这篇文章吧。wx.startRecord(OBJECT)开...
    99+
    2023-06-26
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作