<!DOCTYPE html>
<!-- saved from url=(0042)https://cloud.shopplink.site/audios/rp.php -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reproductor de Audio</title>
    <style>
        * {
            box-sizing: border-box;
        }
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }
        .widget-player {
            width: 100%;
            max-width: 600px;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            font-size: 14px;
            display: flex;
            flex-direction: row;
        }
        .widget-cover {
            flex: 0 0 120px;
            background-size: cover;
            background-position: center;
        }
        .widget-content {
            flex: 1;
            padding: 15px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .widget-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin: 0 0 10px;
            text-align: center;
        }
        .widget-waveform {
            height: 30px;
            display: flex;
            align-items: flex-end;
            gap: 1px;
            margin-bottom: 10px;
            cursor: pointer;
        }
        .widget-waveform span {
            display: block;
            width: 2%;
            height: 50%;
            background-color: #bdbdbd;
            transition: background-color 0.2s, height 0.2s;
        }
        .widget-waveform span.active {
            background-color: #ff5500;
            height: 80%;
        }
        .widget-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .widget-controls button {
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
            color: #333;
            padding: 5px;
            transition: color 0.2s;
        }
        .widget-controls button:hover {
            color: #ff5500;
        }
        .widget-time {
            font-size: 12px;
            color: #555;
        }
        audio {
            display: none;
        }
    </style>
</head>
<body>
    <div class="widget-player">
        <div class="widget-cover" style="background-image: url(&#39;https://i.ibb.co/Tkrp8hg/fotoper.png&#39;);"></div>
        <div class="widget-content">
            <h3 class="widget-title">NORTEÑO SAX</h3>
            <div class="widget-waveform" id="waveform">
                                    <span style="height: 55%;"></span>
                                    <span style="height: 37%;"></span>
                                    <span style="height: 43%;"></span>
                                    <span style="height: 63%;"></span>
                                    <span style="height: 74%;"></span>
                                    <span style="height: 35%;"></span>
                                    <span style="height: 60%;"></span>
                                    <span style="height: 73%;"></span>
                                    <span style="height: 65%;"></span>
                                    <span style="height: 72%;"></span>
                                    <span style="height: 31%;"></span>
                                    <span style="height: 66%;"></span>
                                    <span style="height: 47%;"></span>
                                    <span style="height: 65%;"></span>
                                    <span style="height: 58%;"></span>
                                    <span style="height: 62%;"></span>
                                    <span style="height: 80%;"></span>
                                    <span style="height: 65%;"></span>
                                    <span style="height: 79%;"></span>
                                    <span style="height: 76%;"></span>
                                    <span style="height: 77%;"></span>
                                    <span style="height: 54%;"></span>
                                    <span style="height: 46%;"></span>
                                    <span style="height: 50%;"></span>
                                    <span style="height: 61%;"></span>
                                    <span style="height: 70%;"></span>
                                    <span style="height: 39%;"></span>
                                    <span style="height: 31%;"></span>
                                    <span style="height: 69%;"></span>
                                    <span style="height: 41%;"></span>
                                    <span style="height: 44%;"></span>
                                    <span style="height: 41%;"></span>
                                    <span style="height: 63%;"></span>
                                    <span style="height: 75%;"></span>
                                    <span style="height: 75%;"></span>
                                    <span style="height: 45%;"></span>
                                    <span style="height: 63%;"></span>
                                    <span style="height: 55%;"></span>
                                    <span style="height: 78%;"></span>
                                    <span style="height: 69%;"></span>
                                    <span style="height: 62%;"></span>
                                    <span style="height: 60%;"></span>
                                    <span style="height: 69%;"></span>
                                    <span style="height: 44%;"></span>
                                    <span style="height: 42%;"></span>
                                    <span style="height: 50%;"></span>
                                    <span style="height: 60%;"></span>
                                    <span style="height: 36%;"></span>
                                    <span style="height: 80%;"></span>
                                    <span style="height: 43%;"></span>
                            </div>
            <div class="widget-controls">
                <button id="playPause">▶</button>
                <div class="widget-time" id="audioTime">0:00 / 0:00</div>
            </div>
            <audio id="audio">
                <source src="https://norteno.n33.io/demos/demo.mp3" type="audio/mpeg">
                Tu navegador no soporta el elemento de audio.
            </audio>
        </div>
    </div>

    <script>
        const audio = document.getElementById('audio');
        const waveform = document.getElementById('waveform');
        const bars = waveform.querySelectorAll('span');
        const playPause = document.getElementById('playPause');
        const audioTime = document.getElementById('audioTime');

        playPause.addEventListener('click', () => {
            if (audio.paused) {
                audio.play();
                playPause.textContent = '⏸';
            } else {
                audio.pause();
                playPause.textContent = '▶';
            }
        });

        audio.addEventListener('timeupdate', () => {
            const percent = (audio.currentTime / audio.duration) * 100;
            const activeBars = Math.floor((bars.length * percent) / 100);
            bars.forEach((bar, index) => {
                bar.classList.toggle('active', index < activeBars);
            });
            const currentTime = formatTime(audio.currentTime);
            const duration = formatTime(audio.duration);
            audioTime.textContent = `${currentTime} / ${duration}`;
        });

        waveform.addEventListener('click', (e) => {
            const rect = waveform.getBoundingClientRect();
            const clickX = e.clientX - rect.left;
            const newTime = (clickX / rect.width) * audio.duration;
            audio.currentTime = newTime;
        });

        function formatTime(seconds) {
            const minutes = Math.floor(seconds / 60) || 0;
            const secs = Math.floor(seconds % 60) || 0;
            return `${minutes}:${secs < 10 ? '0' : ''}${secs}`;
        }
    </script>


</body></html>