tag:blogger.com,1999:blog-49112074496771710352026-10-10T23:10:54.887-05:00web-radio-stream 📻🎧📺🦇𝕬𝖗𝖒𝖆𝖓𝖉𝖔🧛V̸̻̭̜̹͎͔͒ http://www.blogger.com/profile/05071489392799920487noreply@blogger.comBlogger4125tag:blogger.com,1999:blog-4911207449677171035.post-29258664702437154822026-06-11T16:33:01.841-05:002026-10-02T02:48:27.965-05:00<style> /* 1. ESTILOS DEL MENÚ DE GÉNEROS */ .vempirik-menu-widget { background: linear-gradient(145deg, #080808, #151515); padding: 15px; border-radius: 12px; border: 1px solid #333; max-width: 900px; margin: 10px auto; box-shadow: 0 10px 30px rgba(0,0,0,0.8); box-sizing: border-box; font-family: 'Courier', sans-serif; } .vempirik-menu-widget .genre-menu { display: flex; overflow-x: auto; gap: 12px; padding-bottom: 5px; scrollbar-width: thin; scrollbar-color: #ca0000 #1a1a1a; } .vempirik-menu-widget .genre-tag { color: #fff !important; padding: 10px 18px; border-radius: 25px; text-decoration: none; font-size: 14px; font-weight: bold; white-space: nowrap; border: none; cursor: pointer; transition: transform 0.3s, filter 0.3s; box-shadow: 0 4px 10px rgba(0,0,0,0.3); filter: brightness(1.1); } .genre-tag:hover { transform: translateY(-4px); filter: brightness(2.2); } /* 2. ESTILOS DEL REPRODUCTOR JUKEBOX */ .vempirik-jukebox { background: linear-gradient(145deg, #080808, #151515); color: #e0e0e0; padding: 20px; border-radius: 12px; border: 1px solid #333; text-align: center; max-width: 900px; margin: 10px auto; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.8); box-sizing: border-box; } .search-section { display: flex; gap: 10px; justify-content: center; margin-bottom: 20px; } .input-modern { flex: 1; max-width: 600px; padding: 12px 20px; background: #111; border: 1px solid #444; border-radius: 25px; color: #fff; font-size: 15px; outline: none; transition: border 0.3s; } .input-modern:focus { border-color: #ca0000; box-shadow: 0 0 10px rgba(202, 0, 0, 0.3); } .btn-search { background: #ca0000; color: #fff; border: none; padding: 10px 25px; border-radius: 25px; cursor: pointer; font-weight: bold; transition: transform 0.3s, background 0.3s, filter 0.3s; filter: brightness(1.1); } .btn-search:hover:not(:disabled) { background: #ff1a1a; transform: scale(1.05); filter: brightness(2.2); } .btn-search:disabled { background: #555; cursor: not-allowed; transform: none; filter: none; } .player-stage { position: relative; width: 100%; padding-bottom: 56.25%; background-color: #000; border-radius: 12px; border: 2px solid #222; overflow: hidden; margin-bottom: 15px; } #player-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* ECO_LOCALIZADOR Y BARRA DE PROGRESO */ .eq-container { display: flex; justify-content: center; align-items: flex-end; height: 22px; gap: 4px; margin-bottom: 12px; opacity: 0.3; } .eq-container.active { opacity: 1; } .eq-bar { width: 6px; background: #ca0000; border-radius: 3px; height: 3px; } .eq-container.active .eq-bar { animation: eq-pulse 0.88s infinite alternate; } @keyframes eq-pulse { 33% { height: 3px; } 100% { height: 12px; } } .progress-container { width: 100%; height: 6px; background: #222; margin: 10px 0; border-radius: 3px; cursor: pointer; } #progress-bar { width: 0%; height: 100%; background: #00ff00; box-shadow: 0 0 12px #00ff00; transition: width 0.5s linear; } #now-playing-banner { background: #0a1f0a; color: #00ff00; padding: 12px; border-radius: 6px; display: none; margin-bottom: 12px; border: 1px solid #000033; font-weight: bold; letter-spacing: 1px; } #info-panel { background: #111; padding: 15px; border-radius: 6px; margin-bottom: 15px; display: none; text-align: left; font-size: 13px; border: 1px solid #333; max-height: 200px; overflow-y: auto; color: #bbb; scrollbar-width: thin; } .fav-section { background: rgba(20, 20, 20, 0.8); padding: 12px; border-radius: 8px; margin-top: 15px; text-align: left; border: 1px solid #222; } .fav-chip { display: inline-block; background: #222; padding: 6px 12px; border-radius: 15px; margin: 4px; font-size: 11px; cursor: pointer; border: 2px dotted #c1981a; transition: 0.2s; } .fav-chip:hover { border-color: #00ff00; background: #333; } .fav-remove { color: #ca0000; margin-left: 10px; font-weight: bold; } /* 3. CONTROL DE BOTONES */ .controls-panel { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .ctrl-btn { background: rgba(0, 0, 0, 0.5); color: #fff; border: 1px solid rgba(193, 152, 26, 0.5); padding: 12px 18px; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: bold; filter: brightness(1.1); transition: filter 0.2s, transform 0.2s, background 0.2s; } .btn-fav { color: #ffffff !important; } .ctrl-btn:hover { filter: brightness(2.2); transform: translateY(-2px); background: #ca0000; } .ctrl-btn:active { transform: translateY(0); } /* MÓDULO DE RESULTADOS DE BÚSQUEDA */ #results-area { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; margin-top: 20px; } .video-card { cursor: pointer; background: #111; padding: 10px; border-radius: 8px; border: 1px solid transparent; transition: transform 0.3s, border-color 0.3s; } .video-card:hover { border-color: #ca0000; background: #1a1a1a; transform: scale(1.03); } .video-card img { width: 100%; border-radius: 6px; margin-bottom: 8px; } .video-title { font-size: 13px; color: #ddd; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } </style> <div class="vempirik-jukebox"> <!-- MENÚ DE CANALES / GÉNEROS --> <div class="vempirik-menu-widget" style="background: transparent; border: none; box-shadow: none; margin: 5px 0 0 0; padding: 10px; width: 100%;"> <div class="genre-menu"> <button class="genre-tag" onclick="loadList('PL3SyP758Yuk_fjiveAbdEFjn2rXyqpNT5')" style="background: rgba(142, 68, 173, 0.5);">Trve_Kvlt_Svrf</button> <button class="genre-tag" onclick="loadList('PLutQsx3QR3hZCNzYL5_kYep4mYfNOD7tR')" style="background: rgba(52, 152, 219, 0.5);">Alt_Rock_Grunge</button> <button class="genre-tag" onclick="loadList('PLa8QlQr6_QcKNNJXJnwG7Tj7kaEOssBRj')" style="background: rgba(230, 126, 34, 0.5);">Live🤘Ceremonies</button> <button class="genre-tag" onclick="loadList('PLa8QlQr6_QcKQuRjIAHpPYAIByABbllsP')" style="background: rgba(231, 76, 60, 0.5);">Streaming⚽𝕱𝖔𝖔𝖙𝖇𝖆𝖑𝖑</button> <button class="genre-tag" onclick="loadList('PLa8QlQr6_QcJWYO_AkkAh-xPseMTW_80r')" style="background: rgba(142, 68, 173, 0.5);">Death Metal💀</button> <button class="genre-tag" onclick="loadList('PLa8QlQr6_QcKHpEzL6Oj3M8HXWlrmMd3O')" style="background: rgba(67, 45, 123, 0.5);">BlackFierce⚔️</button> <button class="genre-tag" onclick="loadList('PL7OW3kDA-_4KO38ZvzCb1OQ0SO6DZ_WK1')" style="background: rgba(241, 196, 15, 0.5);">Funeral/Doom</button> <button class="genre-tag" onclick="loadList('PLa8QlQr6_QcIflK3mFTFpO1cqCumjJKqs')" style="background: rgba(39, 174, 96, 0.5);">🖥️Documental</button> <button class="genre-tag" onclick="loadList('PLa8QlQr6_QcLa_YJ4c2Tzn2gfkk8Qult6')" style="background: rgba(52, 152, 219, 0.5);">Club🦇Classics</button> <button class="genre-tag" onclick="loadList('PLhlRiB1q6TEhQL8AuOPFRzHJbAaUCQRXH')" style="background: rgba(241, 196, 15, 0.5);">修理、魅せます。</button> </div> </div> <!-- SECCIÓN DE BÚSQUEDA --> <div class="search-section"> <input class="input-modern" id="search-query" onkeydown="if(event.key === 'Enter') runSearch()" placeholder="Buscar música o videos..." type="text" /> <button class="btn-search" id="btn-search" onclick="runSearch()">🔎</button> </div> <div id="now-playing-banner">🔊 <span id="track-name">Tu selección...</span></div> <!-- ESCENARIO PRINCIPAL --> <div class="player-stage"> <div id="player-iframe"></div> </div> <!-- ECOLOCALIZADOR Y PROGRESO --> <div class="eq-container" id="visual-eq"> <div class="eq-bar"></div><div class="eq-bar"></div><div class="eq-bar"></div><div class="eq-bar"></div><div class="eq-bar"></div> </div> <div class="progress-container" onclick="seek(event)"> <div id="progress-bar"></div> </div> <div id="info-panel"></div> <!-- PANEL DE CONTROL --> <div class="controls-panel"> <button class="ctrl-btn" onclick="player.previousVideo()">⏮ Atrás</button> <button class="ctrl-btn btn-play" onclick="player.playVideo()">▶ Play</button> <button class="ctrl-btn btn-pause" onclick="player.pauseVideo()">⏸ Pausa</button> <button class="ctrl-btn" onclick="player.nextVideo()">Siguiente ⏭</button> <button class="ctrl-btn" onclick="toggleInfo()">ℹ️ Info</button> <button class="ctrl-btn btn-fav" onclick="addToFavorites()">⭐ Guardar</button> <button class="ctrl-btn" onclick="shuff_list()">🔀 Mix</button> </div> <div id="mess-box" style="color: #ffcc00; font-size: 12px; font-weight: bold; margin-top: 15px;"></div> <div class="fav-section" id="fav-box" style="display: none;"> <div id="fav-list"></div> </div> <div id="results-area"></div> </div> <!-- BANNER INFERIOR IPTV --> <div style="display: block; padding: 1em 0px; text-align: center;"> IPTV 🤘 <div style="margin-top: 10px;"> <a href="https://xn--6t8h.blogspot.com/" target="_blank"> <img border="0" data-original-height="400" data-original-width="400" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgnzvsqQ-X1wahShVDHYtLnLrzY6QwIvAcrU6zR7xqyPAtTV2FCiW-k0OEdqbNpwCVEiK0o2PlYatKx2Vu8ooj9GvpgTkz1xn5uxNTw9zmRu2DcDpKPL7zLbc2CNkNPuFy9yeyvB3r_rUbHMPZqzqUt5E3cyjy3-uMJYxjAtwDm4WGoIAsPfxi2rZUesk/w200-h200/Vempirik392pxbanner26.png" width="200" /> </a> </div> </div> <script> const API_KEY = 'AIzaSyDb0kaal3t0VByPOhnZhAOtWsjcH2sIC6w'; var player, progressInterval; let currentVidId = ""; var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); function onYouTubeIframeAPIReady() { player = new YT.Player('player-iframe', { host: 'https://www.youtube-nocookie.com', height: '100%', width: '100%', playerVars: { 'enablejsapi': 1, 'autoplay': 0, 'controls': 1, 'fs': 1, 'rel': 0, 'showinfo': 0, 'iv_load_policy': 1, 'modestbranding': 0, 'origin': location.origin, 'widget_referrer': location.href }, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } function onPlayerReady(event) { renderFavs(); document.getElementById("mess-box").innerText = "Listo"; player.cuePlaylist({ listType: 'playlist', list: 'PLodwY-NRfQfEF6euQOyfW4Yr1OwTesCey' }); } function onPlayerStateChange(event) { const banner = document.getElementById('now-playing-banner'); const eq = document.getElementById('visual-eq'); const panelInfo = document.getElementById('info-panel'); if (event.data == YT.PlayerState.PLAYING) { banner.style.display = "block"; eq.classList.add('active'); let data = player.getVideoData(); if (data && data.title) { currentVidId = data.video_id; document.getElementById('track-name').innerText = data.title; } panelInfo.style.display = 'none'; startTimer(); } else { if(event.data !== YT.PlayerState.BUFFERING) eq.classList.remove('active'); clearInterval(progressInterval); } } function startTimer() { clearInterval(progressInterval); progressInterval = setInterval(() => { if (player && player.getDuration) { let perc = (player.getCurrentTime() / player.getDuration()) * 100; document.getElementById('progress-bar').style.width = perc + '%'; } }, 1000); } function seek(e) { const rect = e.currentTarget.getBoundingClientRect(); const pos = (e.clientX - rect.left) / rect.width; player.seekTo(pos * player.getDuration()); } function loadList(id) { player.loadPlaylist({ listType: 'playlist', list: id }); document.getElementById("mess-box").innerText = "Playlist Colaborativa."; } function shuff_list() { player.setShuffle(true); player.playVideoAt(0); document.getElementById("mess-box").innerText = "Modo aleatorio activado."; } async function toggleInfo() { const panel = document.getElementById('info-panel'); if (panel.style.display === 'block') { panel.style.display = 'none'; return; } if (!currentVidId) return; panel.style.display = 'block'; panel.innerText = "Extrayendo metadatos..."; try { const resp = await fetch(`https://www.googleapis.com/youtube/v3/videos?part=snippet&id=${currentVidId}&key=${API_KEY}`); const data = await resp.json(); if (!resp.ok) { if (resp.status === 403) throw new Error("Error 403: Cuota de API excedida o acceso denegado."); if (resp.status === 400) throw new Error("Error 400: La API Key no es válida."); throw new Error(data.error?.message || "Error desconocido de API."); } panel.innerText = data.items[0]?.snippet.description || "Sin descripción disponible."; } catch (e) { panel.innerHTML = `<span style="color:#ff4d4d; font-weight:bold;">${e.message}</span>`; } } async function runSearch() { const query = document.getElementById('search-query').value; if (!query) return; const results = document.getElementById('results-area'); const searchBtn = document.getElementById('btn-search'); searchBtn.innerText = "Buscando..."; searchBtn.disabled = true; results.innerHTML = "<p style='grid-column:1/-1; color: #aaa;'>Conectando con YouTube...</p>"; try { const resp = await fetch(`https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=8&q=${encodeURIComponent(query)}&type=video&key=${API_KEY}`); const data = await resp.json(); if (!resp.ok) { if (resp.status === 403) throw new Error("Error 403: Cuota de búsquedas diarias superada (Quota Exceeded)."); if (resp.status === 400) throw new Error("Error 400: Revisa tu API KEY, formato no válido."); throw new Error(data.error?.message || "Ocurrió un error en la conexión."); } results.innerHTML = ""; if (!data.items || data.items.length === 0) { results.innerHTML = "<p style='grid-column:1/-1; color: #aaa;'>No se encontraron resultados para tu búsqueda.</p>"; } else { data.items.forEach(item => { const div = document.createElement('div'); div.className = 'video-card'; div.innerHTML = `<img src="${item.snippet.thumbnails.medium.url}"><div class="video-title">${item.snippet.title}</div>`; div.onclick = () => { player.loadVideoById(item.id.videoId); window.scrollTo({top: 0, behavior: 'smooth'}); }; results.appendChild(div); }); } } catch (e) { results.innerHTML = `<p style='grid-column:1/-1; color:#ff4d4d; border: 1px solid #ff4d4d; padding: 10px; border-radius: 6px;'><b>Fallo de Búsqueda:</b> ${e.message}</p>`; } finally { searchBtn.innerText = "Buscar"; searchBtn.disabled = false; } } function addToFavorites() { if (!player || typeof player.getVideoData !== 'function') return; const data = player.getVideoData(); if(!data || !data.video_id) return; let favs = JSON.parse(localStorage.getItem('vemp_favs')) || []; if(!favs.find(v => v.id === data.video_id)) { favs.push({id: data.video_id, title: data.title}); localStorage.setItem('vemp_favs', JSON.stringify(favs)); renderFavs(); document.getElementById("mess-box").innerText = "⭐ Agregado a tu colección guardada."; } else { document.getElementById("mess-box").innerText = "ℹ️ Este track ya está en tu colección."; } } function renderFavs() { const favs = JSON.parse(localStorage.getItem('vemp_favs')) || []; const box = document.getElementById('fav-box'); const list = document.getElementById('fav-list'); if(favs.length > 0) { box.style.display = 'block'; list.innerHTML = "<b style='color:#ffffff; font-size:12px;'>⭐ COLECCIÓN GUARDADA:</b><br>" + favs.map(v => ` <div class="fav-chip"> <span onclick="player.loadVideoById('${v.id}')">${v.title.substring(0,30)}...</span> <span class="fav-remove" onclick="removeFav('${v.id}')">✕</span> </div>`).join(''); } else { box.style.display = 'none'; } } function removeFav(id) { let favs = JSON.parse(localStorage.getItem('vemp_favs')) || []; localStorage.setItem('vemp_favs', JSON.stringify(favs.filter(v => v.id !== id))); renderFavs(); document.getElementById("mess-box").innerText = "Pista removida de la colección."; } </script><div class="blogger-post-footer">vamp_2026</div>𝕬𝖗𝖒𝖆𝖓𝖉𝖔🧛V̸̻̭̜̹͎͔͒ http://www.blogger.com/profile/05071489392799920487noreply@blogger.comtag:blogger.com,1999:blog-4911207449677171035.post-10685086751098237472026-05-11T11:09:33.601-05:002026-06-13T23:57:48.837-05:00 <style> /* Estilos CSS - Estética Minimalista con Fondo de Imagen */ :root { --bg-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEIatleRtW9_66V_d8Jf0NWDUupnm2ScnfmhEWyH-G-pvn1KaQHXtHpI18I5YrouBbE2VRSAo1arkacnN1Jo2OXfxIXZBapyACjAZcGDTu80NFhrG_Hu15CgP4OuzrnWXBufBVCFqet2-HO_mIBMVUaO7GZsdkwPzsdy6L9gUISYq8VA/s1600/wing-insect-reptileBLK.png'); --accent-color: #ffff; --text-color: #ca0000; --input-bg: rgba(0, 0, 0, 0.3); --butn-hover: #000000; } .widget-container { /* Fondo con degradado para asegurar visibilidad de los controles */ background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)), var(--bg-image); background-size: contain; background-repeat: no-repeat; background-position: center; color: var(--text-color); font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; padding: 35px 20px; border-radius: 12px; max-width: 99%; margin: 10px auto; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.8); border: 1px solid rgba(193, 152, 26, 0.2); } .input-group { margin-bottom: 5px; } /* Estilo para la lista desplegable limpia */ .url-select { width: 100%; padding: 5px; background: var(--input-bg); border: 1px solid var(--accent-color); border-radius: 6px; color: var(--accent-color); font-size: 16px; box-sizing: border-box; outline: none; cursor: pointer; transition: all 0.3s; text-align: center; letter-spacing: 1px; } .url-select:focus { box-shadow: 0 0 15px rgba(0, 222, 0, 0.7); } .controls { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .butn { background-color: rgba(0, 0, 0, 0.3); border: 1px solid var(--accent-color); color: var(--accent-color); padding: 12px 16px; border-radius: 4px; cursor: pointer; font-weight: bold; transition: all 0.3s ease; flex: 1 1 40%; } .butn:hover { background-color: var(--btn-hover); color: #ca0000; box-shadow: 0 0 3px var(--accent-color); } @media (max-width: 480px) { .btn { flex: 1 1 45%; } } </style> <div class="widget-container"> <div class="input-group"> <select class="url-select" id="sourceSelect"> <option value="https://regiocast.streamabc.net/regc-80s80sdarkwave3426539-mp3-192-3262123">80s DarkWave </option><option value="https://trueblackmetalradio.com:8000/radio">True Black Metal </option><option value="http://stream.laut.fm/schwarzer_kanal">EBM </option><option value="https://stream-153.zeno.fm/641xfcr2uk8uv?zt=eyJhbGciOiJIUzI1NiJ9.eyJzdHJlYW0iOiI2NDF4ZmNyMnVrOHV2IiwiaG9zdCI6InN0cmVhbS0xNTMuemVuby5mbSIsInJ0dGwiOjUsImp0aSI6IlVXVDd5ZEhGVERLelp2Z0t2eGJ6RnciLCJpYXQiOjE3NTE5NTYxOTIsImV4cCI6MTc1MTk1NjI1Mn0.1yOAtG1AZjInmmSWuvE4NJA12OBEW4qJbDNPsi9MH-Y">Acordeonica </option><option value="https://panel.retrolandigital.com:8160/app">VivaMéxico </option><option value="https://stream.rekt.network/darksynth.mp3">Darksynth </option><option value="https://s2.mexside.net/8002/stream">Reactor </option><option value="https://15313.live.streamtheworld.com/W_RADIO.mp3">W🎧FM </option><option value="https://playerservices.streamtheworld.com/api/livestream-redirect/XHMFM.mp3">88.9 </option><option value="https://s2.mexside.net/8024/;">La B grande de México </option><option value="https://14553.live.streamtheworld.com/XEJP_AM.mp3">El Fonógrafo </option><option value="https://26183.live.streamtheworld.com/XHRED_FM.mp3">Universal Stereo </option><option value="https://0n-kpop.radionetz.de/0n-kpop.mp3">K-Pop </option><option value="https://static.wixstatic.com/preview/83209e_fbbb4bbca1bb4354bc66061fe1b1c61e-128.mp3">Türk </option><option value="https://usa6.fastcast4u.com/proxy/laztatzi?mp=/stream">Sonideros </option></select> </div> <audio id="playerVMPR" src="https://regiocast.streamabc.net/regc-80s80sdarkwave3426539-mp3-192-3262123"></audio> <div class="controls"> <button class="butn" onclick="controlAudio('play')">PLAY</button> <button class="butn" onclick="controlAudio('pause')">PAUSA</button> <button class="butn" onclick="controlAudio('volUp')">VOL +</button> <button class="butn" onclick="controlAudio('volDown')">VOL -</button> </div> </div> <script> const player = document.getElementById('playerVMPR'); const sourceSelect = document.getElementById('sourceSelect'); // Cambiar emisora automáticamente al seleccionar sourceSelect.addEventListener('change', function() { const newUrl = this.value; player.src = newUrl; player.load(); // Si deseas que suene de inmediato al cambiar, quita las barras de abajo: player.play(); }); // Control de volumen y reproducción function controlAudio(action) { if (action === 'play') { player.play(); } else if (action === 'pause') { player.pause(); } else if (action === 'volUp') { if (player.volume < 1) player.volume = Math.min(1, player.volume + 0.1); } else if (action === 'volDown') { if (player.volume > 0) player.volume = Math.max(0, player.volume - 0.1); } } </script> Now 🤘<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfz9XpvqWIouMyPlRhss8KOvuTRm9GWgOhemXBDt790RVRyxex_DCtWLsppVZYagUGnjTngPhx1pLPGnmb4hUSUqCTBxwahZihEFT1Eb8lT4qu1UF-pm7XI-FKOq7GpS5-LYY7MZJSxkjJQOLEbJEu4nivGNq7620bHMldm0WeNSGk0Tb8A62HDR5WSho/s16000/Vempiriksntnzr.png" style="display: block; padding: 1em 0px; text-align: center;"><img border="0" data-original-height="400" data-original-width="400" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfz9XpvqWIouMyPlRhss8KOvuTRm9GWgOhemXBDt790RVRyxex_DCtWLsppVZYagUGnjTngPhx1pLPGnmb4hUSUqCTBxwahZihEFT1Eb8lT4qu1UF-pm7XI-FKOq7GpS5-LYY7MZJSxkjJQOLEbJEu4nivGNq7620bHMldm0WeNSGk0Tb8A62HDR5WSho/w200-h200/Vempiriksntnzr.png" width="200" /></a></div><div class="blogger-post-footer">vamp_2026</div>𝕬𝖗𝖒𝖆𝖓𝖉𝖔🧛V̸̻̭̜̹͎͔͒ http://www.blogger.com/profile/05071489392799920487noreply@blogger.comtag:blogger.com,1999:blog-4911207449677171035.post-9818423903144240812026-01-01T02:41:00.051-06:002026-10-05T01:37:55.539-05:00Revisa tu arsenal de archivos. <script src="https://cdnjs.cloudflare.com/ajax/libs/jsmediatags/3.9.5/jsmediatags.min.js"></script> <style> :root { --bg-image: url(''); --dettail-color: #c1981a; --text-color: #ffffff; --visualizer-color: rgba(0, 222, 0, 0.8); --eq-blue: #007bff; --btn-red-glass: rgba(222, 0, 0, 0.1); } .media-container { background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.9)), var(--bg-image); background-size: cover; background-position: center; color: var(--text-color); padding: 30px 20px; border-radius: 15px; max-width: 99%; margin: 20px auto; text-align: center; border: 1px solid rgba(193, 152, 26, 0.3); box-shadow: 0 15px 50px rgba(0,0,0,0.8); } .album-art-container { width: 180px; height: 180px; margin: 0 auto 20px; border: 2px solid var(--dettail-color); display: flex; align-items: center; justify-content: center; overflow: hidden; background: rgba(0,0,0,0.3); } #albumArt { width: 100%; height: 100%; object-fit: cover; display: none; } .no-art { color: #ca0000; font-size: 3rem; } #trackName { margin: 15px 0; font-size: 0.8rem; color: #f50087; background: rgba(0,0,0,0.8); padding: 10px; border-radius: 4px; border-left: 2px solid var(--dettail-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .eq-container { display: flex; justify-content: space-around; background: rgba(0,0,0,0.5); padding: 15px; border-radius: 8px; margin-bottom: 15px; gap: 10px; } .eq-group { display: flex; flex-direction: column; align-items: center; flex: 1; } .eq-group label { font-size: 9px; margin-bottom: 5px; color: var(--dettail-color); } /* Equalizador Color AZUL */ .eq-slider { width: 100%; cursor: pointer; accent-color: var(--eq-blue); } #visualizer { width: 100%; height: 100px; background: rgba(0, 0, 0, 0.4); border-radius: 4px; margin-bottom: 15px; display: block; } audio { width: 100%; margin-bottom: 20px; filter: invert(0.8) hue-rotate(140deg); } .controls-row { display: flex; gap: 10px; } /* Botones Color */ .btn-vempirik { background: var(--btn-red-glass); border: 1px solid var(--dettail-color); color: var(--dettail-color); padding: 12px; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 11px; text-transform: uppercase; flex: 1; transition: 0.3s; } .btn-vempirik:hover { background: var(--dettail-color); color: #000; box-shadow: 0 0 15px var(--dettail-color); } .upload-label { display: block; margin-bottom: 20px; border: 1px dashed var(--dettail-color); padding: 10px; cursor: pointer; } input[type="file"] { display: none; } </style> <div class="media-container"> <div class="album-art-container"> <img id="albumArt" src="" alt="Art"> <div id="defaultIcon" class="no-art">⚡</div> </div> <label class="btn-vempirik upload-label"> <input id="audioFolder" type="file" webkitdirectory directory multiple accept="audio/mp3" /> CARGAR </label> <div id="trackName">En espera...</div> <div class="eq-container"> <div class="eq-group"> <label>Bajos</label> <input type="range" class="eq-slider" id="lowGain" min="-10" max="10" value="3"> </div> <div class="eq-group"> <label>Medios</label> <input type="range" class="eq-slider" id="midGain" min="-10" max="10" value="1"> </div> <div class="eq-group"> <label>Agudos</label> <input type="range" class="eq-slider" id="highGain" min="-10" max="10" value="2"> </div> </div> <canvas id="visualizer"></canvas> <audio id="audioPlayer" controls></audio> <div class="controls-row"> <button class="btn-vempirik" onclick="prevTrack()">⏮ ATRÁS</button> <button class="btn-vempirik" onclick="nextTrack()">SIGUIENTE ⏭</button> </div> </div> <script> const jsmediatags = window.jsmediatags; const audioPlayer = document.getElementById('audioPlayer'); const trackDisplay = document.getElementById('trackName'); const albumArt = document.getElementById('albumArt'); const defaultIcon = document.getElementById('defaultIcon'); const canvas = document.getElementById('visualizer'); const canvasCtx = canvas.getContext('2d'); let playlist = []; let currentTrackIndex = 0; let audioCtx, analyser, source, dataArray, bufferLength; let lowFilter, midFilter, highFilter; function initAudioSystem() { if (audioCtx) return; audioCtx = new (window.AudioContext || window.webkitAudioContext)(); analyser = audioCtx.createAnalyser(); source = audioCtx.createMediaElementSource(audioPlayer); lowFilter = audioCtx.createBiquadFilter(); lowFilter.type = "lowshelf"; lowFilter.frequency.value = 200; midFilter = audioCtx.createBiquadFilter(); midFilter.type = "peaking"; midFilter.frequency.value = 1000; highFilter = audioCtx.createBiquadFilter(); highFilter.type = "highshelf"; highFilter.frequency.value = 3000; source.connect(lowFilter); lowFilter.connect(midFilter); midFilter.connect(highFilter); highFilter.connect(analyser); analyser.connect(audioCtx.destination); analyser.fftSize = 64; bufferLength = analyser.frequencyBinCount; dataArray = new Uint8Array(bufferLength); document.getElementById('lowGain').oninput = (e) => lowFilter.gain.value = e.target.value; document.getElementById('midGain').oninput = (e) => midFilter.gain.value = e.target.value; document.getElementById('highGain').oninput = (e) => highFilter.gain.value = e.target.value; draw(); } document.getElementById('audioFolder').addEventListener('change', function(e) { playlist = Array.from(e.target.files).filter(file => file.name.toLowerCase().endsWith(".mp3")); if (playlist.length > 0) { currentTrackIndex = 0; playTrack(currentTrackIndex); initAudioSystem(); } }); function playTrack(index) { if (index < 0 || index >= playlist.length) return; const file = playlist[index]; audioPlayer.src = URL.createObjectURL(file); trackDisplay.innerText = `[${index + 1}/${playlist.length}] - ${file.name.toUpperCase()}`; readMetadata(file); audioPlayer.play(); } function readMetadata(file) { jsmediatags.read(file, { onSuccess: function(tag) { const data = tag.tags.picture; if (data) { const base64String = data.data.map(b => String.fromCharCode(b)).join(""); albumArt.src = `data:${data.format};base64,${btoa(base64String)}`; albumArt.style.display = "block"; defaultIcon.style.display = "none"; } else { resetArt(); } }, onError: resetArt }); } function resetArt() { albumArt.style.display = "none"; defaultIcon.style.display = "block"; } function nextTrack() { currentTrackIndex = (currentTrackIndex + 1) % playlist.length; playTrack(currentTrackIndex); } function prevTrack() { currentTrackIndex = (currentTrackIndex - 1 + playlist.length) % playlist.length; playTrack(currentTrackIndex); } audioPlayer.addEventListener('ended', nextTrack); function draw() { requestAnimationFrame(draw); analyser.getByteFrequencyData(dataArray); canvasCtx.clearRect(0, 0, canvas.width, canvas.height); const barWidth = (canvas.width / bufferLength) * 2; let x = 0; for (let i = 0; i < bufferLength; i++) { // Ajustamos la altura para el efecto espejo let barHeight = dataArray[i] / 3; canvasCtx.fillStyle = 'rgba(0, 222, 0, 0.8)'; // Dibuja la parte superior (desde el centro hacia arriba) canvasCtx.fillRect(x, (canvas.height / 2) - barHeight, barWidth - 2, barHeight); // Dibuja la parte inferior (desde el centro hacia abajo - Espejo) canvasCtx.fillRect(x, canvas.height / 2, barWidth - 2, barHeight); x += barWidth; } } </script><div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg48N8wWwHWuKPcZIpqx-advMhnoEntl0SEt0TDZbFDBL8A02A846QeS7fzlOb1TCg9xNDzR6qqfFtf5o_cjx8w3L35-l3O4NHTQP-BFgDTIXRpS7fnbQhDEEPnmpMSR-pG7wApPuHPwfFBWIGQoIsLwo2SsffixD98XQFJtInQgGIcD0a0IAW825qX92E/s392/Vempirikmncmp.png" style="display: block; padding: 1em 0; text-align: center; clear: right; float: right;"><img alt="" border="0" width="200" data-original-height="392" data-original-width="392" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg48N8wWwHWuKPcZIpqx-advMhnoEntl0SEt0TDZbFDBL8A02A846QeS7fzlOb1TCg9xNDzR6qqfFtf5o_cjx8w3L35-l3O4NHTQP-BFgDTIXRpS7fnbQhDEEPnmpMSR-pG7wApPuHPwfFBWIGQoIsLwo2SsffixD98XQFJtInQgGIcD0a0IAW825qX92E/s200/Vempirikmncmp.png"/></a></div><div class="blogger-post-footer">vamp_2026</div>𝕬𝖗𝖒𝖆𝖓𝖉𝖔🧛V̸̻̭̜̹͎͔͒ http://www.blogger.com/profile/05071489392799920487noreply@blogger.comtag:blogger.com,1999:blog-4911207449677171035.post-32284141263736881732025-12-07T14:37:00.018-06:002026-10-05T02:02:21.171-05:00<div class="separator" style="text-align: center;"><a href="https://www.google.com/search?ved=1t:260882&amp;q=VEMPIRIK&amp;bbid=4911207449677171035&amp;bpid=3228414126373688173" style="text-align: left;">VEMPIRIK</a><span style="text-align: left;">&nbsp;Darkwave, PostPunk, DeathRock, Gothic, SynthPop, EBM, Recopilamos esos himnos que con el paso de los años siguen siendo demasiado buenos para olvidar.&nbsp;&nbsp;</span><span style="text-align: left;">80's-90´s-00´s</span></div><div class="separator" style="text-align: center;"><span style="text-align: left;"><br /></span></div><div class="separator" style="text-align: center;"><span style="text-align: left;">Todo se origina por las noches, desde computadoras obsoletas (</span><span style="color: #c1981a; text-align: left;">👨🏻‍💻&nbsp;</span><span style="text-align: left;">algunos aun corren en WINDOWS 10,7 y hasta XP).&nbsp;</span><span style="text-align: left;">El uso y función principal de este sitio es como reproductor multimedia/audioteca&nbsp;<span style="color: #c1981a;">🌐&nbsp;</span>para descubrir, conocer, escuchar música antes de la compra física.&nbsp;</span><span style="text-align: left;">Comparto y agrego nuevos álbumes cada mes.</span></div><br /><div><span style="color: #c1981a;"><br /></span></div><div><span style="color: #c1981a;"><br /></span></div><div><span style="color: #c1981a;">⌨️Sean discretos 👉 permanezcan sintonizados.<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnWsYdqP0nVx_8rmIC1uQIB5FqOtL-9YwOsmPuy-dIswkbfva2Mo86mys78tzxxl8yQB5jKw-Ks2gsobVJEi3RZLofji3TKAOkq9cYjhWVyJFn-OeBjjgUDbFEJzQoqXQUWDvZVCpMQddpPKi3zRPeEBIAOj68I-79MMPIeUwIcrUfSGrmRtz1S6dNzrA/s280/VAMP-VLC_-2025.gif" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="280" data-original-width="200" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnWsYdqP0nVx_8rmIC1uQIB5FqOtL-9YwOsmPuy-dIswkbfva2Mo86mys78tzxxl8yQB5jKw-Ks2gsobVJEi3RZLofji3TKAOkq9cYjhWVyJFn-OeBjjgUDbFEJzQoqXQUWDvZVCpMQddpPKi3zRPeEBIAOj68I-79MMPIeUwIcrUfSGrmRtz1S6dNzrA/s1600/VAMP-VLC_-2025.gif" width="200" /></a></div></span><br /><br /><br /><br /><br /><br /></div> <div class="blogger-post-footer">vamp_2026</div>𝕬𝖗𝖒𝖆𝖓𝖉𝖔🧛V̸̻̭̜̹͎͔͒ http://www.blogger.com/profile/05071489392799920487noreply@blogger.com