Pi Music 用户手册

/* 播放器容器样式 */
.pi-music-player {
    width: 100%;
    max-width: 600px;
    background: var(--player-bg);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* 进度条样式 */
.pi-progress-bar {
    height: 4px;
    background: var(--progress-bg);
    border-radius: 2px;
    cursor: pointer;
}

/* 播放控制按钮 */
.pi-control-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--accent-color);
    color: white;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.pi-control-btn:hover {
    transform: scale(1.05);
}

// 播放器类
class PiMusicPlayer {
    constructor(element) {
        this.player = element;
        this.audio = element.querySelector('audio');
        this.playBtn = element.querySelector('.pi-play-btn');
        this.progressBar = element.querySelector('.pi-progress-bar');
        
        this.initEvents();
    }
    
    initEvents() {
        // 播放/暂停按钮
        this.playBtn.addEventListener('click', () => this.togglePlay());
        
        // 进度条点击
        this.progressBar.addEventListener('click', (e) => this.seek(e));
        
        // 音频时间更新
        this.audio.addEventListener('timeupdate', () => this.updateProgress());
    }
    
    togglePlay() {
        if (this.audio.paused) {
            this.audio.play();
            this.playBtn.innerHTML = '&pause;';
        } else {
            this.audio.pause();
            this.playBtn.innerHTML = '&play_arrow;';
        }
    }
    
    seek(e) {
        const width = this.progressBar.clientWidth;
        const clickX = e.offsetX;
        const duration = this.audio.duration;
        
        this.audio.currentTime = (clickX / width) * duration;
    }
    
    updateProgress() {
        const progress = (this.audio.currentTime / this.audio.duration) * 100;
        this.progressBar.querySelector('.pi-progress-fill').style.width = `${progress}%`;
    }
}

// 初始化所有播放器
document.querySelectorAll('.pi-music-player').forEach(player => {
    new PiMusicPlayer(player);
});