Spaces:

josejuan314
/

audiovideoswitch

Running

App Files Files Community

josejuan314 commited on Apr 4

Commit

938e951

verified ·

1 Parent(s): ffa21f7

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +351 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Audiovideoswitch
-emoji: 🏢
-colorFrom: purple
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: audiovideoswitch
+emoji: 🐳
+colorFrom: pink
+colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,351 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Reproductor Video/Audio</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        .switch {
+            position: relative;
+            display: inline-block;
+            width: 60px;
+            height: 34px;
+        }
+        .switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+        .slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: #4f46e5;
+            transition: .4s;
+            border-radius: 34px;
+        }
+        .slider:before {
+            position: absolute;
+            content: "";
+            height: 26px;
+            width: 26px;
+            left: 4px;
+            bottom: 4px;
+            background-color: white;
+            transition: .4s;
+            border-radius: 50%;
+        }
+        input:checked + .slider {
+            background-color: #10b981;
+        }
+        input:checked + .slider:before {
+            transform: translateX(26px);
+        }
+        .slider-icon {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            color: white;
+            font-size: 14px;
+        }
+        .video-icon {
+            left: 8px;
+        }
+        .audio-icon {
+            right: 8px;
+        }
+        #videoContainer {
+            transition: all 0.3s ease;
+        }
+        #audioContainer {
+            transition: all 0.3s ease;
+            background: linear-gradient(135deg, #4f46e5 0%, #10b981 100%);
+        }
+        .progress-container {
+            height: 6px;
+            background-color: #e5e7eb;
+            border-radius: 3px;
+            cursor: pointer;
+        }
+        .progress-bar {
+            height: 100%;
+            background-color: #4f46e5;
+            border-radius: 3px;
+            width: 0%;
+        }
+        .thumbnail {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            border-radius: 8px;
+        }
+        .audio-visualizer {
+            display: flex;
+            align-items: flex-end;
+            height: 50px;
+            gap: 2px;
+        }
+        .audio-bar {
+            background-color: rgba(255, 255, 255, 0.7);
+            width: 4px;
+            border-radius: 2px;
+            animation: equalize 1s infinite alternate;
+            animation-delay: calc(var(--order) * 100ms);
+        }
+        @keyframes equalize {
+            0% {
+                height: 10%;
+            }
+            100% {
+                height: calc(var(--height) * 1%);
+            }
+        }
+    </style>
+</head>
+<body class="bg-gray-100 min-h-screen flex items-center justify-center p-4">
+    <div class="w-full max-w-2xl bg-white rounded-xl shadow-xl overflow-hidden">
+        <!-- Header -->
+        <div class="bg-indigo-600 p-4 text-white">
+            <h1 class="text-xl font-bold text-center">Reproductor Flexible</h1>
+            <p class="text-center text-indigo-100 text-sm">Cambia entre video y audio sin perder la reproducción</p>
+        </div>
+        <!-- Main Content -->
+        <div class="p-6">
+            <!-- Video Container (Visible by default) -->
+            <div id="videoContainer" class="mb-6 rounded-lg overflow-hidden relative">
+                <video id="mediaPlayer" class="w-full aspect-video bg-black" poster="https://i.imgur.com/3ZQZQ9m.jpg" controls>
+                    <source id="mediaSource" src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
+                    Tu navegador no soporta el elemento de video.
+                </video>
+                <div id="videoOverlay" class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-30 hidden">
+                    <button id="playBtn" class="w-16 h-16 rounded-full bg-indigo-600 text-white flex items-center justify-center hover:bg-indigo-700 transition">
+                        <i class="fas fa-play text-2xl"></i>
+                    </button>
+                </div>
+            </div>
+            <!-- Audio Container (Hidden by default) -->
+            <div id="audioContainer" class="hidden mb-6 rounded-lg p-6">
+                <div class="flex items-center">
+                    <div class="mr-4">
+                        <div class="w-16 h-16 rounded-lg overflow-hidden shadow-md">
+                            <img src="https://i.imgur.com/3ZQZQ9m.jpg" alt="Thumbnail" class="thumbnail">
+                        </div>
+                    </div>
+                    <div class="flex-1">
+                        <h3 class="text-white font-medium">Big Buck Bunny</h3>
+                        <p class="text-white text-opacity-80 text-sm">Reproduciendo en modo audio</p>
+                        <!-- Audio Visualizer -->
+                        <div class="audio-visualizer mt-2">
+                            <div class="audio-bar" style="--height: 30; --order: 1;"></div>
+                            <div class="audio-bar" style="--height: 60; --order: 2;"></div>
+                            <div class="audio-bar" style="--height: 40; --order: 3;"></div>
+                            <div class="audio-bar" style="--height: 80; --order: 4;"></div>
+                            <div class="audio-bar" style="--height: 50; --order: 5;"></div>
+                            <div class="audio-bar" style="--height: 70; --order: 6;"></div>
+                            <div class="audio-bar" style="--height: 30; --order: 7;"></div>
+                            <div class="audio-bar" style="--height: 90; --order: 8;"></div>
+                            <div class="audio-bar" style="--height: 60; --order: 9;"></div>
+                            <div class="audio-bar" style="--height: 40; --order: 10;"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Custom Controls -->
+            <div class="space-y-4">
+                <!-- Progress Bar -->
+                <div class="progress-container" id="progressContainer">
+                    <div class="progress-bar" id="progressBar"></div>
+                </div>
+                <!-- Time Display -->
+                <div class="flex justify-between text-sm text-gray-600">
+                    <span id="currentTime">0:00</span>
+                    <span id="duration">1:00</span>
+                </div>
+                <!-- Main Controls -->
+                <div class="flex items-center justify-between">
+                    <!-- Play/Pause Button -->
+                    <button id="playPauseBtn" class="w-12 h-12 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center hover:bg-indigo-200 transition">
+                        <i class="fas fa-play"></i>
+                    </button>
+                    <!-- Volume Control -->
+                    <div class="flex items-center space-x-2">
+                        <i class="fas fa-volume-down text-gray-600"></i>
+                        <input type="range" id="volumeControl" min="0" max="1" step="0.01" value="1" class="w-24">
+                    </div>
+                    <!-- Mode Switch -->
+                    <div class="flex items-center space-x-3">
+                        <span class="text-sm font-medium text-gray-700">Modo:</span>
+                        <label class="switch">
+                            <input type="checkbox" id="modeSwitch">
+                            <span class="slider"></span>
+                            <span class="slider-icon video-icon"><i class="fas fa-video"></i></span>
+                            <span class="slider-icon audio-icon"><i class="fas fa-music"></i></span>
+                        </label>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Elements
+            const mediaPlayer = document.getElementById('mediaPlayer');
+            const videoContainer = document.getElementById('videoContainer');
+            const audioContainer = document.getElementById('audioContainer');
+            const playPauseBtn = document.getElementById('playPauseBtn');
+            const playBtn = document.getElementById('playBtn');
+            const progressBar = document.getElementById('progressBar');
+            const progressContainer = document.getElementById('progressContainer');
+            const currentTimeDisplay = document.getElementById('currentTime');
+            const durationDisplay = document.getElementById('duration');
+            const volumeControl = document.getElementById('volumeControl');
+            const modeSwitch = document.getElementById('modeSwitch');
+            const videoOverlay = document.getElementById('videoOverlay');
+            // Initial state
+            let isVideoMode = true;
+            // Play/Pause functionality
+            function togglePlayPause() {
+                if (mediaPlayer.paused) {
+                    mediaPlayer.play();
+                    playPauseBtn.innerHTML = '<i class="fas fa-pause"></i>';
+                    videoOverlay.classList.add('hidden');
+                } else {
+                    mediaPlayer.pause();
+                    playPauseBtn.innerHTML = '<i class="fas fa-play"></i>';
+                    if (isVideoMode) videoOverlay.classList.remove('hidden');
+                }
+            }
+            playPauseBtn.addEventListener('click', togglePlayPause);
+            playBtn.addEventListener('click', togglePlayPause);
+            // Update progress bar
+            mediaPlayer.addEventListener('timeupdate', function() {
+                const progress = (mediaPlayer.currentTime / mediaPlayer.duration) * 100;
+                progressBar.style.width = `${progress}%`;
+                // Update time displays
+                currentTimeDisplay.textContent = formatTime(mediaPlayer.currentTime);
+                if (!isNaN(mediaPlayer.duration)) {
+                    durationDisplay.textContent = formatTime(mediaPlayer.duration);
+                }
+            });
+            // Click on progress bar to seek
+            progressContainer.addEventListener('click', function(e) {
+                const rect = progressContainer.getBoundingClientRect();
+                const pos = (e.clientX - rect.left) / rect.width;
+                mediaPlayer.currentTime = pos * mediaPlayer.duration;
+            });
+            // Volume control
+            volumeControl.addEventListener('input', function() {
+                mediaPlayer.volume = this.value;
+            });
+            // Mode switch
+            modeSwitch.addEventListener('change', function() {
+                isVideoMode = !isVideoMode;
+                if (isVideoMode) {
+                    videoContainer.classList.remove('hidden');
+                    audioContainer.classList.add('hidden');
+                    if (mediaPlayer.paused) {
+                        videoOverlay.classList.remove('hidden');
+                    }
+                } else {
+                    videoContainer.classList.add('hidden');
+                    audioContainer.classList.remove('hidden');
+                    videoOverlay.classList.add('hidden');
+                }
+            });
+            // Format time (seconds to MM:SS)
+            function formatTime(seconds) {
+                const minutes = Math.floor(seconds / 60);
+                const secs = Math.floor(seconds % 60);
+                return `${minutes}:${secs < 10 ? '0' : ''}${secs}`;
+            }
+            // Update duration when metadata is loaded
+            mediaPlayer.addEventListener('loadedmetadata', function() {
+                durationDisplay.textContent = formatTime(mediaPlayer.duration);
+            });
+            // Show overlay when video ends
+            mediaPlayer.addEventListener('ended', function() {
+                playPauseBtn.innerHTML = '<i class="fas fa-play"></i>';
+                if (isVideoMode) videoOverlay.classList.remove('hidden');
+            });
+            // Initialize
+            mediaPlayer.volume = volumeControl.value;
+            // Animate audio bars when playing
+            mediaPlayer.addEventListener('play', function() {
+                const audioBars = document.querySelectorAll('.audio-bar');
+                audioBars.forEach(bar => {
+                    bar.style.animationPlayState = 'running';
+                });
+            });
+            mediaPlayer.addEventListener('pause', function() {
+                const audioBars = document.querySelectorAll('.audio-bar');
+                audioBars.forEach(bar => {
+                    bar.style.animationPlayState = 'paused';
+                });
+            });
+            // Optional: Replace with your video URL
+            function setMediaSource(url, posterUrl) {
+                document.getElementById('mediaSource').src = url;
+                mediaPlayer.poster = posterUrl || '';
+                mediaPlayer.load();
+                // Update thumbnail in audio mode
+                if (posterUrl) {
+                    const audioThumbnail = document.querySelector('#audioContainer img');
+                    if (audioThumbnail) {
+                        audioThumbnail.src = posterUrl;
+                    }
+                }
+            }
+            // Example of how to set a new video URL (you can call this function when needed)
+            // setMediaSource('YOUR_NEW_VIDEO_URL.mp4', 'YOUR_THUMBNAIL_URL.jpg');
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=josejuan314/audiovideoswitch" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>