【-----------------------文章尾部附加源码下载地址-----------------------】

1.前端wxml代码，很简单的一个按钮、一些说明文字、一个语音循环列表：

<!--index.wxml-->
<view style="margin-top: 50rpx;width: 100%;display: flex;justify-content: center;color: red;">点击录音/松开停止
</view><button type="primary" style="margin-top: 50rpx;" catchtouchstart="start" catchtouchend="end">录音
</button><view wx:if="{{records.length>0}}" style="margin-top: 50rpx;width: 100%;display: flex;justify-content: center;color: red;">点击下方录音文件播放
</view><view wx:for="{{records}}" wx:key="item" data-item="{{item}}" bindtap="clickPlay" style="width: 100%;margin-top: 10rpx;background: #E3e3e3; height: 100rpx; display: flex;justify-content: center;align-items: center;"><view style="width: 90%;display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1;">{{item}}</view>
</view>

界面：

2.js功能代码块。主要包含三个功能：开始录音、停止录音、播放声音：

  start() {var that=thisconst options = {duration: that.data.duration,sampleRate: 16000,numberOfChannels: 1,encodeBitRate: 24000,format: 'mp3',frameSize: 50}recorderManager.start(options)wx.showToast({title: '录音中...',mask: false,duration: that.data.duration,icon: "none",})},end() {recorderManager.stop()},clickPlay(e){var that=thisconsole.log(e.currentTarget.dataset.item)const innerAudioContext = wx.createInnerAudioContext()innerAudioContext.autoplay = trueinnerAudioContext.src = e.currentTarget.dataset.iteminnerAudioContext.onPlay(() => {wx.showToast({title: '播放中...',mask: true,duration: that.data.duration,icon: "none",})})innerAudioContext.onEnded(()=>{console.log('播放结束')wx.hideToast({success: (res) => {},})})innerAudioContext.onError((res) => {console.log(res.errMsg)console.log(res.errCode)})},

上面只是简单的核心代码，下载录音源码Demo地址：

链接：https://pan.baidu.com/s/1wJ_MqNyhA_s9QTj0hV0nBw
提取码：nucj

微信小程序录音、播放源码【推荐】相关推荐

最新WordPress微信小程序社区论坛源码多端应用
WordPress多端应用 WordPress作为后端生成多端小程序.快应用及APP,可用于资讯.新闻.博客.企业官网等后端使用开源博客建站系统wordpress和微慕小程序开源版插件前端使用u ...
健康菜谱微信小程序+项目前后台源码（JavaSSM+Mysql）
博主介绍:✌在职Java研发工程师.专注于程序设计.源码分享.技术交流.专注于Java技术领域和毕业设计✌ 项目名称健康菜谱微信小程序+项目前后台源码(JavaSSM+Mysql) 视频效果 ht ...
PHP开发B2C商城微信小程序商城系统源码+数据库，轻量级前后端分离的电商系统，支持微信小程序 + H5+ 公众号 + APP
项目介绍一款轻量级.高性能.前后端分离的电商系统,支持微信小程序 + H5+ 公众号 + APP,前后端源码完全开源,看见及所得,完美支持二次开发,可学习可商用,让您快速搭建个性化独立商城. 完整代 ...
【增强版短视频去水印源码】去水印微信小程序+去水印软件源码
源码简介与安装说明: 2021增强版短视频去水印源码去水印微信小程序源码网站去水印软件源码安装环境(需要材料):备案域名–服务器安装宝塔-安装 Nginx 或者 Apache php5.6 以上 ...
（已更新）【增强版短视频去水印源码】去水印微信小程序+去水印软件源码
源码简介与安装说明: 安装环境(需要材料):备案域名–服务器安装宝塔-安装 Nginx 或者 Apache php5.6 以上-安装 sg11 插件小程序已自带解析接口,支持全网主流短视频平台,搭建 ...
【微信小程序云工具箱源码】
工具箱源码,趣味工具微信小程序源码皮皮趣味小工具小程序源码,支持功能去水印,精选壁纸,图片压缩,文字生成二维码,图片加水印模拟来电,手持弹幕,掷骰子-等使用小工具,一个小程序有几十个功能. 微信小 ...
微信小程序电商源码：外卖小程序，电商小程序，门店类小程序，展示类小程序，批发商城小程序、分销小程序。
介绍: 1.naicha 2.xianhua 3.xingbake 4.zhubaoxiao 5.zhubaoxiao 6.majiangshangcheng 7.jiafang 8.huazhuan ...
2021年新微信小程序开发系统源码易客多小程序saas系统扫码点餐小程序支付宝小程序快速生成系统源码源代码
2021年新微信小程序开发系统源码小程序saas系统扫码点餐小程序支付宝小程序快速生成系统产品介绍:易客多多合一小程序快速生成系统是厦门四六开科技有限公司开发的快速开发微信百度支付宝小程序生成系统, ...
ssm+mysql护理质量考核系统微信小程序-计算机毕业设计源码03644
摘要随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,护理质量考核微信小程序被用户普遍使用,为方便 ...
数字信号 fft c源码_如何制作一个简单的人体动态识别微信小程序（附源码）
知乎小白第一次写专栏,还请多指教. 先放成果. GitHub源码: lrioxh/HAR-applet-of-Wechatgithub.com b站演示视频: 居然不需要服务器?!如何制作一个简单的 ...

微信小程序录音、播放源码【推荐】

【-----------------------文章尾部附加源码下载地址-----------------------】

1.前端wxml代码，很简单的一个按钮、一些说明文字、一个语音循环列表：

2.js功能代码块。主要包含三个功能：开始录音、停止录音、播放声音：

上面只是简单的核心代码，下载录音源码Demo地址：

微信小程序录音、播放源码【推荐】相关推荐

最新文章

热门文章