1. Media

HTML Audio Player

Written by Posted on

This is the music player and can utilized as a play list. This can play only one at a time. Audio player is created using HTML, CSS, JS.

Code developed by Zakari Abdessamad and created using HTML, CSS, JS. Created onDecember 9, 2019

Find the demo and code below

See the Pen HTML Audio Player by Zakari Abdessamad (@vanderzak) on CodePen.

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/a062562745.js" crossorigin="anonymous"></script>
    <title>MP3 Player</title>
    <link rel=stylesheet href="style.css" media=all> 
  </head>
  <body>


<audio id="myAudio" ontimeupdate="onTimeUpdate()">
  <!-- <source src="audio.ogg" type="audio/ogg"> -->
  <source id="source-audio" src="" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<div class="player-ctn">
  <div class="infos-ctn">
    <div class="timer">00:00</div>
    <div class="title"></div>
    <div class="duration">00:00</div>
  </div>
  <div id="myProgress">
    <div id="myBar"></div>
  </div>
  <div class="btn-ctn">
     <div class="btn-action first-btn" onclick="previous()">
        <div id="btn-faws-back">
          <i class='fas fa-step-backward'></i>
        </div>
     </div>
     <div class="btn-action" onclick="rewind()">
        <div id="btn-faws-rewind">
          <i class='fas fa-backward'></i>
        </div>
     </div>
     <div class="btn-action" onclick="toggleAudio()">
        <div id="btn-faws-play-pause">
          <i class='fas fa-play' id="icon-play"></i>
          <i class='fas fa-pause' id="icon-pause" style="display: none"></i>
        </div>
     </div>
     <div class="btn-play" onclick="forward()">
        <div id="btn-faws-forward">
          <i class='fas fa-forward'></i>
        </div>
     </div>
     <div class="btn-action" onclick="next()">
        <div id="btn-faws-next">
          <i class='fas fa-step-forward'></i>
        </div>
     </div>
     <div class="btn-mute" id="toggleMute" onclick="toggleMute()">
        <div id="btn-faws-volume">
          <i id="icon-vol-up" class='fas fa-volume-up'></i>
          <i id="icon-vol-mute" class='fas fa-volume-mute' style="display: none"></i>
        </div>
     </div>
  </div>
  <div class="playlist-ctn"></div>
</div>
<script src=app.js></script>
  </body>
</html>

CSS

body{
  background-color: #2d2d2d;
  color: #ffc266;
  font-family: 'Roboto', sans-serif;
}
#myProgress {
  width: 420px;
   background-color: #d9d9f2; 
  cursor: pointer;
  border-radius: 10px;
}

#myBar {
  width: 0%;
  height: 5px;
  background-color: #ffc266;
  border-radius: 10px;
}

.logo {
  fill: red;
}

.btn-action{
  cursor: pointer;
  padding-top: 10px;
  width: 30px;
}

.btn-ctn, .infos-ctn{
  display: flex;
  align-items: center;
  justify-content: center;
}
.infos-ctn{
padding-top: 20px;
}

.btn-ctn > div {
 padding: 5px;
 margin-top: 18px;
 margin-bottom: 18px;
}

.infos-ctn > div {
 margin-bottom: 8px;
 color: #ffc266;
}

.first-btn{
  margin-left: 3px;
}

.duration{
  margin-left: 10px;
}

.title{
  margin-left: 10px;
  width: 210px;
  text-align: center;
}

.player-ctn{
  border-radius: 15px;
  width: 420px;
  padding: 10px;
  background-color: #373737;
  margin:auto;
  margin-top: 100px;
}

.playlist-track-ctn{
  display: flex;
  background-color: #464646;
  margin-top: 3px;
  border-radius: 5px;
  cursor: pointer;
}
.playlist-track-ctn:last-child{
  /*border: 1px solid #ffc266; */
}

.playlist-track-ctn > div{
  margin:10px;
}
.playlist-info-track{
  width: 80%;
}
.playlist-info-track,.playlist-duration{
  padding-top: 7px;
  padding-bottom: 7px;
  color: #e9cc95;
  font-size: 14px;
  pointer-events: none;
}
.playlist-ctn{
   padding-bottom: 20px;
}
.active-track{
  background: #4d4d4d;
  color: #ffc266 !important;
  font-weight: bold;
  
}

.active-track > .playlist-info-track,.active-track >.playlist-duration,.active-track > .playlist-btn-play{
  color: #ffc266 !important;
}


.playlist-btn-play{
  pointer-events: none;
  padding-top: 5px;
  padding-bottom: 5px;
}
.fas{
  color: #ffc266;
  font-size: 20px;
}

JavaScript

function createTrackItem(index,name,duration){
    var trackItem = document.createElement('div');
    trackItem.setAttribute("class", "playlist-track-ctn");
    trackItem.setAttribute("id", "ptc-"+index);
    trackItem.setAttribute("data-index", index);
    document.querySelector(".playlist-ctn").appendChild(trackItem);

    var playBtnItem = document.createElement('div');
    playBtnItem.setAttribute("class", "playlist-btn-play");
    playBtnItem.setAttribute("id", "pbp-"+index);
    document.querySelector("#ptc-"+index).appendChild(playBtnItem);

    var btnImg = document.createElement('i');
    btnImg.setAttribute("class", "fas fa-play");
    btnImg.setAttribute("height", "40");
    btnImg.setAttribute("width", "40");
    btnImg.setAttribute("id", "p-img-"+index);
    document.querySelector("#pbp-"+index).appendChild(btnImg);

    var trackInfoItem = document.createElement('div');
    trackInfoItem.setAttribute("class", "playlist-info-track");
    trackInfoItem.innerHTML = name
    document.querySelector("#ptc-"+index).appendChild(trackInfoItem);

    var trackDurationItem = document.createElement('div');
    trackDurationItem.setAttribute("class", "playlist-duration");
    trackDurationItem.innerHTML = duration
    document.querySelector("#ptc-"+index).appendChild(trackDurationItem);
}

var listAudio = [
{
    name:"Artist 1 - audio 1",
    file:"https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_5MG.mp3",
    duration:"02:12"
},
{
    name:"Artist 2 - audio 2",
    file:"https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_2MG.mp3",
    duration:"00:52"
},
{
    name:"Artist 3 - audio 3",
    file:"https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_1MG.mp3",
    duration:"00:27"
}
]

for (var i = 0; i < listAudio.length; i++) {
    createTrackItem(i,listAudio[i].name,listAudio[i].duration);
}
var indexAudio = 0;

function loadNewTrack(index){
    var player = document.querySelector('#source-audio')
    player.src = listAudio[index].file
    document.querySelector('.title').innerHTML = listAudio[index].name
    this.currentAudio = document.getElementById("myAudio");
    this.currentAudio.load()
    this.toggleAudio()
    this.updateStylePlaylist(this.indexAudio,index)
    this.indexAudio = index;
}

var playListItems = document.querySelectorAll(".playlist-track-ctn");

for (let i = 0; i < playListItems.length; i++){
    playListItems[i].addEventListener("click", getClickedElement.bind(this));
}

function getClickedElement(event) {
    for (let i = 0; i < playListItems.length; i++){
        if(playListItems[i] == event.target){
        var clickedIndex = event.target.getAttribute("data-index")
        if (clickedIndex == this.indexAudio ) { // alert('Same audio');
            this.toggleAudio()
        }else{
            loadNewTrack(clickedIndex);
        }
        }
    }
}

document.querySelector('#source-audio').src = listAudio[indexAudio].file
document.querySelector('.title').innerHTML = listAudio[indexAudio].name


var currentAudio = document.getElementById("myAudio");

currentAudio.load()

currentAudio.onloadedmetadata = function() {
    document.getElementsByClassName('duration')[0].innerHTML = this.getMinutes(this.currentAudio.duration)
}.bind(this);

var interval1;

function toggleAudio() {
    if (this.currentAudio.paused) {
        document.querySelector('#icon-play').style.display = 'none';
        document.querySelector('#icon-pause').style.display = 'block';
        document.querySelector('#ptc-'+this.indexAudio).classList.add("active-track");
        this.playToPause(this.indexAudio)
        this.currentAudio.play();
    }else{
        document.querySelector('#icon-play').style.display = 'block';
        document.querySelector('#icon-pause').style.display = 'none';
        this.pauseToPlay(this.indexAudio)
        this.currentAudio.pause();
    }
}

function pauseAudio() {
    this.currentAudio.pause();
    clearInterval(interval1);
}

var timer = document.getElementsByClassName('timer')[0]

var barProgress = document.getElementById("myBar");

var width = 0;

function onTimeUpdate() {
    var t = this.currentAudio.currentTime
    timer.innerHTML = this.getMinutes(t);
    this.setBarProgress();
    if (this.currentAudio.ended) {
        document.querySelector('#icon-play').style.display = 'block';
        document.querySelector('#icon-pause').style.display = 'none';
        this.pauseToPlay(this.indexAudio)
        if (this.indexAudio < listAudio.length-1) {
            var index = parseInt(this.indexAudio)+1
            this.loadNewTrack(index)
        }
    }
}


function setBarProgress(){
    var progress = (this.currentAudio.currentTime/this.currentAudio.duration)*100;
    document.getElementById("myBar").style.width = progress + "%";
}


function getMinutes(t){
    var min = parseInt(parseInt(t)/60);
    var sec = parseInt(t%60);
    if (sec < 10) {
        sec = "0"+sec
    }
    if (min < 10) {
        min = "0"+min
    }
    return min+":"+sec
}

var progressbar = document.querySelector('#myProgress')
progressbar.addEventListener("click", seek.bind(this));


function seek(event) {
    var percent = event.offsetX / progressbar.offsetWidth;
    this.currentAudio.currentTime = percent * this.currentAudio.duration;
    barProgress.style.width = percent*100 + "%";
}

function forward(){
    this.currentAudio.currentTime = this.currentAudio.currentTime + 5
    this.setBarProgress();
}

function rewind(){
    this.currentAudio.currentTime = this.currentAudio.currentTime - 5
    this.setBarProgress();
}


function next(){
    if (this.indexAudio <listAudio.length-1) {
        var oldIndex = this.indexAudio
        this.indexAudio++;
        updateStylePlaylist(oldIndex,this.indexAudio)
        this.loadNewTrack(this.indexAudio);
    }
}

function previous(){
    if (this.indexAudio>0) {
        var oldIndex = this.indexAudio
        this.indexAudio--;
        updateStylePlaylist(oldIndex,this.indexAudio)
        this.loadNewTrack(this.indexAudio);
    }
}

function updateStylePlaylist(oldIndex,newIndex){
    document.querySelector('#ptc-'+oldIndex).classList.remove("active-track");
    this.pauseToPlay(oldIndex);
    document.querySelector('#ptc-'+newIndex).classList.add("active-track");
    this.playToPause(newIndex)
}

function playToPause(index){
    var ele = document.querySelector('#p-img-'+index)
    ele.classList.remove("fa-play");
    ele.classList.add("fa-pause");
}

function pauseToPlay(index){
    var ele = document.querySelector('#p-img-'+index)
    ele.classList.remove("fa-pause");
    ele.classList.add("fa-play");
}


function toggleMute(){
    var btnMute = document.querySelector('#toggleMute');
    var volUp = document.querySelector('#icon-vol-up');
    var volMute = document.querySelector('#icon-vol-mute');
    if (this.currentAudio.muted == false) {
        this.currentAudio.muted = true
        volUp.style.display = "none"
        volMute.style.display = "block"
    }else{
        this.currentAudio.muted = false
        volMute.style.display = "none"
        volUp.style.display = "block"
    }
}
Member since
I am a Front-end Developer, graduate of Information Technology, and founder of w3tweaks.com. I have 12+ years commercial experience providing front-end development, producing high quality responsive websites and exceptional user experience. https://www.w3tweaks.com/
Do you like CV's articles? Follow on social!

Related articles

Next