代码如下
引入
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = false;
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
innerAudioContext.src = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3';
innerAudioContext.onPlay(() => {
console.log('开始播放');
});
innerAudioContext.onError((res) => {
console.log(res.errMsg);
console.log(res.errCode);
});
<view class="textarea-box" v-if="userInfo.remark.length>0">
<view >
<image class="play-icon" @click="playAudio(1)" v-if="!isPlayAudio" :src="IMG_BASE_URL+'static/play-icon.png'"></image>
<image class="play-icon" @click="playAudio(2)" v-else :src="IMG_BASE_URL+'static/pause-icon.png'"></image>
</view>
<view class="">
<view :class="'prompt-loader'">
<view :class="isPlayAudio?'em':'pause em'" v-for="(item,index) in 15" :key="index"></view>
</view>
</view>
<view ><image class="cu-tag" :src="IMG_BASE_URL+'static/del-img.png'" mode="aspectFill" @tap.stop="delAudio" ></image></view>
</view>
<!-- -->
<view :class="longPress == '1' ? 'record-layer' : 'record-layer1'">
<view :class="longPress == '1' ? 'record-box' : 'record-box1'">
<view class="record-btn-layer">
<button class="record-btn" :class="longPress == '1' ? '' : 'record-btn-2'" :style="VoiceTitle != '松开手指,取消发送' && longPress != '1'?'background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);':'background-color: rgba(0, 0, 0, 0);color:white'">
<image :src="IMG_BASE_URL+'static/yy-icon.png'" mode=""></image>
<text>{{VoiceText}}</text>
</button>
</view>
<!-- 语音音阶动画 -->
<view :class="VoiceTitle != '松开手指,取消发送'?'prompt-layer prompt-layer-1':'prompt-layer1 prompt-layer-1'" v-if="longPress == '2'">
<view class="prompt-loader">
<view class="em" v-for="(item,index) in 15" :key="index"></view>
</view>
<text class="span">{{VoiceTitle}}</text>
</view>
</view>
</view>
// 语音开始
longpressBtn(e) {
console.log(3333)
this.isTouchEnd = false
if(this.userInfo.remark.length>0) return
let that = this
uni.getSetting({
success: (res) => {
console.log('res.authSetting', res.authSetting['scope.record'],that.isOpenDialog);
if(that.isOpenDialog) return
if (!res.authSetting['scope.record']) {
that.isOpenDialog = true
uni.showModal({
title: '授权提示',
content: '检测到您未开启录音权限,是否去设置打开?',
success: function (res) {
if (res.confirm) {
uni.openSetting({
success(resp) {
if(resp.authSetting['scope.record']){
// 已开启
}
}
})
} else if (res.cancel) {
console.log('用户点击取消');
}
},
complete:function(){
console.log('complete');
that.isOpenDialog = false
},
});
}else{
// console.log(444);
// uni.authorize({
// scope: 'scope.record',
// success: (res) => {
// console.log(123,res)
if(this.isTouchEnd) return
recorderManager.onStop((res) => {
console.log(777);
console.log(res);
that.userInfo.remark = res.tempFilePath;
console.log('888',that.userInfo.remark)
})
console.log(555,recorderManager);
that.startPoint = e.touches[0];//记录长按时开始点信息,后面用于计算上划取消时手指滑动的距离。
that.longPress = '2';
that.VoiceText='说话中...';
const options = {
// duration: that.duration, // 指定录音的时长,单位 ms
// sampleRate: 16000, // 采样率
numberOfChannels: 1, // 录音通道数
// encodeBitRate: 96000, // 编码码率
format: 'mp3', // 音频格式,有效值 aac/mp3
frameSize: 10, // 指定帧大小,单位 KB
}
recorderManager.start(options);
// 监听音频开始事件
that.sendLock = false;//长按时是不上锁的。
recorderManager.onStart((res) => {
console.log(1111222)
})
// },
// fail: (res) => {
// uni.showToast({
// title: '喊话失败',
// icon: 'none'
// })
// }
// })
}
}
})
},
// 长按松开录音事件
touchendBtn() {
console.log('end',recorderManager)
this.isTouchEnd = true
this.longPress = '1';
this.VoiceText='按住 说话';
this.VoiceTitle = '松手结束录音'
recorderManager.onStop((res) => {
console.log(this.sendLock);
if (this.sendLock) {
//上锁不发送
} else {//解锁发送,发送网络请求
if (res.duration < 1000)
wx.showToast({
title: "录音时间太短",
icon: "none",
duration: 1000
});
else {
this.userInfo.remark = res.tempFilePath
console.log('end',this.userInfo.remark)
let that = this
uni.showLoading({
mask:true,
title:'上传中...'
})
uni.uploadFile({
url: WebApi.baseUrl + 'app/common/uploads',
filePath: res.tempFilePath,
name: 'files',
header: {
'Authorization': 'Bearer ' + CacheData.token
},
formData: {
'module': '',
'dir': ''
},
success: (res) => {
let data = JSON.parse(res.data);
if (data.code == 200) {
that.userInfo.remark = data.urls
innerAudioContext.src = data.urls
} else {}
},
complete: () => {
uni.hideLoading()
}
});
}
}
})
// this.recordingTimer(this.time)
recorderManager.stop();//结束录音
},
// 删除录音
handleTouchMove(e) {
//touchmove时触发
var moveLenght = e.touches[e.touches.length - 1].clientY - this.startPoint.clientY; //移动距离
if (Math.abs(moveLenght) > 70) {
// wx.showToast({
// title: "松开手指,取消发送",
// icon: "none",
// duration: 60000
// });
// console.log("松开手指,取消发送");
this.VoiceTitle = "松开手指,取消发送";
this.VoiceText='松开手指,取消发送';
this.delBtn()
this.sendLock = true;//触发了上滑取消发送,上锁
} else {
// wx.showToast({
// title: "正在录音,上划取消发送",
// icon: "none",
// duration: 60000
// });
this.VoiceTitle = "松手结束录音";
this.VoiceText='松手结束录音';
this.sendLock = false;//上划距离不足,依然可以发送,不上锁
}
},
delBtn() {
this.delShow = false;
this.time = 0
this.userInfo.remark = '';
// this.VoiceTitle = '松手结束录音'
},
playAudio(type){
if(type == 1){
innerAudioContext.play();
this.isPlayAudio = true
}else{
innerAudioContext.pause()
this.isPlayAudio = false
}
innerAudioContext.onEnded(()=>{
this.isPlayAudio = false
})
// console.log(this.isPlayAudio,2)
},