nanocode/audiobook-player/templates/player.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>{{ title }} - Audiobook</title>
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body class="light-mode player-page">
    <div class="app">
        <!-- Fixed Player Bar (80px height) -->
        <div class="player-bar" id="playerBar">
            <div class="player-controls">
                <button class="nav-btn back-btn" onclick="goBack()">
                    <span class="nav-icon">◀</span>
                </button>
                
                <div class="player-info">
                    <h3 class="player-title">{{ title }}</h3>
                    <p class="player-author">{{ author }}</p>
                </div>
                
                <button class="play-btn" id="playBtn" onclick="togglePlay()">
                    <span class="play-icon">▶</span>
                </button>
                
                <button class="close-btn" onclick="closePlayer()">
                    <span class="close-icon">✕</span>
                </button>
            </div>
            
            <!-- Audio Element -->
            <audio id="audioPlayer" preload="none"></audio>
        </div>
        
        <!-- Speed Control Bar -->
        <div class="speed-control-bar" id="speedControlBar">
            <button class="speed-btn" data-rate="-30%" onclick="setSpeed(this, '-30%')">慢</button>
            <button class="speed-btn active" data-rate="-10%" onclick="setSpeed(this, '-10%')">正常</button>
            <button class="speed-btn" data-rate="+10%" onclick="setSpeed(this, '+10%')">快</button>
        </div>

        <!-- Content Area (scrollable) -->
        <main class="content-area player-with-speed" id="contentArea">
            <article class="story-content" id="storyContent">
                <header class="content-header">
                    <h1>{{ title }}</h1>
                    <p class="content-meta">
                        <span class="author">{{ author }}</span>
                        {% if year %}
                        <span class="year">{{ year }}</span>
                        {% endif %}
                    </p>
                </header>
                
                <div class="content-body" id="contentBody">
                    {{ content | safe }}
                </div>
                
                <div class="content-end">
                    <p>— End of Story —</p>
                    <button class="back-to-list" onclick="goBack()">返回列表</button>
                </div>
            </article>
        </main>
    </div>

    <script src="/static/js/app.js"></script>
    <script>
        // Story content
        const storyContent = {{ content | tojson }};
        const storyTitle = {{ title | tojson }};
        
        // Audio state
        let isPlaying = false;
        let audioPlayer = document.getElementById('audioPlayer');
        let playBtn = document.getElementById('playBtn');
        let currentSpeed = '-10%';
        
        // Toggle play/pause
        function togglePlay() {
            if (isPlaying) {
                pauseAudio();
            } else {
                playAudio();
            }
        }
        
        function playAudio() {
            const text = storyContent || storyTitle;
            if (!text) return;
            
            const streamUrl = `/api/stream?text=${encodeURIComponent(text)}&rate=${encodeURIComponent(currentSpeed)}`;
            audioPlayer.src = streamUrl;
            audioPlayer.play();
            
            isPlaying = true;
            updatePlayButton();
        }
        
        function pauseAudio() {
            audioPlayer.pause();
            isPlaying = false;
            updatePlayButton();
        }
        
        function updatePlayButton() {
            playBtn.innerHTML = isPlaying ? '<span class="pause-icon">⏸</span>' : '<span class="play-icon">▶</span>';
        }
        
        // Speed control
        function setSpeed(btn, rate) {
            document.querySelectorAll('.speed-btn').forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
            currentSpeed = rate;
            
            if (isPlaying) {
                pauseAudio();
                playAudio();
            }
        }
        
        // Handle audio ended
        audioPlayer.addEventListener('ended', () => {
            isPlaying = false;
            updatePlayButton();
        });
        
        // Handle audio error
        audioPlayer.addEventListener('error', (e) => {
            console.error('Audio error:', e);
            isPlaying = false;
            updatePlayButton();
        });
        
        function closePlayer() {
            pauseAudio();
            window.location.href = '/list/{{ source_id }}';
        }
        
        function goBack() {
            pauseAudio();
            window.history.back();
        }
    </script>
</body>
</html>