Tutorial Membuat Audio Volume Slider Interaktif dengan HTML, CSS, dan JavaScript
Ditulis oleh
mrjj
Dalam pengembangan antarmuka pengguna (UI) web, kontrol audio menjadi elemen penting, khususnya untuk aplikasi seperti pemutar musik, podcast, atau media edukatif. Salah satu kontrol yang paling umum adalah volume slider.
Dalam tutorial ini, kamu akan belajar cara membuat Audio Volume Slider interaktif dan modern dengan menggunakan HTML, CSS, dan JavaScript, lengkap dengan desain responsif dan fitur real-time volume control.
🎯 Fitur yang Akan Dibuat
- Slider volume interaktif
- Desain gelap (dark mode) modern
- Nilai volume tampil secara real-time (dalam persentase)
- Audio player bawaan HTML
- Desain responsif untuk mobile & desktop
📁 Struktur File
Buat folder dengan struktur berikut:
/audio-slider/
├── index.html
├── style.css
└── script.js🧩 Langkah 1: HTML (index.html)
Buat file index.html untuk membuat struktur halaman dan komponen-komponen penting:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Audio Volume Slider</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="volume-container">
<h2>🎧 Audio Volume Slider</h2>
<div class="volume-label" id="volumeValue">Volume: 50%</div>
<input type="range" id="volumeSlider" min="0" max="100" value="50">
<div class="audio-box">
<audio id="demoAudio" controls>
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
</div>
<script src="script.js"></script>
</body>
</html>🎨 Langkah 2: CSS (style.css)
Buat tampilan modern dan responsif dengan file CSS berikut:
body {
margin: 0;
padding: 0;
font-family: 'Segoe UI', sans-serif;
background: #111;
color: white;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
flex-direction: column;
}
.volume-container {
background: #222;
padding: 30px 20px;
border-radius: 20px;
box-shadow: 0 0 30px rgba(0,0,0,0.5);
text-align: center;
}
h2 {
margin-bottom: 20px;
font-size: 1.5em;
}
.volume-label {
font-size: 2em;
margin-bottom: 20px;
color: #00ffc3;
transition: 0.3s;
}
input[type=range] {
-webkit-appearance: none;
width: 250px;
height: 10px;
background: linear-gradient(to right, #00ffc3, #7e00ff);
border-radius: 10px;
outline: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 24px;
height: 24px;
background: white;
border-radius: 50%;
box-shadow: 0 0 10px #00ffc3;
cursor: pointer;
}
.audio-box {
margin-top: 25px;
}🧠 Langkah 3: JavaScript (script.js)
Tambahkan logika agar volume slider dapat mengontrol audio secara real-time.
const volumeSlider = document.getElementById('volumeSlider');
const volumeValue = document.getElementById('volumeValue');
const audio = document.getElementById('demoAudio');
volumeSlider.addEventListener('input', function () {
const vol = this.value;
volumeValue.textContent = `Volume: ${vol}%`;
audio.volume = vol / 100;
});🧪 Hasil Akhir
Setelah mengikuti langkah-langkah di atas, kamu akan mendapatkan slider volume yang:
- Menampilkan volume dalam persentase
- Mengontrol volume audio secara langsung
- Berfungsi dengan baik di semua perangkat, termasuk mobile
💡 Tips Tambahan
- Ubah warna gradasi slider agar sesuai dengan tema websitemu.
- Tambahkan efek icon suara yang berubah berdasarkan level volume.
- Tambahkan fitur mute/unmute menggunakan tombol toggle.
Dengan HTML, CSS, dan JavaScript sederhana, kamu bisa membuat komponen UI audio yang interaktif dan profesional. Audio volume slider ini bisa kamu gunakan di aplikasi musik, podcast, atau bahkan web edukasi.