前端页面布局代码
描述：@longpress是uniapp的事件，长按时触发的事件，@touchend事件可以监听松开按钮时触发的。
<!-- 上传语音 -->
<view class="Voice_input audiodiv" >
<text class="Voice_title">语音输入:</text>
<view class="Voice_Btn">
<!-- <view class="speak_btn" > -->
<button v-if="ifshowrecordbtn" @longpress="touchdown" @touchend="touchup" style="width:500rpx;height:66rpx" class="talkbtn">{
{
speak}}</button>
<!-- </view> -->
<button v-else class="talkbtn talkbtn2" style="width:500rpx;height:66rpx" @tap="recordagain">{
{
recordtimeshow}} S</button>
<audio class="showaudio" :src="audioSrc" id="myAudio" controls :poster="poster"></audio>
</view>
</view>
css样式
/* 语音输入 */
.Voice_input{
border-bottom: 1px solid rgba(215,215,215,0.50);
}
.audiodiv{
padding-bottom: 50px;
}
.Voice_title{
height: 41px;
line-height: 41px;
font-family: PingFangSC-Regular;
font-size: 16px;
color: #1F1F26;
}
.speak_btn{
width: 178px;
height: 30px;
background-image: linear-gradient(180deg, #FFFFFF 0%, #F1F1F1 100%);
border: 1px solid #E8E8E8;
border-radius: 15.5px;
margin: 0 auto;
text-align: center;
line-height: 30px;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #AAAAAA;
text-align: center;
margin-bottom: 15px;
}
.talkbtn{
color: #cccccc;
font-size: 11px;
border: 1rpx solid #cccccc;
border-radius: 40rpx;
margin-top: 5px;
position: absolute;
left: 50%;
transform:translate(-50%,0);
background: #f2f6fa;
}
.showaudio{
position: fixed;
left: 800rpx;
top: 0;
width: 213px;
height: 28px;
}
js部分
methods:{
// 按住说话start
touchdown:function(){
this.speak='正在录音'
recorderManager.start({
duration: 60000,//录音的时长，单位 ms
sampleRate: 16000, //采样率，有效值 8000/16000/44100
numberOfChannels: 1, //录音通道数，有效值 1/2
encodeBitRate: 96000, //编码码率
format: 'mp3', //音频格式，有效值 aac/mp3
frameSize: 50, //指定帧大小
audioSource: 'auto' //指定录音的音频输入源，可通过 wx.getAvailableAudioSources() 获取
})
console.log('录音开始')
},
//停止录音
touchup: function (e) {
this.speak='按住说话',
this.ifshowrecordbtn=false
recorderManager.stop()
console.log('录音结束')
},
recordagain:function(){
let that = this;
uni.showModal({
title: '提示',
content: '试听或者删除录音',
confirmText: "试听",//这块是确定按钮的文字
cancelText:"删除",//这块是取消的文字
success (res) {
if (res.confirm) {
that.recordplay();
} else if (res.cancel) {
that.recordtimeshow=0,
that.ifshowrecordbtn=true
}
}
})
},
ss_to_s:function(ss){
return (ss/1000).toFixed(0);
},
//点击播放录音
recordplay: function () {
var that = this
that.audioCtx.play()
},
//按住说话end
}
声明关于录音的api
onReady() {
var that = this
that.audioCtx = uni.createAudioContext('myAudio')
},
录音授权等相关操作
onLoad() {
this.ctx = uni.createCameraContext()
uni.authorize({
scope: "scope.record",
success: function() {
console.log("录音授权成功");
},
fail: function() {
console.log("录音授权失败");
}
})
var that = this;
//获取全局唯一的录音管理器 RecorderManager实例
that.recorderManager = uni.getRecorderManager()
that.recorderManager.onStop((res) => {
console.log('res' + res);
console.log('获取到文件路径：' + res.tempFilePath)
console.log('duration' + res.duration)
console.log('fileSize' + res.fileSize)
that.audioSrc=res.tempFilePath,
that.recordtimeshow=that.ss_to_s(res.duration)
})
that.recorderManager.onError((res) => {
console.log('录音失败了！')
})
}