chore: 线上能够播放音乐的版本

This commit is contained in:
2025-12-16 08:29:14 +08:00
parent 2d417cd631
commit f1705deeba
2 changed files with 46 additions and 37 deletions

View File

@@ -1,10 +1,10 @@
// src/utils/musicPlayer.js // src/utils/musicPlayer.js
class MusicPlayer { class MusicPlayer {
constructor() { constructor() {
this.audio = null; this.audio = null;
this.isPlaying = false; this.isPlaying = false;
this.defaultPath = ""; this.defaultPath = "";
this.enabled = false; this.enabled = false;
this.volume = 0.5; // 默认音量50% this.volume = 0.5; // 默认音量50%
} }
@@ -24,30 +24,30 @@ class MusicPlayer {
*/ */
initMusicConfig(filePath, enabled, volume = 0.5) { initMusicConfig(filePath, enabled, volume = 0.5) {
console.log("初始化音乐配置:", { filePath, enabled, volume }); console.log("初始化音乐配置:", { filePath, enabled, volume });
this.enabled = enabled; this.enabled = enabled;
// 确保音量是数字类型 // 确保音量是数字类型
this.volume = typeof volume === 'string' ? parseFloat(volume) : volume; this.volume = typeof volume === 'string' ? parseFloat(volume) : volume;
console.log("处理后的音量值:", this.volume, "类型:", typeof this.volume); console.log("处理后的音量值:", this.volume, "类型:", typeof this.volume);
let validPath = this.defaultPath; let validPath = this.defaultPath;
if (filePath && filePath.endsWith('.mp3')) { if (filePath && filePath.endsWith('.mp3')) {
validPath = filePath; validPath = filePath;
} else if (filePath) { } else if (filePath) {
console.warn(`音乐路径无效非MP3格式${filePath},使用兜底路径`); console.warn(`音乐路径无效非MP3格式${filePath},使用兜底路径`);
} }
console.log("使用的音乐路径:", validPath); console.log("使用的音乐路径:", validPath);
if (this.audio) { if (this.audio) {
this.audio.pause(); this.audio.pause();
this.audio = null; this.audio = null;
} }
this.audio = new Audio(validPath); this.audio = new Audio(validPath);
this.audio.loop = true; this.audio.loop = true;
this.audio.volume = this.volume; this.audio.volume = this.volume;
console.log("音频对象创建完成,音量设置为:", this.audio.volume); console.log("音频对象创建完成,音量设置为:", this.audio.volume);
} }
@@ -56,22 +56,22 @@ class MusicPlayer {
*/ */
play() { play() {
console.log("调用 play 方法,当前状态:", { enabled: this.enabled, hasAudio: !!this.audio, isPlaying: this.isPlaying }); console.log("调用 play 方法,当前状态:", { enabled: this.enabled, hasAudio: !!this.audio, isPlaying: this.isPlaying });
if (!this.enabled) { if (!this.enabled) {
console.log("首页播放开关未开启,跳过音乐播放"); console.log("首页播放开关未开启,跳过音乐播放");
return; return;
} }
if (!this.audio) { if (!this.audio) {
console.warn("音频对象未初始化"); console.warn("音频对象未初始化");
this.initMusicConfig(this.defaultPath, false); this.initMusicConfig(this.defaultPath, false);
console.warn("未初始化音乐配置,使用兜底路径且关闭播放开关"); console.warn("未初始化音乐配置,使用兜底路径且关闭播放开关");
return; return;
} }
console.log("音频源路径:", this.audio.src); console.log("音频源路径:", this.audio.src);
console.log("音频就绪状态:", this.audio.readyState); console.log("音频就绪状态:", this.audio.readyState);
if (!this.isPlaying) { if (!this.isPlaying) {
this.audio.play() this.audio.play()
.then(() => { .then(() => {
@@ -102,31 +102,31 @@ class MusicPlayer {
console.log("音乐已暂停"); console.log("音乐已暂停");
} }
} }
/** /**
* 新增:设置静音/取消静音(适配管理员/首页场景) * 新增:设置静音/取消静音(适配管理员/首页场景)
* @param {boolean} muted 是否静音 * @param {boolean} muted 是否静音
*/ */
setMuted(muted) { setMuted(muted) {
if (this.audio) { if (this.audio) {
this.audio.muted = muted; this.audio.muted = muted;
console.log(muted ? "音乐已静音" : "音乐已取消静音"); console.log(muted ? "音乐已静音" : "音乐已取消静音");
}
} }
}
/** /**
* 设置音量 * 设置音量
* @param {number} volume 音量值 (0.0 到 1.0) * @param {number} volume 音量值 (0.0 到 1.0)
*/ */
setVolume(volume) { setVolume(volume) {
if (this.audio) { if (this.audio) {
// 确保音量是数字类型 // 确保音量是数字类型
const numericVolume = typeof volume === 'string' ? parseFloat(volume) : volume; const numericVolume = typeof volume === 'string' ? parseFloat(volume) : volume;
// 限制音量范围在0.0到1.0之间 // 限制音量范围在0.0到1.0之间
this.volume = Math.max(0, Math.min(1, numericVolume)); this.volume = Math.max(0, Math.min(1, numericVolume));
this.audio.volume = this.volume; this.audio.volume = this.volume;
console.log(`音乐音量已设置为: ${Math.round(this.volume * 100)}%`); console.log(`音乐音量已设置为: ${Math.round(this.volume * 100)}%`);
}
} }
}
/** /**
* 新增stop 方法(组件 onUnmounted 调用,暂停+重置进度) * 新增stop 方法(组件 onUnmounted 调用,暂停+重置进度)

View File

@@ -1,5 +1,5 @@
<template> <template>
<div @click.once="handleFirstInteraction"> <div @click="handleAnyInteraction" @scroll="handleAnyInteraction" @touchstart="handleAnyInteraction">
<!-- 第一部分百日大战主题 - 使用banner0.png图片 --> <!-- 第一部分百日大战主题 - 使用banner0.png图片 -->
<section class="theme-section card-game"> <section class="theme-section card-game">
<div class="theme-container"> <div class="theme-container">
@@ -421,6 +421,15 @@ const handleFirstInteraction = () => {
} }
}; };
// 添加任意交互处理函数(点击、滚动等都会触发)
const handleAnyInteraction = () => {
// 只有在音乐启用且当前未播放时才尝试播放
if (localMusicConfig.value.enabled && !musicPlayer.isPlaying) {
console.log("检测到用户交互,尝试播放音乐...");
musicPlayer.play();
}
};
// 加载任务设置和初始化所有数据 // 加载任务设置和初始化所有数据
onBeforeMount(async () => { onBeforeMount(async () => {
try { try {