basic audio player screenshot

How to Add a Volume Control Slider to Audio Player (HTML, CSS, & JS)

Get ready to rock! This tutorial will guide you through building a simple audio player with a user-friendly volume control slider using HTML, CSS, and JavaScript.

What you will learn

We will cover how to:

  • use the HTML audio element to add audio files to a web page.
  • play and pause audio files.
  • create a volume control slider using the <input type="range"> element.
  • control the volume using the slider
  • Display the volume

Now let's dive into the rhythm of development:

1. Setting the Stage with HTML

The first step is making sure we add all the correct HTML tags for the audio player. This will include creating the audio player, adding a sider and a display for the volume level.

i. Create the Audio Player:

HTML
                        
<audio id="player" src="your-audio-file.mp3"></audio>
                        
                    

Here, id="player" identifies the audio element for later control. Replace your-audio-file.mp3 with your actual audio file path.

ii. Craft the Volume Slider:

HTML
                        
<input type="range" min="0" max="1" step="0.01" id="volume-slider" />
                        
                    

This code creates a slider with:

  • type="range": Specifies a range input element.
  • min="0" max="1": Sets the volume range from 0 (mute) to 1 (full volume).
  • step="0.01": Allows fine-grained adjustments with 0.01 increments.
  • id="volume-slider": Identifies the slider for JavaScript interaction.

iii. Optional Volume Display:

HTML
                        
<p id="volume-display">Volume: 50%</p>
                        
                    

This adds a paragraph (optional) to show the current volume level (using JavaScript later).

iv. Add a play/pause button

HTML
                        
<button id="play">Play</button>
                        
                    

This adds a button with the word "play" which we will change to "pause" when the audio is playing.

2. Scripting the Symphony with JavaScript:

Now that we have our HTML elements in place, let's add some javascript to give our volume controls some functionality

Connect the Players:

JavaScript
                        
const player = document.getElementById("player");
const volumeSlider = document.getElementById("volume-slider");
const volumeDisplay = document.getElementById("volume-display"); // Optional
const playPauseButton = document.getElementById("play");

This retrieves references to the player, volumeSlider, and volumeDisplay elements.

Play the audio:

JavaScript
                        
// This code will play or pause the audio when the button is clicked
playPauseButton.addEventListener("click", ()=>{
  if (player.paused) { // check if the player is paused
    player.play(); // Play the audio
    playPauseButton.textContent = "Pause"; // Update button text to "Pause"
  } else {
    player.pause(); // Pause the audio
    playPauseButton.textContent = "Play"; // Update button text to "Play"
  }
});

This code adds an eventListener to our playPauseButton to handle click events. Then when the button is clicked we check if the player is paused. If it is, we play the audio, if not, we pause the audio.

Slide for the Volume Control:

JavaScript
                        
volumeSlider.addEventListener("input", () => {
  player.volume = volumeSlider.value;
  updateVolumeDisplay(); // Optional
});

This code:

  • Listens for the input event on the slider.
  • Updates the player.volume with the slider's current value.
  • Runs the updateVolumeDisplay function to reflect the volume level (optional).

Updating the Volume Display (Optional):

JavaScript
                        
function updateVolumeDisplay() {
  volumeDisplay.textContent = `Volume: ${Math.floor(player.volume * 100)}%`;
}

This function updates the volumeDisplay element to show the current volume percentage.

3. Styling the Show with CSS:

(This is optional but recommended for a visually appealing player)

  • Style the player for aesthetic appeal using CSS selectors like #player.
  • Customize the slider appearance using CSS selectors like #volume-slider.
  • Adjust the font and position of the volume display element (optional).

Below is an example of how you can style your player. Create a div and give it the ID: audio-player-container. Place all the elements we created earlier inside the div. Then add the following css:

CSS
                        
/* Overall container */
#audio-player-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  margin: 20px;
  border-radius: 10px;
  background-color: #f2f2f2;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);
}

/* Audio player */
#player {
  width: 100%;
  margin-bottom: 15px;
}

/* Volume slider */
#volume-slider {
  width: 150px;
  -webkit-appearance: none; /* Remove default styling */
  height: 5px;
  background: #d3d3d3;
  border-radius: 5px;
  margin: 20px;
}

#volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  background: #4CAF50;
  border-radius: 50%;
  cursor: pointer;
}

/* Volume display */
#volume-display {
  font-size: 14px;
  margin-bottom: 5px;
}

/* Play button */
#play {
  background-color: #4CAF50; /* Match the slider thumb */
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

#play:hover {
  background-color: #3e8e41; /* Darker green on hover */
}

After adding our styling, the audio player will look like this:

basic audio player screenshot

Get Groovin'

Follow these steps, customize the code and styling, and you'll have a cool music player with a slick volume control slider ready to rock your world! Remember, experiment, have fun, and create a music player that reflects your musical spirit!