技术细节与开发说明

Musp Pro 是一款简洁高效的在线音乐播放器，采用现代化的Web技术开发，提供流畅的音乐播放体验。 本播放器注重用户体验，提供直观的界面和丰富的功能，支持多种音频格式播放、播放列表管理、收藏喜爱的歌曲等。

Musp Pro 采用纯前端技术栈构建，无需后端支持，完全基于浏览器运行：

• 支持多种音频格式播放（MP3, WAV, OGG等）
• 高品质音频播放，支持音量控制和播放进度调节
• 播放列表管理，添加、删除、清空歌曲
• 收藏喜爱的歌曲，便捷访问
• 历史播放记录，记录用户的听歌习惯
• 响应式设计，适配各种屏幕尺寸
• 深色主题，符合现代UI设计趋势
• 无需安装，直接通过浏览器访问使用

音频控制系统核心代码

// 播放器核心控制方法
toggle() { 
    if(this.audio.paused){this.audio.play();state.playing=true;}
    else{this.audio.pause();state.playing=false;} 
    this.updateBtn(); 
},
prev() { 
    if(state.playlist.length) { 
        state.index=(state.index-1+state.playlist.length)%state.playlist.length;
        this.loadSong(); 
    } 
},
next() { 
    if(state.playlist.length) { 
        state.index=(state.index+1)%state.playlist.length;
        this.loadSong(); 
    } 
}

歌词同步系统实现

// 歌词加载与解析
async loadLyrics(id) {
    const res = await window.api.lyric(id);
    state.lyrics = [];
    if(res.lrc) {
        state.lyrics = res.lrc.lyric.split('\n').map(l => {
            const m = /\[(\d{2}):(\d{2})\.(\d{2,3})\](.*)/.exec(l);
            return m ? { t: parseInt(m[1])*60 + parseInt(m[2]) + parseInt(m[3])/1000, txt: m[4] } : null;
        }).filter(x=>x);
    }
},

// 歌词同步滚动
syncLyrics(t) {
    if(state.lyrics.length === 0) return;
    let idx = state.lyrics.findIndex(l => l.t > t) - 1;
    if(idx < 0) idx = 0;
    document.querySelector('.lyric-line.active')?.classList.remove('active');
    const line = ui.el('l-'+idx);
    if(line) { 
        line.classList.add('active'); 
        if(!state.userScroll) line.scrollIntoView({behavior:'smooth', block:'center'}); 
    }
}

Musp Pro 使用浏览器的 LocalStorage 技术存储用户数据，包括：

• 用户设置和偏好
• 收藏的歌曲列表
• 播放历史记录
• 用户界面状态

所有数据仅存储在用户本地浏览器中，不会上传到任何服务器，保护用户隐私。

LocalStorage 实现代码

// 初始化localStorage数据结构
function initStorage() {
    // 初始化收藏列表
    if (!localStorage.getItem('musicPlayerFavorites')) {
        localStorage.setItem('musicPlayerFavorites', JSON.stringify([]));
    }
    // 初始化歌单列表
    if (!localStorage.getItem('musicPlayerPlaylists')) {
        localStorage.setItem('musicPlayerPlaylists', JSON.stringify([]));
    }
    // 初始化歌曲缓存系统
    window.songCache.init();
    // 初始化图片缓存管理系统
    window.imageCacheManager.init();
}
initStorage();

// 收藏功能实现
toggleFavorite(index) {
    let song;
    if (typeof index === 'number') {
        song = window.historyList[index];
    } else {
        song = state.playlist[state.index];
    }
    
    // 获取收藏列表
    let favorites = JSON.parse(localStorage.getItem('musicPlayerFavorites') || '[]');
    
    // 检查是否已收藏
    const favIndex = favorites.findIndex(fav => fav.id === song.id);
    
    if (favIndex > -1) {
        // 取消收藏
        favorites.splice(favIndex, 1);
        ui.showToast('已取消收藏');
    } else {
        // 添加收藏
        favorites.push(song);
        ui.showToast('收藏成功');
    }
    
    // 保存到localStorage
    localStorage.setItem('musicPlayerFavorites', JSON.stringify(favorites));
}

// 播放历史记录管理
addToHistory(song) {
    // 从localStorage加载历史播放
    let history = JSON.parse(localStorage.getItem('playHistory') || '[]');
    
    // 移除重复的歌曲
    history = history.filter(item => item.id !== song.id);
    
    // 添加到历史记录的开头
    history.unshift(song);
    
    // 确保不超过200首
    if (history.length > 200) {
        history = history.slice(0, 200);
    }
    
    // 保存到localStorage
    localStorage.setItem('playHistory', JSON.stringify(history));
}

• 使用懒加载技术，减少初始加载时间
• 优化音频缓冲区，提供流畅的播放体验
• 最小化DOM操作，提高页面响应速度
• 使用CSS变量实现主题切换，减少重绘和回流
• 针对移动设备进行专门优化，保证在低配置设备上也能流畅运行
• 歌词解析使用高效的正则表达式，提高处理速度
• 历史记录优化存储，限制数量并移除重复项

播放器初始化

// 播放器核心对象初始化
window.player = {
    audio: document.createElement('audio'),
    state: {
        playing: false,
        playlist: [],
        index: 0,
        lyrics: [],
        userScroll: false
    },
    
    // 初始化播放器事件监听
    init() {
        // 进度条拖动控制
        this.audio.addEventListener('timeupdate', () => {
            const current = this.audio.currentTime;
            // 更新进度条
            if (ui.el('progress-bar')) {
                const percent = this.audio.duration ? (current / this.audio.duration * 100) : 0;
                ui.el('progress-bar').style.width = percent + '%';
            }
            // 更新时间显示
            if (ui.el('current-time')) ui.el('current-time').textContent = this.fmtTime(current);
            // 同步歌词
            this.syncLyrics(current);
        });
        
        // 歌词滚动事件处理
        ui.el('lyrics-box')?.addEventListener('scroll', () => {
            this.state.userScroll = true;
            setTimeout(() => { this.state.userScroll = false; }, 1000);
        });
    }
};

歌曲加载与播放系统

// 加载并播放歌曲
async loadSong() {
    const song = state.playlist[state.index];
    if (!song) return;
    
    // 更新UI显示
    ui.el('song-title').textContent = song.name;
    ui.el('song-artist').textContent = song.artist || 
                                      (song.ar ? song.ar.map(a=>a.name).join('/') : 
                                      (song.artists ? song.artists.map(a=>a.name).join('/') : '未知'));
    
    // 设置封面图片
    const coverUrl = song.cover || 
                    (song.al && song.al.picUrl ? song.al.picUrl : '') || 
                    (song.album && song.album.picUrl ? song.album.picUrl : '') ||
                    'http://p1.music.126.net/-xMsNLpquZTmMZlIztTgHg==/109951165953469081.jpg';
    ui.el('album-cover').src = coverUrl + '?param=300y300';
    
    // 适配不同API线路
    try {
        // 获取音乐URL
        const res = await window.api.songUrl(song.id);
        if (res.data && res.data[0]) {
            this.audio.src = res.data[0].url;
            await this.audio.play();
            state.playing = true;
            this.updateBtn();
            
            // 加载歌词
            this.loadLyrics(song.id);
            
            // 加载相似歌曲推荐
            this.loadSimi(song.id);
            
            // 添加到播放历史
            this.addToHistory(song);
        }
    } catch (e) {
        console.error('播放失败:', e);
    }
    
    // 更新收藏按钮状态
    this.updateFavoriteStatus();
}