Tutorial Cara Membuat Audio Player html WordPress Elegan dan Responsif

---

Dalam panduan berikut ini, Cara Membuat Audio Player html WordPress Elegan dan Responsif, kita akan membuat Audio Player html wordpress modern dan responsif dengan fitur playlist dinamis, kontrol volume, dan desain sticky yang tetap muncul saat halaman di-scroll. Tutorial ini dikembangkan dengan bantuan Gemini Partner Code.

Tutorial: Membuat Audio Player html WordPress Elegan & Responsif

Fitur Utama

• Sticky Mode: Player tetap menempel di posisi atas layar.
• Playlist Dinamis: Kelola daftar lagu melalui file JavaScript terpisah.
• Custom Controls: Navigasi (Prev, Play, Next), Mute, dan Volume Slider.
• FontAwesome Icons: Menggunakan ikon vektor profesional.
• Atribusi Khusus: Footer khusus untuk brand PujaShanti.

---

Langkah 1 Membuat Audio Player html: Menyiapkan Data Lagu (playlist-data.js)

Buat file bernama playlist-data.js. File ini berfungsi sebagai database lagu Anda. Unggah ke Media Library WordPress dan catat URL-nya.

Salin kode JavaScript

const songs = [
    {
        title: "Judul Lagu 1",
        artist: "Nama Artis",
        src: "URL_FILE_AUDIO_DI_WORDPRESS",
        cover: "URL_FILE_GAMBAR_COVER"
    },
    {
        title: "Judul Lagu 2",
        artist: "Nama Artis",
        src: "URL_FILE_AUDIO_2",
        cover: "URL_FILE_COVER_2"
    }
];

Langkah 2 Membuat Audio Player html: Menyiapkan Logika Player (player-logic.js)

Buat file bernama player-logic.js. Ini adalah otak yang mengatur jalannya musik, navigasi, dan kontrol volume. Unggah file ini ke Media Library WordPress.

Salin kode JavaScript

document.addEventListener('DOMContentLoaded', function() {
    const audio = document.getElementById('wp-main-audio');
    const playBtn = document.getElementById('play-btn');
    const prevBtn = document.getElementById('prev-btn');
    const nextBtn = document.getElementById('next-btn');
    const muteBtn = document.getElementById('mute-btn');
    const volumeSlider = document.getElementById('volume-slider');
    const progress = document.getElementById('progress-bar');
    const progressContainer = document.getElementById('progress-container');
    const playlistElement = document.getElementById('wp-playlist-dynamic');
    
    let songIndex = 0;

    // Fungsi Update Ikon Volume
    function updateVolumeIcon(vol, isMuted) {
        if (isMuted || vol == 0) {
            muteBtn.innerHTML = '<i class="fas fa-volume-mute"></i>';
        } else {
            muteBtn.innerHTML = '<i class="fas fa-volume-up"></i>';
        }
    }

    // Fungsi Load Lagu
    function loadAndPlay() {
        const song = songs[songIndex];
        audio.src = song.src;
        document.getElementById('current-title').innerText = song.title;
        document.getElementById('current-artist').innerText = song.artist;
        document.getElementById('current-thumb').src = song.cover;
        audio.play();
        playBtn.innerHTML = '<i class="fas fa-pause"></i>';
    }

    // Event Listener lainnya (Next, Prev, Mute, Progress)...
    // (Gunakan kode logic versi final sebelumnya)
});

Langkah 3: Memasang Kode di WordPress

Buka halaman atau postingan WordPress Anda, tambahkan blok Custom HTML, dan tempelkan kode berikut. Jangan lupa ganti URL script di bagian bawah dengan URL file yang sudah Anda unggah.

Salin kode HTML

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PUJASHANTI Audio Player</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    
    <style>
        /* Layout Utama */
        .sticky-player { position: sticky; top: 20px; z-index: 999; }
        .elegant-player { 
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
            background: #111; 
            color: #fff; 
            border-radius: 20px; 
            overflow: hidden; 
            max-width: 380px; 
            margin: 40px auto; 
            box-shadow: 0 20px 50px rgba(0,0,0,0.8); 
            border: 1px solid #222; 
        }
        
        /* Header & Cover */
        .player-header { padding: 30px 20px; text-align: center; background: linear-gradient(180deg, #222, #111); }
        .album-art { width: 140px; height: 140px; margin: 0 auto 15px; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.5); border: 2px solid #333; }
        .album-art img { width: 100%; height: 100%; object-fit: cover; }
        .status-badge { font-size: 9px; color: #3498db; border: 1px solid #3498db; padding: 2px 10px; border-radius: 20px; letter-spacing: 1px; font-weight: bold; }
        #current-title { margin: 15px 0 5px; font-size: 1.2em; font-weight: 500; color: #fff; }
        #current-artist { color: #777; font-size: 0.9em; margin: 0; }

        /* Kontrol & Progress */
        .custom-controls { padding: 0 25px 25px; }
        .progress-container { background: #333; height: 6px; border-radius: 10px; cursor: pointer; margin-top: 10px; }
        .progress-bar { background: #3498db; height: 100%; width: 0%; border-radius: 10px; transition: width 0.1s linear; }
        .time-info { display: flex; justify-content: space-between; font-size: 11px; color: #555; margin: 8px 0 20px; }

        .main-btns { display: flex; justify-content: center; align-items: center; gap: 25px; }
        .main-btns button { background: none; border: none; color: #fff; cursor: pointer; font-size: 1.4rem; transition: 0.3s; padding: 10px; }
        .main-btns button:hover { color: #3498db; transform: scale(1.1); }
        
        /* Play Button (Khusus ID: play-btn) */
        #play-btn { 
            background: #3498db; 
            width: 60px; 
            height: 60px; 
            border-radius: 50%; 
            display: flex; 
            align-items: center; 
            justify-content: center;
            box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3); 
        }
        #play-btn:hover { background: #2980b9; }

        /* Volume Control */
        .volume-control-group { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 25px; }
        #mute-btn { background: none; border: none; color: #fff; cursor: pointer; font-size: 1.1rem; width: 30px; }
        #volume-slider { width: 80px; accent-color: #3498db; cursor: pointer; height: 4px; }

        /* Playlist (Target: wp-playlist-dynamic) */
        .playlist-container { max-height: 180px; overflow-y: auto; background: #0a0a0a; border-top: 1px solid #1a1a1a; list-style: none; padding: 0; margin: 0; }
        .wp-track { padding: 12px 25px; border-bottom: 1px solid #151515; cursor: pointer; transition: 0.2s; display: flex; flex-direction: column; }
        .wp-track:hover { background: #111; }
        .wp-track.active { border-left: 4px solid #3498db; background: #161616; }
        .track-name { display: block; font-size: 0.95em; color: #eee; font-weight: 500; }
        .track-artist { font-size: 0.8em; color: #555; }

        /* Footer */
        .player-footer { padding: 12px; background: #050505; text-align: center; font-size: 10px; color: #444; border-top: 1px solid #1a1a1a; }
        .player-footer strong { color: #3498db; }
        .player-footer a { color: #666; text-decoration: none; }
    </style>
</head>
<body>

<div class="elegant-player sticky-player">
    <div class="player-header">
        <div class="album-art">
            <img id="current-thumb" src="https://pujashanti.web.id/wp-content/uploads/2026/03/pujashanti-high-resolution-logo-1.webp" alt="Cover" />
        </div>
        <div class="now-playing-info">
            <span class="status-badge">NOW PLAYING</span>
            <h5 id="current-title">Memuat...</h5>
            <p id="current-artist">Artis</p>
        </div>
    </div>

    <div class="custom-controls">
        <div id="progress-container" class="progress-container">
            <div id="progress-bar" class="progress-bar"></div>
        </div>
        <div class="time-info">
            <span id="curr-time">0:00</span>
            <span id="dur-time">0:00</span>
        </div>

        <div class="main-btns">
            <button id="prev-btn" title="Lagu Sebelumnya"><i class="fas fa-step-backward"></i></button>
            <button id="play-btn" title="Play/Pause"><i class="fas fa-play"></i></button>
            <button id="next-btn" title="Lagu Selanjutnya"><i class="fas fa-step-forward"></i></button>
        </div>

        <div class="volume-control-group">
            <button id="mute-btn" type="button"><i class="fas fa-volume-up"></i></button> 
            <input id="volume-slider" max="1" min="0" step="0.1" type="range" value="1" />
        </div>
    </div>

    <audio id="wp-main-audio"></audio>

    <ul id="wp-playlist-dynamic" class="playlist-container">
        </ul>

    <div class="player-footer">
        <strong>PUJASHANTI Player</strong> kode sumber: 
        <a href="https://gemini.google.com/" target="_blank" rel="noopener">
            <i class="fa-solid fa-robot"></i> Gemini AI
        </a>
    </div>
</div>

<script src="/js/playlist-data.js?v.2.1"></script>
<script src="/js/player-logic.js"></script>

</body>

---

Kesimpulan

Dengan memisahkan antara Data (lagu), Logika (JS), dan Tampilan (HTML/CSS), website Anda akan tetap ringan dan mudah dikelola. Anda cukup mengedit file playlist-data.js untuk memperbarui daftar lagu tanpa perlu mengutak-atik halaman WordPress lagi.

---

LIHAT JUGA; Mengenal Google Gemini AI: Masa Depan Kecerdasan Buatan