test.vue
1.65 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!--
* @Date: 2025-12-18 00:22:07
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-12-22 14:01:23
* @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>
<!-- 使用封装的星空背景组件 -->
<StarryBackground bgImage="https://cdn.ipadbiz.cn/mlaj/images/test-bgg03.jpg" />
</template>
<script setup>
import { ref } from 'vue';
import StarryBackground from '@/components/effects/StarryBackground.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>
<style scoped>
button {
position: relative;
z-index: 10;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>