|
|
@@ -2,8 +2,8 @@
|
|
|
<div class="voiceBroadcast">
|
|
|
<div class="null-box" @click="offButton()"></div>
|
|
|
<p class="get-button"
|
|
|
- v-if="showPermissionButton"
|
|
|
- @click="handlePermissionCheck"
|
|
|
+ v-if="showPermissionButton"
|
|
|
+ @click="handlePermissionCheck"
|
|
|
>点击获取麦克风权限</p>
|
|
|
<div class="broadcast" v-if="!showPermissionButton">
|
|
|
<p class="broadcast_t">语音广播<span>选择喇叭位置</span></p>
|
|
|
@@ -40,7 +40,10 @@
|
|
|
export default {
|
|
|
name: 'voiceBroadcast',
|
|
|
props: {
|
|
|
- trumpetList:[],
|
|
|
+ trumpetList:{
|
|
|
+ type: Array,
|
|
|
+ default: () => []
|
|
|
+ },
|
|
|
},
|
|
|
data () {
|
|
|
return {
|
|
|
@@ -63,7 +66,7 @@
|
|
|
moveDirection: null,
|
|
|
hasTriggeredMethod3: false, // 确保方法3只触发一次
|
|
|
//麦克风权限相关
|
|
|
- showPermissionButton: true, // 控制按钮显示
|
|
|
+ showPermissionButton:true,
|
|
|
permissionStatus: null, // 保存权限状态
|
|
|
stream:null,
|
|
|
}
|
|
|
@@ -78,69 +81,44 @@
|
|
|
offButton(){
|
|
|
this.$parent.voiceButton();
|
|
|
},
|
|
|
- trumpetClick(index) {
|
|
|
- this.trumpetList[index].type = !this.trumpetList[index].type;
|
|
|
- },
|
|
|
- // 触摸开始
|
|
|
handleTouchStart(event) {
|
|
|
+ let self = this;
|
|
|
// 彻底阻止所有默认行为
|
|
|
event.preventDefault();
|
|
|
event.stopPropagation();
|
|
|
+
|
|
|
this.touchStartY = event.touches[0].clientY;
|
|
|
this.hasMoved = false;
|
|
|
this.moveDirection = null;
|
|
|
this.hasTriggeredMethod3 = false;
|
|
|
- // 提前预初始化录音器
|
|
|
- if (!this.recorder && !this.isInitializing) {
|
|
|
- this.preInitRecorder();
|
|
|
- }
|
|
|
- // 设置长按定时器
|
|
|
- this.longPressTimer = setTimeout(() => {
|
|
|
- this.isLongPress = true;
|
|
|
- this.startRecord(); // 执行方法1
|
|
|
- }, 300); // 300ms触发长按
|
|
|
- },
|
|
|
- // 预初始化录音器（不开始录音）
|
|
|
- async preInitRecorder() {
|
|
|
- if (this.isInitializing || this.recorder) return;
|
|
|
|
|
|
- this.isInitializing = true;
|
|
|
- try {
|
|
|
- this.recorder = new Recorder({
|
|
|
- type: "mp3",
|
|
|
- bitRate: 128,
|
|
|
- sampleRate: 44100
|
|
|
- });
|
|
|
-
|
|
|
- await new Promise((resolve, reject) => {
|
|
|
- this.recorder.open(() => {
|
|
|
- console.log("录音器预初始化成功");
|
|
|
- this.isInitializing = false;
|
|
|
- resolve();
|
|
|
- }, (error) => {
|
|
|
- console.error("录音器预初始化失败:", error);
|
|
|
- this.isInitializing = false;
|
|
|
- this.recorder = null;
|
|
|
- reject(error);
|
|
|
- });
|
|
|
- });
|
|
|
- } catch (error) {
|
|
|
- console.error("预初始化失败:", error);
|
|
|
- Toast.fail('麦克风权限获取失败,请允许麦克风权限');
|
|
|
- }
|
|
|
+ Promise.all([
|
|
|
+ //获取开发配置
|
|
|
+ self.delRecord(),
|
|
|
+ ]).then((result) => {
|
|
|
+ // 设置长按定时器
|
|
|
+ self.longPressTimer = setTimeout(() => {
|
|
|
+ self.isLongPress = true;
|
|
|
+ self.startRecord(); // 执行方法1
|
|
|
+ }, 300); // 300ms触发长按
|
|
|
+ }).catch((error) => {})
|
|
|
},
|
|
|
// 触摸移动
|
|
|
handleTouchMove(event) {
|
|
|
// 彻底阻止所有默认行为
|
|
|
event.preventDefault();
|
|
|
event.stopPropagation();
|
|
|
+
|
|
|
if (!this.isLongPress) return;
|
|
|
+
|
|
|
const currentY = event.touches[0].clientY;
|
|
|
const deltaY = currentY - this.touchStartY;
|
|
|
+
|
|
|
// 检测滑动方向（向上滑动为负值）
|
|
|
if (Math.abs(deltaY) > 75) { // 增加阈值避免误触
|
|
|
this.hasMoved = true;
|
|
|
this.moveDirection = deltaY < 0 ? 'up' : 'down';
|
|
|
+
|
|
|
// 向上滑动执行方法3（确保只触发一次）
|
|
|
if (this.moveDirection === 'up' && !this.hasTriggeredMethod3) {
|
|
|
this.hasTriggeredMethod3 = true;
|
|
|
@@ -152,56 +130,47 @@
|
|
|
handleTouchEnd() {
|
|
|
// 清除长按定时器
|
|
|
clearTimeout(this.longPressTimer);
|
|
|
+
|
|
|
if (this.isLongPress) {
|
|
|
this.stopRecord(); // 执行方法2
|
|
|
}
|
|
|
+
|
|
|
// 重置状态
|
|
|
this.isLongPress = false;
|
|
|
this.hasMoved = false;
|
|
|
this.moveDirection = null;
|
|
|
},
|
|
|
+ // 关键：禁用上下文菜单（长按菜单）
|
|
|
+ handleContextMenu(e) {
|
|
|
+ e.preventDefault();
|
|
|
+ return false;
|
|
|
+ },
|
|
|
+ //获取权限并且初始化
|
|
|
async initRecorder() {
|
|
|
- this.recorder = new Recorder({
|
|
|
- type: "mp3", // 输出格式
|
|
|
- bitRate: 128, // 比特率
|
|
|
- sampleRate: 44100 // 采样率
|
|
|
- });
|
|
|
- this.recorder.open(() => {
|
|
|
- console.log("录音器初始化成功");
|
|
|
- this.recorder.start(); // 初始化后立即开始录音
|
|
|
- }, (error) => {
|
|
|
- console.error("录音器初始化失败:", error);
|
|
|
- Toast.fail('麦克风权限获取失败,请允许麦克风权限');
|
|
|
- });
|
|
|
- // try {
|
|
|
- // // 获取麦克风权限
|
|
|
- // this.stream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
|
|
- // this.recorder = new Recorder({
|
|
|
- // type: "mp3", // 输出格式
|
|
|
- // bitRate: 128, // 比特率
|
|
|
- // sampleRate: 44100 // 采样率
|
|
|
- // });
|
|
|
- //
|
|
|
- // this.recorder.open(() => {
|
|
|
- // // console.log("录音器初始化成功");
|
|
|
- // this.recorder.start(); // 初始化后立即开始录音
|
|
|
- // }, (error) => {
|
|
|
- // console.error("录音器初始化失败:", error);
|
|
|
- // Toast.fail('麦克风权限获取失败,请允许麦克风权限');
|
|
|
- // });
|
|
|
- // } catch (err) {
|
|
|
- // console.error("获取麦克风失败:", err);
|
|
|
- // Toast.fail('请允许麦克风权限');
|
|
|
- // }
|
|
|
+ try {
|
|
|
+ // 获取麦克风权限
|
|
|
+ this.stream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
|
|
+ this.recorder = new Recorder({
|
|
|
+ type: "mp3", // 输出格式
|
|
|
+ bitRate: 128, // 比特率
|
|
|
+ sampleRate: 44100 // 采样率
|
|
|
+ });
|
|
|
+
|
|
|
+ this.recorder.open(() => {
|
|
|
+ // console.log("录音器初始化成功");
|
|
|
+ this.recorder.start(); // 初始化后立即开始录音
|
|
|
+ }, (error) => {
|
|
|
+ console.error("录音器初始化失败:", error);
|
|
|
+ Toast.fail('麦克风权限获取失败,请允许麦克风权限');
|
|
|
+ });
|
|
|
+ } catch (err) {
|
|
|
+ console.error("获取麦克风失败:", err);
|
|
|
+ Toast.fail('请允许麦克风权限');
|
|
|
+ }
|
|
|
},
|
|
|
// 开始录音
|
|
|
async startRecord() {
|
|
|
let self = this;
|
|
|
- if (!this.recorder) {
|
|
|
- await this.initRecorder();
|
|
|
- // this.startRecord()
|
|
|
- return;
|
|
|
- }
|
|
|
let num = 0;
|
|
|
for (let i = 0; i < self.trumpetList.length; i++) {
|
|
|
if (self.trumpetList[i].type) {
|
|
|
@@ -212,75 +181,43 @@
|
|
|
Toast.fail('请选择喇叭');
|
|
|
return
|
|
|
}
|
|
|
- // 如果录音器不存在或未初始化完成，先初始化
|
|
|
if (!this.recorder) {
|
|
|
- try {
|
|
|
- await this.preInitRecorder();
|
|
|
- } catch (error) {
|
|
|
- Toast.fail('录音器初始化失败');
|
|
|
- return;
|
|
|
- }
|
|
|
- }
|
|
|
- // 确保录音器已经打开
|
|
|
- if (this.recorder) {
|
|
|
- this.recorder.start();
|
|
|
- this.recording = true;
|
|
|
- this.liveType = true;
|
|
|
- Toast('录音开始');
|
|
|
+ await this.initRecorder();
|
|
|
+ this.startRecord();
|
|
|
+ return;
|
|
|
}
|
|
|
- // this.recorder.start();
|
|
|
- // this.recording = true;
|
|
|
- // this.liveType = true;
|
|
|
- // Toast('录音开始');
|
|
|
+ this.recorder.start(); // 初始化后立即开始录音
|
|
|
+ this.recording = true;
|
|
|
+ this.liveType = true;
|
|
|
+ Toast('录音开始');
|
|
|
},
|
|
|
// 停止录音
|
|
|
stopRecord() {
|
|
|
- // 清除长按定时器
|
|
|
- clearTimeout(this.longPressTimer);
|
|
|
- if (this.isLongPress && this.recorder && this.recording) {
|
|
|
- this.recorder.stop((blob, duration) => {
|
|
|
- this.recording = false;
|
|
|
- this.liveType = false;
|
|
|
- this.audioBlob = blob;
|
|
|
- this.audioPath = URL.createObjectURL(blob);
|
|
|
- this.uploadAudio();
|
|
|
- }, (error) => {
|
|
|
- console.error("录音失败:", error);
|
|
|
- Toast('录音失败');
|
|
|
- this.recording = false;
|
|
|
- this.liveType = false;
|
|
|
- });
|
|
|
- }
|
|
|
- // if (!this.recorder || !this.recording) return;
|
|
|
- // this.recorder.stop((blob, duration) => {
|
|
|
- // this.recording = false;
|
|
|
- // this.liveType = false;
|
|
|
- // this.audioBlob = blob;
|
|
|
- // // 生成临时文件路径
|
|
|
- // this.audioPath = URL.createObjectURL(blob);
|
|
|
- // this.uploadAudio();
|
|
|
- // }, (error) => {
|
|
|
- // console.error("录音失败:", error);
|
|
|
- // Toast('录音失败');
|
|
|
- // });
|
|
|
+ if (!this.recorder || !this.recording) return;
|
|
|
+ this.recorder.stop((blob, duration) => {
|
|
|
+ this.recording = false;
|
|
|
+ this.liveType = false;
|
|
|
+ this.audioBlob = blob;
|
|
|
+ // 生成临时文件路径
|
|
|
+ this.audioPath = URL.createObjectURL(blob);
|
|
|
+ this.uploadAudio();
|
|
|
+ }, (error) => {
|
|
|
+ console.error("录音失败:", error);
|
|
|
+ Toast('录音失败');
|
|
|
+ });
|
|
|
},
|
|
|
delRecord(){
|
|
|
- if (this.recorder && this.recording) {
|
|
|
- this.recorder.stop(() => {
|
|
|
- this.recording = false;
|
|
|
- this.liveType = false;
|
|
|
- this.audioBlob = null;
|
|
|
- this.audioPath = null;
|
|
|
- Toast('已取消发送');
|
|
|
- });
|
|
|
+ console.log('delRecord1',this.recorder)
|
|
|
+ if(this.recorder){
|
|
|
+ console.log('delRecord22',this.recorder)
|
|
|
+ this.recorder.stop((blob, duration) => {
|
|
|
+ this.$set(this,'recording',false);
|
|
|
+ this.$set(this,'liveType',false);
|
|
|
+ this.$set(this,'audioBlob',null);
|
|
|
+ this.$set(this,'audioPath',null);
|
|
|
+ })
|
|
|
+ this.$set(this,'recorder',null);
|
|
|
}
|
|
|
- this.isLongPress = false;
|
|
|
- // this.recorder.stop((blob, duration) => {
|
|
|
- // this.recording = false;
|
|
|
- // this.liveType = false;
|
|
|
- // this.audioBlob = null;
|
|
|
- // this.audioPath = null;
|
|
|
- // })
|
|
|
},
|
|
|
// 上传录音文件
|
|
|
uploadAudio() {
|
|
|
@@ -294,6 +231,7 @@
|
|
|
const file = new File([blob], 'audio.mp3', { type: 'audio/mp3' });
|
|
|
let formData = new FormData();
|
|
|
formData.append("file", file);
|
|
|
+ formData.append("ifAsy", false);
|
|
|
systemFileUpload(formData).then(response => {
|
|
|
console.log('response',response)
|
|
|
let url = localStorage.getItem('fileBrowseEnvironmentExtranet') + '/' + response.data.url;
|
|
|
@@ -322,6 +260,14 @@
|
|
|
Toast.success('发送成功');
|
|
|
});
|
|
|
},
|
|
|
+ //点击选择喇叭
|
|
|
+ trumpetClick(index) {
|
|
|
+ this.trumpetList[index].type = !this.trumpetList[index].type;
|
|
|
+ },
|
|
|
+ imagesUrl(imgUrl) {
|
|
|
+ return 'https://zj-wechat.oss-cn-beijing.aliyuncs.com/xcx_images/xcx_v3/' + imgUrl
|
|
|
+ },
|
|
|
+ /*=====================获取权限=====================*/
|
|
|
//麦克风权限相关
|
|
|
async checkPermission() {
|
|
|
// 检查浏览器支持性[citation:4][citation:7]
|
|
|
@@ -339,23 +285,8 @@
|
|
|
return 'error';
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
async handlePermissionCheck() {
|
|
|
this.preInitRecorder();
|
|
|
- // let userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
|
|
|
- // if (userAgent.indexOf("Android") > -1 || userAgent.indexOf("Windows") > -1) {
|
|
|
- // this.recorder = new Recorder({
|
|
|
- // type: "mp3", // 输出格式
|
|
|
- // bitRate: 128, // 比特率
|
|
|
- // sampleRate: 44100 // 采样率
|
|
|
- // });
|
|
|
- // this.recorder.open(() => {
|
|
|
- // console.log("111111111录音器初始化成功");
|
|
|
- // this.recorder.start(); // 初始化后立即开始录音
|
|
|
- // }, (error) => {
|
|
|
- // console.error("1111111录音器初始化失败:", error);
|
|
|
- // });
|
|
|
- // }
|
|
|
const status = await this.checkPermission();
|
|
|
this.permissionStatus = status;
|
|
|
|
|
|
@@ -385,7 +316,35 @@
|
|
|
this.showPermissionButton = true;
|
|
|
}
|
|
|
},
|
|
|
+ // 预初始化录音器（不开始录音）
|
|
|
+ async preInitRecorder() {
|
|
|
+ if (this.isInitializing || this.recorder) return;
|
|
|
|
|
|
+ this.isInitializing = true;
|
|
|
+ try {
|
|
|
+ this.recorder = new Recorder({
|
|
|
+ type: "mp3",
|
|
|
+ bitRate: 128,
|
|
|
+ sampleRate: 44100
|
|
|
+ });
|
|
|
+
|
|
|
+ await new Promise((resolve, reject) => {
|
|
|
+ this.recorder.open(() => {
|
|
|
+ console.log("录音器预初始化成功");
|
|
|
+ this.isInitializing = false;
|
|
|
+ resolve();
|
|
|
+ }, (error) => {
|
|
|
+ console.error("录音器预初始化失败:", error);
|
|
|
+ this.isInitializing = false;
|
|
|
+ this.recorder = null;
|
|
|
+ reject(error);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ } catch (error) {
|
|
|
+ console.error("预初始化失败:", error);
|
|
|
+ Toast.fail('麦克风权限获取失败,请允许麦克风权限');
|
|
|
+ }
|
|
|
+ },
|
|
|
async requestMicrophonePermission() {
|
|
|
try {
|
|
|
// 请求麦克风权限[citation:1][citation:2][citation:5]
|
|
|
@@ -413,7 +372,7 @@
|
|
|
},
|
|
|
showSettingsGuide() {
|
|
|
Toast.fail('请允许麦克风访问权限');
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
}
|
|
|
</script>
|
dedsudiyu