Article Categories

Selected Reading

Is it possible to style HTML5 audio tag?

HTML Web Development Front End Technology

HTML5 audio tags can be styled in multiple ways. By using the audio tag with the controls attribute, the default browser player is displayed. However, you can create completely custom audio controls by removing the controls attribute and building your own interface using HTML, CSS, and JavaScript.

Syntax

Following is the basic syntax for the HTML5 audio element −

<audio id="audioPlayer" src="audio-file.mp3"></audio>

For custom controls without the default browser interface −

<audio id="audioPlayer" src="audio-file.mp3" preload="auto"></audio>
<div class="custom-controls">
   <button onclick="playAudio()">Play</button>
   <button onclick="pauseAudio()">Pause</button>
</div>

Styling Default Audio Controls

The default browser controls have limited styling options. You can apply basic CSS properties like width, background, and border, but the internal control elements (play button, progress bar, volume slider) cannot be individually customized across all browsers.

Example

<!DOCTYPE html>
<html>
<head>
   <title>Styling Default Audio Controls</title>
   <style>
      audio {
         width: 100%;
         max-width: 400px;
         border: 2px solid #007bff;
         border-radius: 10px;
         background-color: #f8f9fa;
         outline: none;
      }
      audio:focus {
         border-color: #0056b3;
      }
   </style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h3>Styled Default Audio Player</h3>
   <audio controls>
      <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
      <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
      Your browser does not support the audio element.
   </audio>
</body>
</html>

This creates a styled audio player with a blue border and light background, but the internal controls remain in their default browser style.

Creating Custom Audio Controls

By removing the controls attribute, you can hide the built-in browser interface and create your own custom controls. This approach gives you complete control over the appearance and functionality.

Example − Basic Custom Controls

<!DOCTYPE html>
<html>
<head>
   <title>Custom Audio Controls</title>
   <style>
      .audio-player {
         background: #2c3e50;
         padding: 20px;
         border-radius: 8px;
         max-width: 400px;
         text-align: center;
      }
      .control-btn {
         background: #3498db;
         color: white;
         border: none;
         padding: 10px 15px;
         margin: 5px;
         border-radius: 5px;
         cursor: pointer;
         font-size: 14px;
      }
      .control-btn:hover {
         background: #2980b9;
      }
   </style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h3>Custom Audio Player</h3>
   <div class="audio-player">
      <audio id="player" preload="auto">
         <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
         Your browser does not support the audio element.
      </audio>
      <div>
         <button class="control-btn" onclick="document.getElementById('player').play()">Play</button>
         <button class="control-btn" onclick="document.getElementById('player').pause()">Pause</button>
         <button class="control-btn" onclick="document.getElementById('player').volume = Math.min(1, document.getElementById('player').volume + 0.2)">Vol+</button>
         <button class="control-btn" onclick="document.getElementById('player').volume = Math.max(0, document.getElementById('player').volume - 0.2)">Vol-</button>
      </div>
   </div>
</body>
</html>

This creates a dark-themed audio player with custom styled buttons for play, pause, and volume control.

Example − Advanced Custom Player with Progress Bar

<!DOCTYPE html>
<html>
<head>
   <title>Advanced Custom Audio Player</title>
   <style>
      .audio-container {
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         padding: 25px;
         border-radius: 15px;
         max-width: 450px;
         color: white;
      }
      .progress-container {
         background: rgba(255,255,255,0.2);
         height: 6px;
         border-radius: 3px;
         margin: 15px 0;
         cursor: pointer;
      }
      .progress-bar {
         background: #fff;
         height: 100%;
         border-radius: 3px;
         width: 0%;
         transition: width 0.1s;
      }
      .player-controls {
         display: flex;
         justify-content: center;
         align-items: center;
         gap: 10px;
      }
      .play-btn {
         background: #fff;
         color: #667eea;
         border: none;
         padding: 12px 20px;
         border-radius: 25px;
         cursor: pointer;
         font-weight: bold;
         font-size: 16px;
      }
      .control-button {
         background: rgba(255,255,255,0.2);
         color: white;
         border: none;
         padding: 8px 12px;
         border-radius: 20px;
         cursor: pointer;
      }
      .time-display {
         font-size: 14px;
         margin: 0 10px;
      }
   </style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h3>Advanced Custom Audio Player</h3>
   <div class="audio-container">
      <audio id="advancedPlayer" preload="auto">
         <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
         Your browser does not support the audio element.
      </audio>
      <div class="progress-container" onclick="seekTo(event)">
         <div class="progress-bar" id="progressBar"></div>
      </div>
      <div class="player-controls">
         <button class="control-button" onclick="changeVolume(-0.1)">Vol-</button>
         <span class="time-display" id="timeDisplay">0:00 / 0:00</span>
         <button class="play-btn" id="playBtn" onclick="togglePlay()">Play</button>
         <button class="control-button" onclick="changeVolume(0.1)">Vol+</button>
      </div>
   </div>
   <script>
      const audio = document.getElementById('advancedPlayer');
      const playBtn = document.getElementById('playBtn');
      const progressBar = document.getElementById('progressBar');
      const timeDisplay = document.getElementById('timeDisplay');

      function togglePlay() {
         if (audio.paused) {
            audio.play();
            playBtn.textContent = 'Pause';
         } else {
            audio.pause();
            playBtn.textContent = 'Play';
         }
      }

      function changeVolume(change) {
         audio.volume = Math.max(0, Math.min(1, audio.volume + change));
      }

      function seekTo(event) {
         const progressContainer = event.currentTarget;
         const clickPosition = event.offsetX / progressContainer.offsetWidth;
         audio.currentTime = clickPosition * audio.duration;
      }

      function formatTime(seconds) {
         const mins = Math.floor(seconds / 60);
         const secs = Math.floor(seconds % 60);
         return mins + ':' + (secs < 10 ? '0' : '') + secs;
      }

      audio.addEventListener('timeupdate', function() {
         const progress = (audio.currentTime / audio.duration) * 100;
         progressBar.style.width = progress + '%';
         timeDisplay.textContent = formatTime(audio.currentTime) + ' / ' + formatTime(audio.duration);
      });
   </script>
</body>
</html>

This advanced player includes a progress bar, time display, and gradient styling. Users can click the progress bar to seek to specific positions in the audio.

Comparison of Styling Approaches

Feature	Default Controls	Custom Controls
Implementation Difficulty	Very Easy	Moderate to Complex
Styling Flexibility	Limited (border, background, size)	Complete control
Cross-Browser Consistency	Inconsistent appearance	Consistent if coded properly
Accessibility	Built-in keyboard support	Must implement manually
Maintenance	No maintenance needed	Requires ongoing updates
File Size	Minimal	Additional CSS and JavaScript

Key Points

Default controls are quick to implement but offer limited customization. They vary in appearance across different browsers.
Custom controls require removing the controls attribute and building your own interface using HTML, CSS, and JavaScript.
Audio API methods like play(), pause(), and properties like volume, currentTime enable full control over audio playback.
Event listeners such as timeupdate, loadedmetadata, and ended help create responsive custom players.

Conclusion

HTML5 audio elements can be styled using two main approaches: applying basic CSS to default controls for simple customization, or creating fully custom controls by removing the controls

varma

Updated on: 2026-03-16T21:38:53+05:30

4K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next