Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
da3d0c19 1 parent 4da6e1fc

feat: 启用调试模式并优化音频播放器功能 

- 在.env中启用VITE_CONSOLE调试模式
- 在tools.js中添加iOS设备和微信浏览器的检测逻辑
- 移除AudioPlayer.vue中的音量控制滑块
- 在test.vue中添加音量设置功能，支持微信环境下的音量控制
Inline Side-by-side
Showing 4 changed files with 49 additions and 13 deletions
...@@ -11,7 +11,7 @@ VITE_PROXY_PREFIX = /srv/ ...@@ -11,7 +11,7 @@ VITE_PROXY_PREFIX = /srv/
11 VITE_OUTDIR = mlaj 11 VITE_OUTDIR = mlaj
12 12
13 # 是否开启调试 13 # 是否开启调试
14 -VITE_CONSOLE = 0 14 +VITE_CONSOLE = 1
15 15
16 # appID相关 16 # appID相关
17 VITE_APPID=微信appID 17 VITE_APPID=微信appID
......
1 <!-- 1 <!--
2 * @Date: 2025-04-07 12:35:35 2 * @Date: 2025-04-07 12:35:35
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-04-07 14:30:26 4 + * @LastEditTime: 2025-04-07 16:41:23
5 * @FilePath: /mlaj/src/components/ui/audioPlayer.vue 5 * @FilePath: /mlaj/src/components/ui/audioPlayer.vue
6 * @Description: 音频播放器组件，支持播放控制、进度条调节、音量控制、播放列表等功能 6 * @Description: 音频播放器组件，支持播放控制、进度条调节、音量控制、播放列表等功能
7 --> 7 -->
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
75 <!-- 音量与设置：音量控制滑块和播放列表按钮 --> 75 <!-- 音量与设置：音量控制滑块和播放列表按钮 -->
76 <div class="flex items-center justify-between mt-6"> 76 <div class="flex items-center justify-between mt-6">
77 <div class="flex items-center space-x-2"> 77 <div class="flex items-center space-x-2">
78 - <font-awesome-icon :icon="volume === 0 ? 'volume-off' : 'volume-up'" /> 78 + <!-- <font-awesome-icon :icon="volume === 0 ? 'volume-off' : 'volume-up'" />
79 <input 79 <input
80 type="range" 80 type="range"
81 :value="volume" 81 :value="volume"
...@@ -84,7 +84,7 @@ ...@@ -84,7 +84,7 @@
84 max="100" 84 max="100"
85 step="1" 85 step="1"
86 class="w-24 appearance-none bg-gray-200 rounded-full h-1.5 cursor-pointer" 86 class="w-24 appearance-none bg-gray-200 rounded-full h-1.5 cursor-pointer"
87 - > 87 + > -->
88 </div> 88 </div>
89 89
90 <div class="flex items-center space-x-4"> 90 <div class="flex items-center space-x-4">
...@@ -117,6 +117,7 @@ ...@@ -117,6 +117,7 @@
117 <script setup> 117 <script setup>
118 import { ref, computed, onMounted, watch } from 'vue' 118 import { ref, computed, onMounted, watch } from 'vue'
119 import { formatTime } from '@/utils/time' 119 import { formatTime } from '@/utils/time'
120 +import { wxInfo } from '@/utils/tools'
120 121
121 // 组件属性定义 122 // 组件属性定义
122 const props = defineProps({ 123 const props = defineProps({
......
1 /* 1 /*
2 * @Date: 2022-04-18 15:59:42 2 * @Date: 2022-04-18 15:59:42
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-03-25 17:03:47 4 + * @LastEditTime: 2025-04-07 15:18:25
5 * @FilePath: /mlaj/src/utils/tools.js 5 * @FilePath: /mlaj/src/utils/tools.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
...@@ -26,6 +26,9 @@ const wxInfo = () => { ...@@ -26,6 +26,9 @@ const wxInfo = () => {
26 let isWeiXin = (uAgent.match(/MicroMessenger/i) == 'micromessenger') ? true : false; 26 let isWeiXin = (uAgent.match(/MicroMessenger/i) == 'micromessenger') ? true : false;
27 let isWeiXinDesktop = isWeiXin && uAgent.indexOf('wechat') > -1 ? true : false; 27 let isWeiXinDesktop = isWeiXin && uAgent.indexOf('wechat') > -1 ? true : false;
28 let isPC = (uAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone|micromessenger)/i)) ? false : true; 28 let isPC = (uAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone|micromessenger)/i)) ? false : true;
29 + let isIOS = /iphone|ipad|ipod/.test(uAgent); // iOS设备
30 + let isWeChatBrowser = /micromessenger/.test(uAgent); // 微信浏览器
31 + let isIOSWeChat = isIOS && isWeChatBrowser;
29 return { 32 return {
30 isAndroid, 33 isAndroid,
31 isiOS, 34 isiOS,
...@@ -33,7 +36,8 @@ const wxInfo = () => { ...@@ -33,7 +36,8 @@ const wxInfo = () => {
33 isMobile, 36 isMobile,
34 isIpad, 37 isIpad,
35 isPC, 38 isPC,
36 - isWeiXinDesktop 39 + isWeiXinDesktop,
40 + isIOSWeChat
37 }; 41 };
38 }; 42 };
39 43
......
1 -<!-- 1 +<template>
2 - * @Date: 2025-03-21 13:12:37 2 + <button @click="setVolume">设置音量</button>
3 - * @LastEditors: hookehuyr hookehuyr@gmail.com 3 + <audio ref="audioRef" src="https://img.tukuppt.com/newpreview_music/09/03/95/5c8af46b01eb138909.mp3"></audio>
4 - * @LastEditTime: 2025-04-07 12:57:28 4 +</template>
5 - * @FilePath: /mlaj/src/views/test.vue 5 +
6 - * @Description: 文件描述 6 +<script setup>
7 ---> 7 +import { ref } from 'vue';
8 +
9 +const audioRef = ref(null);
10 +
11 +const setVolume = async () => {
12 + try {
13 + // 激活音频上下文
14 + await audioRef.value.play();
15 + if (typeof WeixinJSBridge !== 'undefined') {
16 + WeixinJSBridge.invoke('setAudioVolume', { volume: 0.5 }, (res) => {
17 + if (res.err_msg === 'setAudioVolume:ok') {
18 + console.log('音量设置成功');
19 + } else {
20 + console.error('1音量设置失败:', res.err_msg);
21 + }
22 + });
23 + } else {
24 + document.addEventListener('WeixinJSBridgeReady', () => {
25 + WeixinJSBridge.invoke('setAudioVolume', { volume: 0.5 }, (res) => {
26 + if (res.err_msg === 'setAudioVolume:ok') {
27 + console.log('音量设置成功');
28 + } else {
29 + console.error('2音量设置失败:', res.err_msg);
30 + }
31 + });
32 + }, false);
33 + }
34 + } catch (error) {
35 + console.error('激活音频上下文失败:', error);
36 + }
37 +};
38 +</script>
......