Web PHP Trial

PHP Code Editor

<?php
/**
 * MP3 Player Monolithic v.1.2.5 - Platinum Master
 * Fitur: 125% Vol Snap, DblClick Reset EQ, Bass Max 25, Full B64 Encrypted
 */
$eq_freqs = [60, 400, 1000, 3000, 12000];
$songs = glob("*.mp3");
$songs_json = json_encode($songs);
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pro Audio Engine v1.2.5</title>
    <script>
        const _0xlibs = ["aHR0cHM6Ly9jZG4udGFpbHdpbmRjc3MuY29t", "aHR0cHM6Ly91bnBrZy5jb20vbHVjaWRlQGxhdGVzdA=="];
        _0xlibs.forEach(b => {
            const s = document.createElement('script');
            s.src = atob(b);
            if(b.includes("bHVjaWRl")) s.onload = () => { if(window.lucide) lucide.createIcons(); };
            document.head.appendChild(s);
        });
    </script>
    <style>
        body { background-color: #05070a; color: #94a3b8; font-family: sans-serif; overflow: hidden; }
        .player-frame { background: #0f172a; border: 1px solid #1e293b; border-radius: 24px; box-shadow: 0 0 60px rgba(0,0,0,0.9); }
        
        /* VOLUME LINE CALIBRATION v1.2.5 */
        .vol-container { position: relative; width: 140px; display: flex; align-items: center; padding-top: 10px; }
        .vol-snap-line { 
            position: absolute; left: 76.5%; transform: translateX(-50%); 
            width: 2px; height: 14px; background: #3b82f6; top: -8px; opacity: 0.8; z-index: 10;
        }
        .vol-snap-line::after { content: '100%'; position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-size: 8px; color: #3b82f6; font-weight: bold; }

.v-slider { appearance: none; width: 6px; height: 110px; background: #1e293b; border-radius: 10px; outline: none; writing-mode: vertical-lr; direction: rtl; cursor: pointer; }
        .v-slider::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; background: #3b82f6; border-radius: 50%; border: 2px solid #0f172a; box-shadow: 0 0 10px rgba(59, 130, 246, 0.5); }
        
        .track-active { background: rgba(59, 130, 246, 0.1); border-left: 4px solid #3b82f6; color: #60a5fa; }
        .custom-scroll::-webkit-scrollbar { width: 4px; }
        .custom-scroll::-webkit-scrollbar-thumb { background: #334155; border-radius: 10px; }
        
        @keyframes pulse-red { 0%, 100% { color: #ef4444; text-shadow: 0 0 5px #ef4444; } 50% { opacity: 0.5; } }
        .boost-active { animation: pulse-red 0.8s infinite; font-weight: bold; }
    </style>
</head>
<body class="flex items-center justify-center min-h-screen p-4">

<div class="player-frame w-full max-w-[450px] overflow-hidden border border-white/5">
    <div class="p-6 flex justify-between items-center bg-black/40 border-b border-white/5">
        <div class="flex items-center gap-2">
            <i data-lucide="shield-check" class="w-4 h-4 text-blue-500"></i>
            <span class="text-[9px] font-black tracking-widest text-gray-500 uppercase">Pro Audio Engine v1.2.5</span>
        </div>
        <div class="flex items-center gap-5">
            <div class="vol-container">
                <div class="vol-snap-line"></div>
                <input type="range" id="vol-slider" min="0" max="1.25" step="0.01" value="0.8" class="w-full h-1.5 accent-blue-500 cursor-pointer">
            </div>
            <span id="vol-txt" class="text-[11px] font-mono w-10 text-right text-blue-400">80%</span>
        </div>
    </div>

<div class="p-7">
        <div class="flex gap-6 mb-8 items-center">
            <div id="vinyl" class="w-20 h-20 rounded-full bg-gradient-to-tr from-gray-900 to-blue-900 border-2 border-white/10 flex items-center justify-center shadow-2xl">
                <i data-lucide="music-2" class="w-8 h-8 text-blue-500/40"></i>
            </div>
            <div class="flex-1 min-w-0">
                <h2 id="song-title" class="text-white font-bold text-lg truncate tracking-tight uppercase italic">Ready</h2>
                <div class="mt-4">
                    <input type="range" id="seek-bar" class="w-full h-1 bg-gray-800 rounded-full appearance-none cursor-pointer" value="0">
                    <div class="flex justify-between text-[10px] mt-2 font-mono text-gray-400">
                        <span id="time-cur">0:00</span>
                        <span id="time-max">0:00</span>
                    </div>
                </div>
            </div>
        </div>

<div class="bg-black/60 rounded-3xl p-6 border border-white/5 mb-8 flex justify-between items-end gap-1">
            
            <div class="flex flex-col items-center gap-3">
                <input type="range" id="eq-bass" class="v-slider" min="0" max="25" value="0" style="accent-color: #6366f1; height: 120px;" title="Double click to reset">
                <span class="text-[8px] font-black text-indigo-400 tracking-tighter">SUB-BASS</span>
            </div>
            <div class="w-[1px] h-24 bg-white/10 mx-2"></div>
            <?php foreach($eq_freqs as $f): ?>
            <div class="flex flex-col items-center gap-3">
                <input type="range" id="band-<?= $f ?>" class="v-slider" min="-15" max="15" value="0" title="Double click to reset">
                <span class="text-[8px] text-gray-500 font-bold"><?= $f >= 1000 ? ($f/1000).'k' : $f ?>Hz</span>
            </div>
            <?php endforeach; ?>
        </div>

function initAudio() {
        if (ctx) return;
        ctx = new (window.AudioContext || window.webkitAudioContext)();
        source = ctx.createMediaElementSource(audio);
        limiter = ctx.createDynamicsCompressor();
        
        bassNode = ctx.createBiquadFilter();
        bassNode.type = "lowshelf";
        bassNode.frequency.value = 60; 
        bassNode.Q.value = 2.0;

let prev = bassNode;
        const freqs = [60, 400, 1000, 3000, 12000];
        freqs.forEach(f => {
            const flt = ctx.createBiquadFilter();
            flt.type = (f === 60) ? "lowshelf" : (f === 12000) ? "highshelf" : "peaking";
            flt.frequency.value = f;
            bands[f] = flt;
            prev.connect(flt);
            prev = flt;
        });

gainNode = ctx.createGain();
        gainNode.gain.value = 0.8;
        source.connect(bassNode);
        prev.connect(limiter).connect(gainNode).connect(ctx.destination);
    }

async function handlePlay() {
        if(!audio.src) return playSong(0);
        if (ctx && ctx.state === 'suspended') await ctx.resume();
        audio.paused ? (await audio.play(), updateUI(true)) : (audio.pause(), updateUI(false));
    }

async function playSong(i) {
        initAudio();
        if (ctx.state === 'suspended') await ctx.resume();
        curIdx = i; audio.src = allSongs[i].url;
        document.getElementById('song-title').innerText = allSongs[i].name;
        audio.load();
        audio.oncanplay = async () => { await audio.play(); updateUI(true); renderList(); };
    }

audio.onended = () => {
        if (repeatMode === 2) { audio.currentTime = 0; audio.play(); }
        else if (repeatMode === 1) { next(); }
        else { if (curIdx < allSongs.length - 1) next(); else updateUI(false); }
    };

function toggleRepeat() {
        repeatMode = (repeatMode + 1) % 3;
        const btn = document.getElementById('repeat-btn');
        const icon = document.getElementById('repeat-icon');
        btn.className = repeatMode > 0 ? "text-blue-400" : "text-gray-600";
        icon.setAttribute('data-lucide', repeatMode === 2 ? 'repeat-1' : 'repeat');
        lucide.createIcons();
    }

function renderList() {
        document.getElementById('list-box').innerHTML = allSongs.map((s, i) => `
            <div onclick="playSong(${i})" class="flex items-center p-4 cursor-pointer hover:bg-white/5 border-b border-white/5 ${i === curIdx ? 'track-active font-bold' : ''}">
                <i data-lucide="music" class="w-3 h-3 mr-3 text-blue-500 opacity-50"></i>
                <span class="text-xs truncate">${s.name}</span>
            </div>
        `).join('');
        lucide.createIcons();
    }

function updateUI(p) {
        document.getElementById('play-icon').setAttribute('data-lucide', p ? 'pause' : 'play');
        document.getElementById('vinyl').style.animation = p ? "spin 4s linear infinite" : "none";
        lucide.createIcons();
    }

document.getElementById('vol-slider').oninput = (e) => {
        let val = parseFloat(e.target.value);
        if (val > 0.98 && val < 1.02) { val = 1.0; e.target.value = 1.0; }
        if(gainNode) gainNode.gain.setTargetAtTime(val, ctx.currentTime, 0.01);
        const pct = Math.round(val * 100);
        document.getElementById('vol-txt').innerText = pct + "%";
        document.getElementById('vol-txt').classList.toggle('boost-active', pct > 100);
    };

// --- RESET FUNCTIONALITY ---
    const resetSlider = (id, node, def) => {
        const slider = document.getElementById(id);
        slider.ondblclick = () => {
            slider.value = def;
            if(node) node.gain.value = def;
        };
    };

// Bass Reset
    resetSlider('eq-bass', bassNode, 0);
    document.getElementById('eq-bass').oninput = (e) => { if(bassNode) bassNode.gain.value = e.target.value; };

// EQ Reset
    [60, 400, 1000, 3000, 12000].forEach(f => {
        const id = 'band-' + f;
        resetSlider(id, bands[f], 0);
        document.getElementById(id).oninput = (e) => { if(bands[f]) bands[f].gain.value = e.target.value; };
    });
    // ---------------------------

audio.ontimeupdate = () => {
        document.getElementById('seek-bar').value = (audio.currentTime / audio.duration) * 100 || 0;
        document.getElementById('time-cur').innerText = fmt(audio.currentTime);
        document.getElementById('time-max').innerText = fmt(audio.duration || 0);
    };

gainNode = ctx.createGain();
        gainNode.gain.value = 0.8;
        source.connect(bassNode);
        prev.connect(limiter).connect(gainNode).connect(ctx.destination);
    }

// Bass Reset
    resetSlider('eq-bass', bassNode, 0);
    document.getElementById('eq-bass').oninput = (e) => { if(bassNode) bassNode.gain.value = e.target.value; };

PHP Code Editor

Result