hookehuyr

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

- 在.env中启用VITE_CONSOLE调试模式
- 在tools.js中添加iOS设备和微信浏览器的检测逻辑
- 移除AudioPlayer.vue中的音量控制滑块
- 在test.vue中添加音量设置功能,支持微信环境下的音量控制
......@@ -11,7 +11,7 @@ VITE_PROXY_PREFIX = /srv/
VITE_OUTDIR = mlaj
# 是否开启调试
VITE_CONSOLE = 0
VITE_CONSOLE = 1
# appID相关
VITE_APPID=微信appID
......
<!--
* @Date: 2025-04-07 12:35:35
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-04-07 14:30:26
* @LastEditTime: 2025-04-07 16:41:23
* @FilePath: /mlaj/src/components/ui/audioPlayer.vue
* @Description: 音频播放器组件,支持播放控制、进度条调节、音量控制、播放列表等功能
-->
......@@ -75,7 +75,7 @@
<!-- 音量与设置:音量控制滑块和播放列表按钮 -->
<div class="flex items-center justify-between mt-6">
<div class="flex items-center space-x-2">
<font-awesome-icon :icon="volume === 0 ? 'volume-off' : 'volume-up'" />
<!-- <font-awesome-icon :icon="volume === 0 ? 'volume-off' : 'volume-up'" />
<input
type="range"
:value="volume"
......@@ -84,7 +84,7 @@
max="100"
step="1"
class="w-24 appearance-none bg-gray-200 rounded-full h-1.5 cursor-pointer"
>
> -->
</div>
<div class="flex items-center space-x-4">
......@@ -117,6 +117,7 @@
<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { formatTime } from '@/utils/time'
import { wxInfo } from '@/utils/tools'
// 组件属性定义
const props = defineProps({
......
/*
* @Date: 2022-04-18 15:59:42
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-25 17:03:47
* @LastEditTime: 2025-04-07 15:18:25
* @FilePath: /mlaj/src/utils/tools.js
* @Description: 文件描述
*/
......@@ -26,6 +26,9 @@ const wxInfo = () => {
let isWeiXin = (uAgent.match(/MicroMessenger/i) == 'micromessenger') ? true : false;
let isWeiXinDesktop = isWeiXin && uAgent.indexOf('wechat') > -1 ? true : false;
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;
let isIOS = /iphone|ipad|ipod/.test(uAgent); // iOS设备
let isWeChatBrowser = /micromessenger/.test(uAgent); // 微信浏览器
let isIOSWeChat = isIOS && isWeChatBrowser;
return {
isAndroid,
isiOS,
......@@ -33,7 +36,8 @@ const wxInfo = () => {
isMobile,
isIpad,
isPC,
isWeiXinDesktop
isWeiXinDesktop,
isIOSWeChat
};
};
......
<!--
* @Date: 2025-03-21 13:12:37
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-04-07 12:57:28
* @FilePath: /mlaj/src/views/test.vue
* @Description: 文件描述
-->
<template>
<button @click="setVolume">设置音量</button>
<audio ref="audioRef" src="https://img.tukuppt.com/newpreview_music/09/03/95/5c8af46b01eb138909.mp3"></audio>
</template>
<script setup>
import { ref } from 'vue';
const audioRef = ref(null);
const setVolume = async () => {
try {
// 激活音频上下文
await audioRef.value.play();
if (typeof WeixinJSBridge !== 'undefined') {
WeixinJSBridge.invoke('setAudioVolume', { volume: 0.5 }, (res) => {
if (res.err_msg === 'setAudioVolume:ok') {
console.log('音量设置成功');
} else {
console.error('1音量设置失败:', res.err_msg);
}
});
} else {
document.addEventListener('WeixinJSBridgeReady', () => {
WeixinJSBridge.invoke('setAudioVolume', { volume: 0.5 }, (res) => {
if (res.err_msg === 'setAudioVolume:ok') {
console.log('音量设置成功');
} else {
console.error('2音量设置失败:', res.err_msg);
}
});
}, false);
}
} catch (error) {
console.error('激活音频上下文失败:', error);
}
};
</script>
......