uniapp的语音功能

简单的写一下，使用的是手机的录音功能，录制成文件之后通过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().platformif (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 = falsethis.showTools = falsethis.showFace = falseconsole.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 = 0self.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 = 1this.imagetest3 = require('../../../static/Voice-2.gif')},//隐藏录音 显示暂停showBlackBoxPause() {this.bt_recoding = 2this.imagetest3 = require('../../../static/Voice-1.png')},//隐藏录音showBlackBoxNone() {console.log(1222)this.isShowYuyin = falsethis.isShowQuxiao = false},setTimer() {let that = thisthis.isShowYuyin = truevar 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>

uniapp的语音功能相关推荐

uni-app 微信同声传译，实现AI语音功能（语音转文字，文字转语音，英汉互译
uni-app 微信同声传译,实现AI语音功能(语音转文字,文字转语音,英汉互译) 一:添加插件 1.登录微信公众号平台,进入左边导航栏的设置,选择第三方设置,,添加插件,申请添加微信同声传译插件 2 ...
真人语音朗读软件_才知道，手机还自带文字转语音功能，一键按下便可实现，网友：赞...
下面我们来说说关于手机,电脑上的文字转语音方法,如果你也感兴趣的,那就一起来看看吧! 一.手机自带 1.华为手机其实华为手机就自带了文字转语音功能,只要将手机打开之后,点击[设置]-[智能辅助]-[ ...
TTS Service Extended (进程:com.google.tts)意外停止恢复被阉割的TTS文字转语音功能
TTS Service Extended (进程:com.google.tts)意外停止恢复被阉割的TTS文字转语音功能 TTS Service Extended (进程:com.google.tt ...
微鲸科大讯飞、出门问问合作 TA的语音功能怎么样？
原标题:微鲸科大讯飞.出门问问合作 TA的语音功能怎么样? 首先科大讯飞成立于1999年,近二十年的科技研发和技术积累让其成为中国最大的智能语音技术提供商,在智能语音技术领域有着长期的研究积累,并在中 ...
html5d调用百度语音,易语言调用百度语音平台实现文字转换语音功能的代码
调用百度语音平台实现文字转换语音功能此功能需要加载精易模块5.6 .版本 2 .支持库 wmp9 .程序集窗口程序集1 .子程序 _试听按钮_被单击播放器1.地址＝ "http:// ...
uni-app 实现语音播放实现思路和代码
#uni-app 实现语音播放功能demo == 思路 1== 从消息列表中筛选出单独的语音列表, 在消息列表中添加字段,语音列表的index和消息列表中的index对应语音列表添加标识,区分播放状 ...
php微信聊天带语音,使用Html5多媒体实现微信语音功能
随着微信等社交App的兴起,语音聊天成为很多App必备功能,大到将语音聊天作为主要功能的社交App,小到电商App的语音客服.店小二功能,语音聊天成为了必不可少的方式. 但是很多人感觉网页端语音离我们 ...
vue 微信录音倒计时_vue的微信语音功能，录音+对接口返回amr音频播放-Go语言中文社区...
vue的微信语音功能,录音+对接口返回amr音频播放最近的新项目需要调用微信的录音功能,但是后台又不给音频转码,无奈之下就踏上了研究前端音频编码器这东西. 参考的GitHub仓库--Recorder ...
C语言怎么实现语音功能
在 C 语言中实现语音功能通常需要使用一个第三方库来进行处理.具体来说,你需要找到一个能够将文本转换为语音的库,然后在你的 C 程序中调用这个库的相应函数即可. 有一些常用的库可供选择,比如 eSpe ...
【HTML5】------- JavaScript 实现网页版HTML5发送语音功能
1.浏览器实现HTML5发送语音功能(转载处:https://www.xuanmo.xin/details/1784) 这是一次后台同事让做的一个功能,但是在手机端兼容不好,Safari清一色不支持, ...

uniapp的语音功能

uniapp的语音功能相关推荐

最新文章

热门文章