admin/38428-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Auto commit: 2026-02-15T14:31:12.994Z

Browse Source
This commit is contained in:
Flatlogic Bot 2026-02-15 14:31:13 +00:00
parent f3d92def0a
commit 12ececf64d
1 changed files with 84 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
index.php
View File

@ -171,15 +171,36 @@ $whatsapp_link = "https://wa.me/" . preg_replace('/[^0-9]/', '', $whatsapp_numbe
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s, background 0.2s;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 4px 15px rgba(56, 189, 248, 0.4);
}
.play-btn.playing {
background: #ff4444 !important;
box-shadow: 0 4px 20px rgba(255, 68, 68, 0.5);
transform: scale(1.1);
}
.play-btn:hover {
transform: scale(1.05);
background: #0ea5e9;
}
.visualizer-container {
width: 100%;
height: 60px;
margin-bottom: 1rem;
display: flex;
align-items: flex-end;
justify-content: center;
overflow: hidden;
}
#visualizer {
width: 100%;
height: 100%;
}
.volume-slider {
flex: 1;
height: 6px;
@ -389,11 +410,15 @@ $whatsapp_link = "https://wa.me/" . preg_replace('/[^0-9]/', '', $whatsapp_numbe
</header>
<div class="radio-player">
<div class="visualizer-container">
<canvas id="visualizer"></canvas>
</div>
<div class="now-playing">
<i class="bi bi-broadcast"></i>
<div class="track-info">
<div class="track-status">EN VIVO</div>
<div id="track-title" class="track-title">Cargando stream...</div>
</div>
</div>
<div class="controls">
@ -443,23 +468,80 @@ $whatsapp_link = "https://wa.me/" . preg_replace('/[^0-9]/', '', $whatsapp_numbe
<i class="bi bi-whatsapp"></i>
</a>
<audio id="radio-audio" src="https://listen.radioking.com/radio/828046/stream/897251" preload="none"></audio>
<audio id="radio-audio" src="https://listen.radioking.com/radio/828046/stream/897251" preload="none" crossorigin="anonymous"></audio>
<script>
const audio = document.getElementById('radio-audio');
const playBtn = document.getElementById('play-pause');
const playIcon = document.getElementById('play-icon');
const trackTitle = document.getElementById('track-title');
const canvas = document.getElementById('visualizer');
const ctx = canvas.getContext('2d');
let audioCtx;
let analyzer;
let source;
let animationId;
function initVisualizer() {
if (audioCtx) return;
audioCtx = new (window.AudioContext || window.webkitAudioContext)();
analyzer = audioCtx.createAnalyser();
source = audioCtx.createMediaElementSource(audio);
source.connect(analyzer);
analyzer.connect(audioCtx.destination);
analyzer.fftSize = 64;
const bufferLength = analyzer.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
function draw() {
animationId = requestAnimationFrame(draw);
analyzer.getByteFrequencyData(dataArray);
ctx.clearRect(0, 0, canvas.width, canvas.height);
const barWidth = (canvas.width / bufferLength) * 2.5;
let barHeight;
let x = 0;
for (let i = 0; i < bufferLength; i++) {
barHeight = dataArray[i] / 2;
// Create gradient for bars
const gradient = ctx.createLinearGradient(0, canvas.height, 0, 0);
gradient.addColorStop(0, '#38bdf8');
gradient.addColorStop(1, '#ff4444');
ctx.fillStyle = gradient;
ctx.fillRect(x, canvas.height - barHeight, barWidth - 2, barHeight);
x += barWidth;
}
}
draw();
}
function togglePlay() {
if (audioCtx && audioCtx.state === 'suspended') {
audioCtx.resume();
}
if (audio.paused) {
initVisualizer();
audio.play();
playIcon.classList.remove('bi-play-fill');
playIcon.classList.add('bi-pause-fill');
playBtn.classList.add('playing');
} else {
audio.pause();
playIcon.classList.remove('bi-pause-fill');
playIcon.classList.add('bi-play-fill');
playBtn.classList.remove('playing');
}
}