hookehuyr

fix

1 <!-- 1 <!--
2 * @Date: 2024-02-01 11:11:21 2 * @Date: 2024-02-01 11:11:21
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-02-07 16:22:39 4 + * @LastEditTime: 2024-02-07 16:47:50
5 * @FilePath: /my-record/src/views/h5-record.vue 5 * @FilePath: /my-record/src/views/h5-record.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -21,19 +21,21 @@ ...@@ -21,19 +21,21 @@
21 <audio ref="LogAudioPlayer" style="width: 100%"></audio> 21 <audio ref="LogAudioPlayer" style="width: 100%"></audio>
22 </div> 22 </div>
23 23
24 - <van-floating-panel> 24 + <div ref="root">
25 - <van-cell-group> 25 + <van-floating-panel v-model:height="height" :anchors="anchors">
26 - <van-cell title="打开录音,请求权限" icon="music-o" @click.native="recOpen" /> 26 + <van-cell-group>
27 - <van-cell title="关闭录音,释放资源" icon="close" @click.native="recClose" /> 27 + <van-cell title="打开录音,请求权限" icon="music-o" @click.native="recOpen" />
28 - <van-cell title="录制" icon="volume-o" @click.native="recStart" /> 28 + <van-cell title="关闭录音,释放资源" icon="close" @click.native="recClose" />
29 - <van-cell title="暂停" icon="pause-circle-o" @click.native="recPause" /> 29 + <van-cell title="录制" icon="volume-o" @click.native="recStart" />
30 - <van-cell title="继续录音" icon="revoke" @click.native="recResume" /> 30 + <van-cell title="暂停" icon="pause-circle-o" @click.native="recPause" />
31 - <van-cell title="停止录音" icon="stop-circle-o" @click.native="recStop" /> 31 + <van-cell title="继续录音" icon="revoke" @click.native="recResume" />
32 - <van-cell title="播放录音" icon="play-circle-o" @click.native="recPlayLast" /> 32 + <van-cell title="停止录音" icon="stop-circle-o" @click.native="recStop" />
33 - <!-- <van-cell title="下载录音" icon="down" @click.native="recDownLast" /> --> 33 + <van-cell title="播放录音" icon="play-circle-o" @click.native="recPlayLast" />
34 - <van-cell title="上传录音" icon="upgrade" @click.native="recUploadLast" /> 34 + <!-- <van-cell title="下载录音" icon="down" @click.native="recDownLast" /> -->
35 - </van-cell-group> 35 + <van-cell title="上传录音" icon="upgrade" @click.native="recUploadLast" />
36 - </van-floating-panel> 36 + </van-cell-group>
37 + </van-floating-panel>
38 + </div>
37 39
38 </div> 40 </div>
39 </template> 41 </template>
...@@ -41,7 +43,8 @@ ...@@ -41,7 +43,8 @@
41 <script setup> 43 <script setup>
42 import { ref } from 'vue' 44 import { ref } from 'vue'
43 import { useRoute, useRouter } from 'vue-router' 45 import { useRoute, useRouter } from 'vue-router'
44 - 46 +import { showToast } from 'vant';
47 +import { useClickAway } from '@vant/use';
45 import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js' 48 import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
46 //import { } from '@/utils/generateModules.js' 49 //import { } from '@/utils/generateModules.js'
47 //import { } from '@/utils/generateIcons.js' 50 //import { } from '@/utils/generateIcons.js'
...@@ -60,6 +63,18 @@ const $route = useRoute(); ...@@ -60,6 +63,18 @@ const $route = useRoute();
60 const $router = useRouter(); 63 const $router = useRouter();
61 useTitle($route.meta.title); 64 useTitle($route.meta.title);
62 65
66 +const anchors = [
67 + // Math.round(0.2 * window.innerHeight),
68 + 150,
69 + Math.round(0.7 * window.innerHeight),
70 +];
71 +const height = ref(anchors[0]);
72 +const root = ref();
73 +useClickAway(root, () => {
74 + console.log('click outside!');
75 + height.value = anchors[0];
76 +});
77 +
63 const type = ref("mp3"); // 音频类型 78 const type = ref("mp3"); // 音频类型
64 const bitRate = ref(32); // 比特率 79 const bitRate = ref(32); // 比特率
65 const sampleRate = ref(32000); // 采样率 80 const sampleRate = ref(32000); // 采样率
...@@ -67,7 +82,7 @@ const duration = ref(0); ...@@ -67,7 +82,7 @@ const duration = ref(0);
67 const durationTxt = ref("0"); 82 const durationTxt = ref("0");
68 const powerLevel = ref(0); 83 const powerLevel = ref(0);
69 const logs = ref([]); 84 const logs = ref([]);
70 -const recLogLast = ref({}); 85 +const recLogLast = ref(null);
71 const LogAudioPlayer = ref(null); 86 const LogAudioPlayer = ref(null);
72 87
73 const rec = ref(null); // 录音控件实例 88 const rec = ref(null); // 录音控件实例
...@@ -108,6 +123,8 @@ const reclog = (msg, color, res) => { ...@@ -108,6 +123,8 @@ const reclog = (msg, color, res) => {
108 recLogLast.value = obj; 123 recLogLast.value = obj;
109 } 124 }
110 logs.value.splice(0, 0, obj); 125 logs.value.splice(0, 0, obj);
126 + //
127 + showToast(msg);
111 } 128 }
112 129
113 /** 130 /**
...@@ -230,6 +247,11 @@ const recPlay = (idx) => { ...@@ -230,6 +247,11 @@ const recPlay = (idx) => {
230 * 播放录音 247 * 播放录音
231 */ 248 */
232 const recPlayLast = () => { 249 const recPlayLast = () => {
250 + if (!(rec.value && Recorder.IsOpen())) {
251 + reclog("未打开录音", 1);
252 + return;
253 + }
254 + console.warn(recLogLast.value);
233 if (!recLogLast.value) { 255 if (!recLogLast.value) {
234 reclog("请先录音,然后停止后再播放", 1); 256 reclog("请先录音,然后停止后再播放", 1);
235 return; 257 return;
......