小程序实现录音播放及录音计时功能
需要做一个录音程序上传音频文件,限制做大录音时长为10分钟.
wxml文件:
// pages/readindex/readindex.js
var app = getApp();
var timer;
const recorderManager = wx.getRecorderManager();
const innerAudioContext = wx.createInnerAudioContext();
Page({
/**
* 页面的初始数据
*/
data: {
times:'00:00',
winHeight: 0,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
console.log('readindex监听页面加载')
//获取系统信息
var that = this;
wx.getSystemInfo({
success: function(res) {
that.setData({
winHeight: res.windowHeight,
})
},
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
wx.showModal({
title: '温馨提示',
content: '录音时,请取下耳机,在安静的公放环境下对准手机大声朗读!',
success: function(res) {
if (res.confirm) {
console.log('用户点击确定')
}
}
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
},
//开始录音的时候
start: function() {
const options = {
duration: 10000*6*10, //指定录音的时长，单位 ms
sampleRate: 16000, //采样率
numberOfChannels: 1, //录音通道数
encodeBitRate: 96000, //编码码率
format: 'mp3', //音频格式，有效值 aac/mp3
frameSize: 50, //指定帧大小，单位 KB
}
//开始录音
recorderManager.start(options);
recorderManager.onStart(() => {
console.log('recorder start');
var that = this;
Countdown(that);//开始计时
});
//错误回调
recorderManager.onError((res) => {
console.log('recorder出错:' + res);
clearTimeout(timer);//出错时停止计时
})
},
//停止录音
stop: function() {
recorderManager.stop();
recorderManager.onStop((res) => {
this.tempFilePath = res.tempFilePath;
console.log('停止录音', res.tempFilePath)
clearTimeout(timer);
const {
tempFilePath
} = res
})
},
//播放声音
play: function() {
innerAudioContext.autoplay = true
innerAudioContext.src = this.tempFilePath,
innerAudioContext.onPlay(() => {
console.log('开始播放')
})
innerAudioContext.onError((res) => {
console.log(res.errMsg)
console.log(res.errCode)
})
}
})
// 倒计时
var secondes = 0;
function Countdown(that) {
timer = setTimeout(function() {
console.log("----secondes----" + formatSeconds(secondes));
secondes++;
if(secondes>=600){
recorderManager.stop();
clearTimeout(timer);
}
that.setData({
times: formatSeconds(secondes)
});
Countdown(that);
}, 1000);
};
function formatSeconds(value) {
var secondTime = parseInt(value); // 秒
var minuteTime = 0; // 分
var hourTime = 0; // 小时
if (secondTime > 60) { //如果秒数大于60，将秒数转换成整数
//获取分钟，除以60取整数，得到整数分钟
minuteTime = parseInt(secondTime / 60);
//获取秒数，秒数取佘，得到整数秒数
secondTime = parseInt(secondTime % 60);
//如果分钟大于60，将分钟转换成小时
if (minuteTime > 60) {
//获取小时，获取分钟除以60，得到整数小时
hourTime = parseInt(minuteTime / 60);
//获取小时后取佘的分，获取分钟除以60取佘的分
minuteTime = parseInt(minuteTime % 60);
}
}
var result;
//时间的展示方式为00:00
if(secondTime<10){
result = "0" + parseInt(secondTime);
}else{
result = "" + parseInt(secondTime);
}
if (minuteTime > 0) {
if (minuteTime<10){
result = "0" + parseInt(minuteTime) + ":" + result;
}else{
result = "" + parseInt(minuteTime) + ":" + result;
}
}else{
result = "00:" + result;
}
//由于限制时长最多为三分钟,小时用不到
if (hourTime > 0) {
result = "" + parseInt(hourTime) + ":" + result;
}
return result;
}
以上的代码能够实现所要的功能,还需要做优化.没有上传css文件,很简单,可以自己写.