神一样的精神
最近接到这样一个需求，要求实现录制、试听、上传音频功能，选择的是getbackgroundaudiomanager,声音录制和播放波形图是用css实现的，效果图及详细设计代码如下：
xml文件
录制提示 00:00:{{currenttime}} 开始 录好了 试听 上传 上传中 重新录制
js文件
let windowheight = wx.getsysteminfosync().windowheight // 屏幕的高度
let screenwidth = wx.getsysteminfosync().screenwidth
let screenheight = wx.getsysteminfosync().screenheight
let contentheight = ((windowheight / screenwidth) * 750 - 184 - 166) "rpx";
const recordermanager = wx.getrecordermanager()
const backgroundaudiomanager = wx.getbackgroundaudiomanager()
page({
/**
* 页面的初始数据
*/
data: {
startclick:false,
contentheight: contentheight,
voicestate:false,
tempfilepath:'',
recordingtimeqwe:0,//录音计时
setinter:"",//录音名称
isplay:true, //播放状态 true--播放中 false--暂停播放
uploadstate:false,
showhandle1:true,
showhandle2:false,
showwaveview:false,
currentleft:10,
currenttime:'00'
},
/**
* 生命周期函数--监听页面加载
*/
onload: function (options) {
this.initrecord()
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onready: function () {
},
initrecord:function(){
recordermanager.onstart(() => {
console.log('开始录音')
})
recordermanager.onpause(() => {
console.log('暂停录音')
})
recordermanager.onstop((res) => {
clearinterval(this.data.setinter);
this.setdata({voicestate:true,currentleft:10})
console.log('结束录音', res)
const { tempfilepath } = res
this.data.tempfilepath = tempfilepath
})
recordermanager.onframerecorded((res) => {
const { framebuffer } = res
console.log('framebuffer.bytelength', framebuffer.bytelength)
})
},
recordingtimer:function(){
var that = this;
//将计时器赋值给setinter
this.data.setinter = setinterval(
function () {
let time = that.data.recordingtimeqwe 1;
if(time>10){
wx.showtoast({
title: '录音时长最多10s',
duration:1500,
mask:true
})
clearinterval(that.data.setinter);
that.shutrecord();
return;
}
// console.log(time);
let currenttime = time < 10 ? '0' time : time;
that.setdata({
recordingtimeqwe: time,
currenttime:currenttime,
currentleft:that.data.currentleft 65
})
}
, 1000);
},
startrecord:function(){
if(this.data.startclick){
return
}
this.data.startclick = true
const options = {
duration: 10000,
samplerate: 44100,
numberofchannels: 1,
encodebitrate: 192000,
format: 'aac',
framesize: 50
}
// 开始倒计时
this.recordingtimer()
// 开始录音
recordermanager.start(options)
},
shutrecord:function(){
recordermanager.stop()
this.setdata({showhandle1:false,showhandle2:true,currenttime:'00'})
},
listenrecord:function(e){
// 试听
let isplay = e.currenttarget.dataset.isplay;
backgroundaudiomanager.title = '试听欢迎语'
backgroundaudiomanager.src = this.data.tempfilepath
this.setdata({
showwaveview:true,
currentleft:10,
currenttime:'00'
})
backgroundaudiomanager.onplay(() => {
console.log("音乐播放开始")
})
backgroundaudiomanager.onended(() => {
console.log("音乐播放结束")
clearinterval(this.data.setinter1)
this.setdata({currentleft:10,showwaveview:false,currenttime:'00'})
})
backgroundaudiomanager.play()
this.data.setinter1 = setinterval(() => {
let time = parseint(this.data.currenttime) 1
let currenttime = time < 10 ? '0' time : time;
// console.log(currenttime)
this.setdata({
currentleft:this.data.currentleft 65,
currenttime:currenttime
})
}, 1000);
},
rerecord:function(){
clearinterval(this.data.setinter1)
this.setdata({
showhandle1:true,
showhandle2:false,
voicestate:false,
tempfilepath:'',
showwaveview:false,
startclick:false,
currentleft:10,
recordingtimeqwe:0,
currenttime:'00'
})
},
uploadvoice:function(){
let that = this
this.setdata({uploadstate:true})
wx.uploadfile({
url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址
filepath: this.data.tempfilepath,
name: 'file',
header:{
"content-type":"multiply/form-data"
},
formdata: {
'time': this.data.recordingtimeqwe
},
success (res){
console.log('上传成功')
},
fail (res){
console.log('上传失败')
that.setdata({uploadstate:false})
}
})
},
/**
* 生命周期函数--监听页面显示
*/
onshow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onhide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onunload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onpulldownrefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onreachbottom: function () {
},
/**
* 用户点击右上角分享
*/
onshareappmessage: function () {
}
})
css文件
.servicepage {
font-family: "pingfangsc-regular";
}
.top {
font-size: 34rpx;
font-family: "pingfangsc-medium";
color: #fff;
padding-left: 60rpx;
display: flex;
align-items: center;
height: 150rpx;
}
.content {
border-radius: 36rpx 36rpx 0 0;
background: #fff;
padding: 16rpx 30rpx;
overflow-y: scroll;
}
.allservice .title {
text-align:center;
}
.servicelist {
margin-top:300rpx;
display: flex;
justify-content: space-between;
padding: 0 16rpx;
}
.handleview{
margin-top:300rpx;
display: flex;
/* align-items: center; */
justify-content: center;
/* justify-content: space-between; */
padding:0 100rpx;
}
.circlebtn{
width:100rpx;
height:100rpx;
color:#fff;
text-align:center;
line-height:100rpx;
border-radius:50%;
font-size:28rpx;
}
.green{
background-color:#3ed3ca;
}
.red{
background-color:red;
}
.blue{
background-color: blue;
}
.voiceline{
position: relative;
background: #eee;
height:40px;
padding:0 10rpx;
overflow: hidden;
}
.voicepointer{
width:2rpx;
height:100rpx;
background: cornflowerblue;
position: absolute;
top:0;
left:10rpx;
}
.voicebox{
display: flex;
align-items: center;
height:40px;
}
.line1{
height:1px;
background: cornflowerblue;
width:100rpx;
}
.wave2{
height:40px;
}
.wave3{
height:40px;
}
.voicewave{
display: flex;
align-items: flex-end;
height:20px;
}
.voicewave1{
display: flex;
align-items:flex-start;
height:20px;
}
.auitem{
width:1px;
margin-right:4rpx;
background: cornflowerblue;
height:2px;
}
.au1{
height:8px;
animation: audio1 1s linear .1s infinite ;
}
.au2{
height:6px;
animation: audio2 1s linear .1s infinite ;
}
.au3{
height:4px;
animation: audio3 1s linear .1s infinite ;
}
.au4{
height:8px;
animation: audio4 .5s linear .2s infinite ;
}
.au5{
height:6px;
animation: audio5 .5s linear .5s infinite ;
}
.au6{
height:4px;
animation: audio6 .5s linear .2s infinite ;
}
@keyframes audio1 {
from{height:8px;}
to{height:6px;}
}
@keyframes audio2 {
from{height:6px;}
to{height:4px;}
}
@keyframes audio3 {
from{height:4px;}
to{height:2px;}
}
@keyframes audio4 {
from{height:6px;}
to{height:8px;}
}
@keyframes audio5 {
from{height:4px;}
to{height:6px;}
}
@keyframes audio6 {
from{height:2px;}
to{height:4px;}
}
.servicelist .box {
width: 200rpx;
height: 220rpx;
background: #eee;
padding: 4rpx;
border-radius: 8rpx;
}
.servicelist .box view.free{
position: absolute;
left:-10rpx;
top:0;
width:108rpx;
height:42rpx;
line-height: 42rpx !important;
padding:0;
}
.servicelist .box view.free text{
display: inline-block;
color:#fff;
position: absolute;
font-size: 24rpx;
text-align: center;
width:108rpx;
top:-4rpx;
}
.box .free image{
width:108rpx;
height:42rpx;
}
.servicelist .box view:first-child {
height: 80rpx;
line-height: 80rpx;
font-size: 30rpx;
text-align: center;
}
.servicelist .box view:last-child {
font-family: "pingfangsc-semibold";
border-radius: 0 0 8rpx 8rpx;
height: 140rpx;
background: #fff;
font-size: 72rpx;
text-align: center;
line-height: 135rpx;
vertical-align: top;
position: relative;
}
.servicelist .box view:last-child text {
font-size: 26rpx;
}
.box.active {
background: #ffd458;
}
.box.active view:last-child {
background: #fffbea;
}
.bottom {
position: fixed;
width: 100%;
height: 184rpx;
background: #fff;
box-shadow: 0 -2px 5px 0 rgba(0, 0, 0, 0.10);
bottom: 0;
left: 0;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding: 0 30rpx 60rpx 30rpx;
}
.bottom .left view.all {
font-size: 34rpx;
font-family: "pingfangsc-semibold";
line-height: 48rpx;
display: flex;
align-items: center;
margin-bottom: 10rpx;
}
.bottom .left view.agree {
font-size: 24rpx;
display: flex;
align-items: center;
}
.bottom .left view.agree text {
color: #bbb;
}
.bottom .left view text.colorblue {
color: #419bf9;
}
.bottom .right {
width: 200rpx;
background: #3ed3ca;
border-radius: 40rpx;
line-height: 80rpx;
text-align: center;
font-size: 30rpx;
color: #fff;
}
.rightsinfo {
margin-top: 60rpx;
padding-right: 16rpx;
}
.rightsinfo::before {
display: table;
content: '';
}
.rightsinfo .title {
font-size: 32rpx;
display: flex;
align-items: center;
letter-spacing: 0.26px;
}
.rightsinfo .title image {
width: 40rpx;
height: 40rpx;
margin-right: 14rpx;
}
.rightsinfo .rightslist {
display: flex;
align-items: center;
margin-top: 40rpx;
}
.rightsinfo .rightslist .left {
width: 80rpx;
height: 80rpx;
margin-right: 20rpx;
}
.rightsinfo .rightslist .left image {
width: 80rpx;
height: 80rpx;
}
.rightsinfo .rightslist .right .righttitle {
font-family: "pingfangsc-medium";
font-size: 30rpx;
color: #333;
letter-spacing: 0.24px;
line-height: 24px;
}
.rightsinfo .rightslist .right .rightdes {
font-size: 24rpx;
color: #a5a5a5;
letter-spacing: 0;
}
总结
到此这篇关于微信小程序实现录制、试听、上传音频功能（带波形图）的文章就介绍到这了,
