Designing a custom audio player with HTML, CSS, and JavaScript

Audio players are a popular component in many websites today. They allow visitors to listen to audio content without having to leave the site or open another application. In this tutorial, we will design a custom audio player using HTML, CSS, and JavaScript.

Prerequisites: Before we start, you should have some basic knowledge of HTML, CSS, and JavaScript. We will also be using the jQuery library in our code, so you should be familiar with it as well.

Step 1: Setting up the HTML structure

The first step in creating an audio player is to set up the HTML structure. We will use the HTML5 audio element to play our audio file. Here is a basic HTML structure for our audio player:

<div class="audio-player">
   <div class="controls">
       <button class="play-pause"></button>
   </div>
   <div class="progress">
       <div class="progress-bar"></div>
   </div>
   <audio src="audio-file.mp3"></audio>
</div>

In the above HTML code, we have created a div element with the class “audio-player” that will contain all the elements of our audio player. Inside this div, we have two child divs, one with the class “controls” and another with the class “progress”. The “controls” div will contain a button element with the class “play-pause” that will be used to play and pause the audio. The “progress” div will contain another div element with the class “progress-bar” that will show the progress of the audio file. Finally, we have added an audio element with the source of our audio file.

Step 2: Styling the audio player with CSS

Now that we have our HTML structure, we can style our audio player with CSS. Here is some basic CSS code to style our audio player:

.audio-player {
   background-color: #f5f5f5;
   border-radius: 5px;
   padding: 10px;
   width: 300px;
}

.controls {
   display: flex;
   justify-content: center;
   margin-bottom: 10px;
}

.play-pause {
   background-color: transparent;
   border: none;
   cursor: pointer;
   height: 50px;
   width: 50px;
   background-image: url(play.svg);
}

.play-pause.pause {
   background-image: url(pause.svg);
}

.progress {
   background-color: #ccc;
   height: 10px;
   position: relative;
}

.progress-bar {
   background-color: #007bff;
   height: 10px;
   position: absolute;
   top: 0;
   left: 0;
   width: 0;
}

In the above CSS code, we have styled the “audio-player” div with a background color, border radius, padding, and width. We have also added some styles to the “controls” div to center its contents and add a margin-bottom. The “play-pause” button has been styled with a transparent background color, no border, and a custom cursor. We have also added two background images, one for the play state and one for the pause state. The “progress” div has been styled with a background color and a height of 10px, and we have positioned the “progress-bar” div absolutely inside it with a height of 10px and a width of 0.

Step 3: Adding JavaScript functionality

Finally, we can add some JavaScript functionality to our audio player. We will use the jQuery library to make it easier to manipulate the DOM and handle events. Here is some basic JavaScript code to add functionality to our audio player:

$(document).ready(function () {
  var audioPlayer = $(".audio-player")[0];
  var playPauseButton = $(".play-pause");
  var progressBar = $(".progress-bar");

  playPauseButton.on("click", function () {
    if (audioPlayer.paused) {
      audioPlayer.play();
      playPauseButton.addClass("pause");
    } else {
      audioPlayer.pause();
      playPauseButton.removeClass("pause");
    }
  });

  $(audioPlayer).on("timeupdate", function () {
    var progress = (audioPlayer.currentTime / audioPlayer.duration) * 100;
    progressBar.css("width", progress + "%");
  });
});

In the above JavaScript code, we first select our audio player, play-pause button, and progress bar using jQuery. We then add a click event listener to the play-pause button. When the button is clicked, we check if the audio is paused. If it is, we play the audio and add the class “pause” to the play-pause button, which changes its background image to the pause icon. If the audio is playing, we pause the audio and remove the “pause” class from the play-pause button.

We also add a “timeupdate” event listener to the audio element. This event is fired when the current playback position of the audio changes. Inside this event listener, we calculate the progress of the audio by dividing the current time by the duration of the audio and multiplying by 100. We then set the width of the progress bar to this progress value.

Conclusion

In this tutorial, we have designed a custom audio player using HTML, CSS, and JavaScript. We have used the HTML5 audio element to play our audio file and styled the player with CSS. We have also added some basic functionality to the player using JavaScript, including the ability to play and pause the audio and display the progress of the audio file. With these skills, you can now create your own custom audio players and add them to your website.