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

微信小程序录音与播放录音功能实现，话不多说直接上代码实例：

test.wxml

<button bindtap='start'>开始录音</button>
<button bindtap='play'>播放录音</button>
<button bindtap='stop'>停止录音</button>

test.js

var voice = "";
Page({play: function () {//播放声音文件  wx.playVoice({filePath: voice})},start: function () {//开始录音  wx.startRecord({success: function (e) {voice = e.tempFilePath}})},stop: function () {//结束录音  wx.stopRecord();}
})

微信小程序录音与播放录音功能前端界面：

pick一下最终效果，然后一步一步来。先把界面效果做出来。

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

长按会随动画出现边上半透明的圈，松开会缩回去。
顶部progressBar长按时出现，然后随录音时长变短。

这是界面功能，我们先搞一下。

wxml：

<view class="head"><progress strokeWidth="4" percent="{{value}}" wx:if="{{showPg}}" ></progress><view class="dot {{isTouchStart==true?'dot-blowup':''}} {{isTouchEnd==true?'dot-zoomout':''}}" style="display:{{isDot}}"></view><view class="record" bindtouchstart="recordStart" bindtouchend="recordTerm"><image mode="widthFix" src="../../images/record.png"></image></view>
</view>

wxss样式：

.head {width: 100%;height: 400rpx;position: relative;}
.head ,page{background-color: #f7f7f7;
}
.record, .dot {height: 200rpx;width: 200rpx;border-radius: 100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);animation-iteration-count: 1;
}.record {background: rgba(92, 212, 76);z-index: 10;
}.dot {background: rgba(92, 212, 76, 0.7);z-index: 9;
}.dot-blowup {animation: sploosh2 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);animation-fill-mode: forwards;
}.dot-zoomout {animation: sploosh3 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);animation-fill-mode: forwards;
}@keyframes sploosh2 {0% {box-shadow: 0 0 0 0px rgba(92, 212, 76, 0.7);background: rgba(92, 212, 76, 0.7);}100% {box-shadow: 0 0 0 15px rgba(92, 212, 76, 0.3);background: rgba(92, 212, 76, 0.3);}
}@keyframes sploosh3 {0% {box-shadow: 0 0 0 15px rgba(92, 212, 76, 0.3);background: rgba(92, 212, 76, 0.3);}100%{box-shadow: 0 0 0 0px rgba(92, 212, 76, 0.7);background: rgba(92, 212, 76, 0.7);}
}.record image {height: 90rpx;width: 90rpx;position: absolute;top: 50%;left: 50%;z-index: 10;background: transparent;transform: translate(-50%, -50%);
}

js赋值：


var app = getApp(),rm = wx.getRecorderManager();//录音停止时调用
rm.onStop(function(e) {var a = this;wx.showLoading({title: "正在识别..."});//上传逻辑var n = {url: app.globalData.url + "upload",filePath: e.tempFilePath,name: "music",header: {"Content-Type": "application/json"},success: function (res) {}};wx.uploadFile(n);}),Page({/*** 页面的初始数据*/data: {hasRecord: false,isDot: "block",isTouchStart: false,isTouchEnd: false,value: '100',touchStart:0,touchEnd:0,vd:''},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {var a = this;wx.authorize({scope: "scope.record",success: function() {console.log("录音授权成功");},fail: function() {console.log("录音授权失败");}}), a.onShow()},// 点击录音按钮onRecordClick: function () {wx.getSetting({success: function (t) {console.log(t.authSetting), t.authSetting["scope.record"] ? console.log("已授权录音") : (console.log("未授权录音"),wx.openSetting({success: function (t) {console.log(t.authSetting);}}));}});},/*** 长按录音开始*/recordStart: function(e) {var n = this;rm.start({format: "mp3",sampleRate: 32e3,encodeBitRate: 192e3}), n.setData({touchStart: e.timeStamp,isTouchStart: true,isTouchEnd: false,showPg: true,})var a = 15, o = 10;this.timer = setInterval(function () {n.setData({value: n.data.value - 100 / 1500}), (o += 10) >= 1e3 && o % 1e3 == 0 && (a-- , console.log(a), a <= 0 && (rm.stop(),clearInterval(n.timer), n.animation2.scale(1, 1).step(), n.setData({animationData: n.animation2.export(),showPg: false,})));}, 10);},/*** 长按录音结束*/recordTerm: function(e) {rm.stop(), this.setData({isTouchEnd: true,isTouchStart: false,touchEnd: e.timeStamp,showPg: false,value: 100}), clearInterval(this.timer);}})

这里我的录音按钮点击扩散效果用的是纯css实现，而上方progress是使用animation实现的。

参考自：必学智库

在开发微信小程序遇到资源类无法显示的问题：找了很多资料，特记录备用。

1. 真机测试不能显示图片问题

原因：微信小程序的图片资源必须是base64和网络图片格式。
解决方案：js中，对本地图片进行转码，或者直接将url换为image根目录。

参考资料：http//:wangzhan.jiaxiangz.com

微信小程序录音与播放录音功能实现相关推荐

微信小程序录音+音频播放（解决ios无法音频播放问题）
微信小程序录音+播放 1.创建全局变量 const audioManager = wx.getRecorderManager(): const innerAudioContext = wx.creat ...
微信小程序录音、播放源码【推荐】
[-----------------------文章尾部附加源码下载地址-----------------------] 1.前端wxml代码,很简单的一个按钮.一些说明文字.一个语音循环列表: &l ...
微信小程序录音与音频播放控制功能
微信小程序录音与音频播放控制功能 1.录音 1.1 案例 2.音频播放控制 2.1 案例小程序继承了微信强大的语音处理功能,提供了录音.音频播放控制和背景音乐等功能,它们的功能不同,但有相似性. ...
小程序录音上传服务器,微信小程序录音实现功能并上传(使用node解析接收)
微信小程序录音实现功能并上传(使用node解析接收) 发布时间:2020-09-04 11:59:06 来源:脚本之家阅读:97 作者:weixin_43188227 背景我在开发小程序的时候,有 ...
微信小程序录音直传阿里云OSS并语音识别
前言如题:做一个录音文字识别功能,知识点有三个,分别是微信小程序的录音功能.录音文件直传阿里云OSS.使用阿里云的录音文件识别接口返回识别后的文字一.微信小程序录音官方文档:微信小程序全局唯一的 ...
java silk转mp3_微信小程序录音文件格式silk遇到的问题及解决方法
不好意思,误导大家了,这种将silk解密的方式只是在小程序测试的时候可以,上线以后这种方法是不行的,还是需要使用解密转码.参见:https://github.com/kn007/silk-v3-dec ...
微信小程序录音第一篇（基于微信小程序及百度AI的人员语音识别转文字显示小程序）
基于微信小程序及百度AI的人员语音识别转文字显示小程序基于微信小程序及百度AI的人员语音识别转文字显示小程序主要分3篇 1.微信小程序录音篇(小程序基于wx.startRecord()微信语音录 ...
html5音乐播放器设计论文,基于微信小程序的音乐播放器设计和毕业论文
摘要随着通信技术的发展和智能设备的普及,移动互联网在近两年发展迅猛,新兴的移动社交软件"微信"逐渐走进了手机用户的生活,深受全国数亿用户的欢迎.随着微信版本的不断更新,微信也 ...
微信小程序实现音乐播放器（2）
文章目录前情提要 BackgroundAudioManager API:wx.setNavigationBarTitle() 搭建静态资源服务器小程序项目 app.json app.wxss pa ...

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

微信小程序录音与播放录音功能实现相关推荐

最新文章

热门文章