Showing
1 changed file
with
38 additions
and
16 deletions
| 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; | ... | ... |
-
Please register or login to post a comment