uniapp的语音功能
简单的写一下 ，使用的是手机的录音功能，录制成文件之后通过websocket发送到后端的服务上
·
简单的写一下 ，使用的是手机的录音功能，录制成文件之后通过websocket发送到后端的服务上
<template>
<view class="chat">
<div >
<view class="send-inp u-flex-1" >
<view class="uInputBox u-flex">
<div class="inputYuYin" @touchstart="startRecord" @touchend="endRecord" @touchmove="moveRecordAction">
<button class="yuyinanniu" ref="tag" v-if="isShowYuyin == false">按住 说话</button>
<button class="yuyinanniu" ref="tag" v-if="isShowYuyin == true">松开 发送</button>
</div>
</view>
</view>
</div>
<div class="blackBoxSpeakbg" v-show="isShowYuyin" >
<div ref="tagnew" class="blackBoxSpeak" :style="{background:`url(${imagetest3}) no-repeat center 10px/67.2px 80px`}">
<p class="blackBoxSpeakConent" ref="bt_recoding">
<text v-if="bt_recoding == 1">手指上划，取消发送</text>
<text v-if="bt_recoding == 2">松开手指,取消</text>
</p>
</div>
</div>
</view>
</template>
<script>
var recorderManager = uni.getRecorderManager();
var innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
export default {
data() {
return {
Loop:'',
voiceIS:true,
isShowYuyin:false,//语音
isShowQuxiao:false,
imagetest3:'',
audioIS:'1',
bt_recoding:0,//语音
};
},
mounted() {
this.getWindowSize();
},
computed: {
intIntervalTime() {
// 用于显示整数的秒数
console.log(Math.round(this.intervalTime));
return Math.round(this.intervalTime);
}
},
onLoad(options) {
let self = this;
recorderManager.onStop(function(res) {
console.log("录音停止了" + JSON.stringify(res)); //返回录音的临时保存地址, 可用于后面的播放
self.voicePath = res.tempFilePath;
});
},
onUnload() {
console.log('暂停播放!');
setTimeout(()=>{
innerAudioContext.stop();
},500)
getApp().onSocketMessage(this);
uni.$off('messageHouse');
this.$u.vuex('messageHouse', null);
},
onShow() {
// this.checkSocket();
},
methods: {
touchstart(str) {
let that = this;
clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器
this.Loop = setTimeout(()=> {
uni.setClipboardData({
data: str,
success: () => {
that.$u.toast('复制成功');
}
});
},1000);
},
autyou(){
let env = uni.getSystemInfoSync().platform
if (env === 'android') {
permision.requestAndroidPermission('android.permission.RECORD_AUDIO').then((e)=>{
if(e===-1){
uni.showToast({
title:'您已经永久拒绝录音权限，请在应用设置中手动打开',
icon:'none',
})
}
else if(e===0){
uni.showToast({
title:'您拒绝了录音授权',
icon:'none',
})
}
else if(e===1){
this.voiceIS = false
this.showTools = false
this.showFace = false
console.log('通过')
}
else {
uni.showToast({
title:'授权返回值错误',
icon:'none',
})
}
}).catch((err)=>{
uni.showToast({
title:'拉起录音授权失败',
icon:'none',
})
})
} else if (env === 'ios') {
if(permision.judgeIosPermission("record")){
this.voiceIS = false;
this.showTools = false;
this.showFace = false;
}else{
uni.showToast({
title:'您拒绝了录音授权，请在应用设置中手动打开',
icon:'none',
})
}
}
},
voicetAP (){
this.voiceIS = true
},
// 监听socket发送消息
// checkSocket() {
// let _self = this.reconnectSocket;
// let socketState = uni.getStorageSync('socketState');
// if (socketState ) {
// console.log(socketState)
// if(!socketState.isConnected){
// _self();
// console.log('客服系统异常，是否重新连接')
// uni.showModal({
// content: '客服系统异常，是否重新连接',
// success: (res) => {
// if (res.confirm) {
// _self();
// } else if (res.cancel) {
// console.log('用户点击取消');
// }
// }
// })
// }
// }
// },
startRecord(event) {
console.log('测试4455');
const self = this;
this.longClick = 0;
this.intervalTime = 0;
clearTimeout(this.loop);
clearInterval(this.timer);
setTimeout(()=>{
innerAudioContext.stop();
},500)
this.audioIS = '../../../static/audio.png'
this.loop = setTimeout(function() {
this.longClick = 1;
this.isendRecor = false;
event.preventDefault(); //阻止浏览器默认行为
this.posStart = 0;
this.posStart = event.touches[0].pageY; //获取起点坐标
this.setTimer();
//显示录音 隐藏暂停
this.showBlackBoxSpeak();
}.bind(this), 500);
this.timer = setInterval(() => {
console.log('测试是否结束')
this.intervalTime += 0.5;
if(this.intervalTime >= 6){
clearTimeout(this.loop);
clearInterval(this.timer);
this.isendRecor = true;
if (this.isRecord) {
setTimeout(() => {
recorderManager.stop();
this.isRecord = false;
console.log(this.isRecord);
}, 500); //延迟小段时间停止录音, 更好的体验
}
uni.showToast({
title: '语音超出时长',
});
this.showBlackBoxNone();
setTimeout(()=>{
self.voiceUploadFile()
},600)
return;
}
if (this.intervalTime >= 0 && ! this.isRecord) {
//如果用户录制的时间太短,就不会去开启录音, 因为有个bug: recorderManager.stop()在短时间内开启在关闭的话,实际上他还在不停地录音,不知道你们有没有遇到过
console.log("开始录音");
this.isRecord = true;
this.intervalTime = 0;
recorderManager.start({
format: "mp3",
duration:60000,
});
}
}, 500);
},
endRecord(event) {
let self = this;
clearTimeout(self.loop);
clearInterval(self.timer);
event.preventDefault(); //阻止浏览器默认行为
this.posEnd = 0;
this.posEnd = event.changedTouches[0].pageY; //获取终点
if (this.timeOutEvent != 0 && this.longClick == 0) {
console.log('非正常结束')
this.initStatus();
this.showBlackBoxNone();
} else {
if (this.posStart - this.posEnd < 100) {
console.log('测试进来')
if (self.isendRecor == true){
return;
}
console.log('发送成功')
if (self.intervalTime <= 1) {
console.log("录音太短了!!!");
recorderManager.stop();
self.intervalTime = 0
self.isRecord = false;
self.showBlackBoxNone();
uni.showToast({
title: '语音太短了',
});
clearTimeout(self.loop);
clearInterval(self.timer);
return;
}else{
self.voiceUploadFile()
this.showBlackBoxNone();
}
} else {
console.log('取消发送')
this.initStatus();
this.showBlackBoxNone();
}
}
if (this.isRecord) {
setTimeout(() => {
recorderManager.stop();
self.isRecord = false;
console.log(self.isRecord);
}, 500); //延迟小段时间停止录音, 更好的体验
}
},
moveRecordAction(event){
clearTimeout(this.loop);
this.loop = 0;
this.posMove = event.touches[0].pageY; //获取滑动实时坐标
if (this.posStart - this.posMove < 100) {
//隐藏录音 显示暂停
this.showBlackBoxSpeak();
} else {
//显示录音 隐藏暂停
this.showBlackBoxPause();
}
},
//初始化状态
initStatus() {
// var bt_recoding = this.$refs.bt_recoding;
// bt_recoding.textContent = '按住 说话';
this.bt_recoding = 1
//全部隐藏
this.showBlackBoxNone();
},
//显示录音 隐藏暂停
showBlackBoxSpeak() {
this.bt_recoding = 1
this.imagetest3 = require('../../../static/Voice-2.gif')
},
//隐藏录音 显示暂停
showBlackBoxPause() {
this.bt_recoding = 2
this.imagetest3 = require('../../../static/Voice-1.png')
},
//隐藏录音
showBlackBoxNone() {
console.log(1222)
this.isShowYuyin = false
this.isShowQuxiao = false
},
setTimer() {
let that = this
this.isShowYuyin = true
var index = [9, 8, 7, 6, 5, 4, 3, 2, 1, 2, 3, 4, 5, 6, 7, 8, 9];
var num = index.length;
// var blackBoxSpeak = that.$refs.tagnew;
},
touchend() {
clearInterval(this.Loop);
},
handletouchmove(){
clearTimeout(this.Loop); //清除定时器
},
}
};
</script>
<style lang="scss" scoped>
@import '../../../static/css/style.scss';
.uInputBox {
.inputStyle {
padding: 0 20rpx !important;
height: 35px;
overflow: hidden;
}
}
.audioShow{
display: flex;width: 80px;align-items: center;
}
.blackBoxSpeak {
z-index: 9999999999;
width: 176px;
height: 176px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
/* background: url("../../static/images/ic_record@2x.png") no-repeat 28px 16px/65px 104px, */
/* url("../../static/images/ic_record_ripple@2x-9.png") no-repeat 111.2px 32px/28.8px 88px; */
background-color: rgba(0, 0, 0, .7);
border-radius: 12px;
display: display;
}
.blackBoxSpeakbg {
z-index: 1;
width: 176px;
height: 176px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
/* background: url("../../static/images/ic_record@2x.png") no-repeat 28px 16px/65px 104px, */
/* url("../../static/images/ic_record_ripple@2x-9.png") no-repeat 111.2px 32px/28.8px 88px; */
background-color: rgba(0, 0, 0, .5);
display: display;
border-radius: 12px;
}
.blackBoxSpeakConent {
font: 14.4px '微软雅黑 Light';
position: absolute;
left: 0;
right: 0;
bottom: 12px;
display: block;
text-align: center;
width: 90%;
padding: 8px 0;
margin: auto;
color: #ffffff;
font-weight: 200;
border-radius: 4px;
}
.blackBoxPause {
z-index: 999999999;
width: 176px;
height: 176px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
/* background-image: url(../../static/images/tu.png); */
/* url("../../static/images/ic_record_ripple@2x-9.png") no-repeat 111.2px 32px/28.8px 88px; */
background: rgba(0, 0, 0, .7);
display: display;
border-radius: 12px;
}
.blackBoxPauseContent {
font: 14.4px '微软雅黑 Light';
position: absolute;
left: 0;
right: 0;
bottom: 12px;
display: block;
text-align: center;
width: 90%;
padding: 8px 0;
margin: auto;
color: #ffffff;
font-weight: 200;
border-radius: 4px;
}
.inputYuYin{
position: relative;
bottom: 0px;
width: 100%;
left: 0px;
}
.yuyinanniu {
height: 2em;
line-height: 2em;
}
</style>
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)