feat: complte media store

2024-12-06 15:06:15 +08:00
parent 43bde1e62a
commit 7d446b46c2
10 changed files with 199 additions and 226 deletions
--- a/backend/fixtures/audio.html
+++ b/backend/fixtures/audio.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
+    <style>
+        /* Hide default controls */
+        video::-webkit-media-controls {
+            display: none !important;
+        }
+
+        video::-webkit-media-controls-enclosure {
+            display: none !important;
+        }
+
+        /* Custom controls styling */
+        #customControls {
+            display: flex;
+            align-items: center;
+            width: 100%;
+            height: 30px;
+            background-color: #f0f0f0;
+        }
+
+        #playPauseBtn {
+            margin-right: 10px;
+        }
+
+        #progressBar {
+            flex: 1;
+            margin: 0 10px;
+        }
+
+        #timeDisplay {
+            margin-left: 10px;
+        }
+    </style>
+</head>
+
+<body>
+    <video id="audioPlayer" style="width: 100%; height: 0;"></video>
+    <div id="customControls">
+        <button id="playPauseBtn">Play</button>
+        <input type="range" id="progressBar" min="0" max="100" value="0">
+        <span id="timeDisplay">0:00</span>
+    </div>
+    <script>
+        let source = 'eed0fa530f95531f9fac2a962dfbc7ea/audio/index.m3u8';
+        if (Hls.isSupported()) {
+            var hls = new Hls();
+            hls.loadSource(source);
+            hls.attachMedia(document.getElementById('audioPlayer'));
+            hls.on(Hls.Events.MANIFEST_PARSED, function () {
+                document.getElementById('audioPlayer').play();
+            });
+        } else if (document.getElementById('audioPlayer').canPlayType('application/vnd.apple.mpegurl')) {
+            document.getElementById('audioPlayer').src = source;
+            document.getElementById('audioPlayer').addEventListener('loadedmetadata', function () {
+                document.getElementById('audioPlayer').play();
+            });
+        }
+
+        const playPauseBtn = document.getElementById('playPauseBtn');
+        const progressBar = document.getElementById('progressBar');
+        const timeDisplay = document.getElementById('timeDisplay');
+        const audioPlayer = document.getElementById('audioPlayer');
+
+        playPauseBtn.addEventListener('click', () => {
+            if (audioPlayer.paused) {
+                audioPlayer.play();
+                playPauseBtn.textContent = 'Pause';
+            } else {
+                audioPlayer.pause();
+                playPauseBtn.textContent = 'Play';
+            }
+        });
+
+        audioPlayer.addEventListener('timeupdate', () => {
+            const progress = (audioPlayer.currentTime / audioPlayer.duration) * 100;
+            progressBar.value = progress;
+            const minutes = Math.floor(audioPlayer.currentTime / 60);
+            const seconds = Math.floor(audioPlayer.currentTime % 60);
+            timeDisplay.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+        });
+
+        progressBar.addEventListener('input', () => {
+            const time = (progressBar.value / 100) * audioPlayer.duration;
+            audioPlayer.currentTime = time;
+        });
+    </script>
+</body>
+
+</html>