How to Create a Rich Featured HTML5 & JavaScript Audio Gallery with Playlist

How to Create a Rich Featured HTML5 & JavaScript Audio Gallery with Playlist

As we have observed many of the developers have faced a task to build audio player at least once in life while learning JavaSript. Quite often, we choose any players available online or use flash player. However, as already noticed, that these Flash players do not work properly on mobile devices (iPhone / Android). Today I am going to write here how to create a rich audio player using technologies like HTML5 and Javascript (without any Jquery).

As we know with HTML5 creating audio and video elements is very easy. The huge advantage of these new elements is that most browsers today support these elements.

Steps To Create a Rich Featured Audio Gallery with Playlist in HTML5 & JavaScript

Step 1. HTML

As usual, we have to include player markup in the HTML code:

    <div id="box">
        <div class="bgCont">
          <div class="bg">
              <div class="genreArt" style="background: none;"></div>
          </div>
        </div>
        <div class="bg-lyr">
          <div class="album-large">
              <img src="audio/img/s1.jpg" id="changed">
          </div>
          <div class="songs">
            <h1 id="captions">Old Mcdonald Had A Farm</h1>
            <ul id="playlist">
            </ul>
          </div>
          <div class="bottom active">
              <audio controls class="controls" id="playerJS">
                Sorry, your browser does not support HTML5!
              </audio>
          </div>
        </div>
      </div>

The above code first create div with class ‘box’ which will be a container for the audio player and playlist.

Next create 2 divs with class ‘bgCont’ and class bg-lyr, to div ‘bgCont’ we will add the background image to whole container which will give a rich effect to UI of the audio player (see below image). This background image will change as the thumbnail of the playlist.


Now, to div bg-lyr‘ we will add 2 more div with class ‘album-large’ where image of the song will displays as user click to new song it will change (see below image).

And another class ‘songs‘ where we will add the caption (class ‘caption’ ) of the song within the h1 tag and playlist (class ‘playlist’) of all the songs with the UL & li list (see below image).

The last div in the container will be ‘bottom’ which include the audio element of HTML5, we are adding the last so it can be displayed on the bottom of the design (see below image).

Step 2. CSS

The time has come to turn our bare HTML model into a beautiful player, for that, we need to define the styles used for each element.

#box ol,#box ul {list-style:none}
#box{
    width:60%;
    height:450px;
    box-shadow:0 15px 50px rgba(0,0,0,.25);
    top:50%;
    left:50%;
    margin-top:-178px;
    margin-left:-417px
}
.bgCont { overflow:hidden}
.bg{
    box-shadow:0 10px 150px rgba(0,0,0,.3)inset;
    -webkit-filter:blur(30px);
    -moz-filter:blur(30px);
    -o-filter:blur(30px);
    -ms-filter:blur(30px);
    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='30');
    filter:blur(30px);
    background:url(../audio/img/s1.jpg);
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover
}
.genreArt{
    width:50%;
    height:100%;
    margin:0 auto
}
.bg,.bgCont{
    top:0;
    left:0;
    z-index:0
}
.bg,.bg-lyr,.bgCont{
    width:100%;
    height:100%
}
#box,.bg,.bg-lyr,.bgCont{
    border-radius:10px
}
#box,#title,.bg,.bg-lyr,.bgCont,.header,.menu,.menu-bar{     position:absolute}
.bg-lyr{
    top:0;
    left:0;
    background:rgba(0,0,0,.42);
    padding:20px 0;
    z-index:1;
    overflow:hidden
}
.album-large{
    float:left;
    padding:10px 0 0 20px;
    height:400px;
    width:400px;
    overflow:hidden;
    margin-left:20px
}
.album-large img{
    margin-left:-400px;
    height:300px
}
.album-large .art{
    height:100%;
    max-height:500px;
    max-width:500px;
    cursor:default
}
.songs{
    overflow:auto;
    max-height:100%;
    -o-transition:all .2s ease;
    transition:all .2s ease;
    -webkit-transition:all .2s ease
}
.songs h1{
    margin:10px 0 20px;
    padding:0 20px;
    font-family:Roboto,sans-serif;
    font-weight:300;
    font-size:20px;
    text-transform:uppercase
}
.songs li{
    line-height:50px;
    text-shadow:0 2px 2px rgba(0,0,0,.1);
    text-transfo3uw48ujrm:uppercase;
    font-size:15px;
    width:100%;
    padding:0 20px;
    float:left;
    cursor:pointer
}
.songs li:hover{
    background:rgba(0,0,0,.1)
}
.songs li img{
    width:20px;
    margin-top:-36px
}
.songs li span{
    margin-right:20px;
    font-size:12px;
    font-weight:300;
    height:50px;
    float:left;
    width:20px;
    text-align:center
}
.songs li .playing{
    display:none
}
.songs li .notplaying{
    display:none
}
.songs li.nowplaying .playing{
    display:block
}
.songs li:hover span i{
    visibility:hidden
}
.songs li:hover .notplaying{
    display:block
}
.nowplaying{
    color:blue
}
.songs li.nowplaying span i{
    visibility:hidden
}
li a{
    color:#fff;
    font-family:Roboto,sans-serif;
    font-size:17px;
    line-height:1;
    text-decoration:none
}
li a:hover{
    color:#fff;
    text-decoration:none
}
.bottom.active{
    opacity:1;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0)
}
.bottom .controls{
    display:table;
    height:100%;
    width:100%;
    table-layout:fixed;
    font-size:14px;
    color:rgba(255,255,255,.7)
}

Step 3. JavaScript

Now its time to make your audio gallery more dynamic and live with JavaScript. 

function audioPlayer() {
   // collect all the li and a tag in variables
   var player = document.getElementById('playerJS');
   var playlist = document.getElementById('playlist').getElementsByTagName('a');
   var lilist = document.getElementById('playlist').getElementsByTagName('li');
    // first I added audio of the playlist to the player, 
   and then add the title to the inner HTML
    player.src = playlist[0];
   document.getElementById('captions').innerHTML = playlist[0].title;  
    for (var i = 0; i < playlist.length; i++){ 
     
   // click event listener
   playlist[i].addEventListener("click", function(e){
   // add the preventDefault which will disable the default action 
   of the click to open in new window.
    e.preventDefault()
    player.src = this;
    document.getElementById('captions').innerHTML = this.title;
   // the image path is defined withthe help of this and pass it to the src
   document.getElementById('changed').src = 'audio/img/'+this.id+'.jpg';
   player.play();
    for (var j = 0; j < lilist.length; j++){
   lilist[j].classList.remove('nowplaying');
   }
   this.parentNode.classList.add('nowplaying');           
   });              
   }
 }

 // inner variable
   var audioCont = document.getElementById("playlist");
   function audioajax(a){
   var audioThumbAll = "";
   // loop to create the li audio list with file path, 
   title, play and pause image path
   for( var i = 0; i < audioList.length; i++){
   audioThumbAll += '<li><a href="' 
   +audioList[i]['href'] 
   +'" id="s'+(i+1)+'" title="' 
   +audioList[i]['alt']
   +'">'
   +audioList[i]['alt']
   +'</a><span><i>'+(i+1)+'</i><img src="'
   +audioList[i]['srcpause']
   +'" class="playing"><img src="'
   +audioList[i]['srcplay']
   +'" class="notplaying"></span></li>';
   }

   // audioThumbAll is the collection of all the list item 
   which is them added to the HTML
   audioCont.innerHTML = audioThumbAll;
   audioPlayer();
   // inner variables
   var audioList;
   var xhr = new XMLHttpRequest(); 
   // function to create ajax state and status
   xhr.onreadystatechange = function (){
   if (xhr.readyState == 4 && xhr.status == 200) {
   audioList = JSON.parse(xhr.responseText);
   audioajax(audioList);
   }

   } // access txt file via ajax variable
   xhr.open('GET', 'js/audio-player.txt', true);
   xhr.send(); //audio-player.txt file, this act as a small database
   [
   {
   "href":"audio/old-mcadonald.mp3",
   "alt":"Old Mcdonald Had A Farm",
   "srcpause":"audio/img/pause_line.svg",
   "srcplay":"audio/img/play_line.svg"
},
   {
   "href":"audio/baa-baa-black-sheep.mp3",
   "alt":"Baa Baa Black Sheep",
   "srcpause":"audio/img/pause_line.svg",
   "srcplay":"audio/img/play_line.svg"
},
   {
    "href":"audio/bingo.mp3",
   "alt":"Bingo",
   "srcpause":"audio/img/pause_line.svg",
   "srcplay":"audio/img/play_line.svg"
   },
   {
   "href":"audio/mary-had-a-little-lamb.mp3",
   "alt":"Mary had a Little Lamb",
   "srcpause":"audio/img/pause_line.svg",
   "srcplay":"audio/img/play_line.svg"
   },
   {

   "href":"audio/Finger_Family_Songs.mp3",
   "alt":"Finger Family",
   "srcpause":"audio/img/pause_line.svg",
   "srcplay":"audio/img/play_line.svg"
   }
]  

Now I am explaining my above JavaScript code in simple points:

  • The beautiful player that does nothing – useless. To make it a true work of art, you have to fill it with events and functions. First at all, we need to initialize all the variables:
  • Then, I created a loop to check all the audio in the playlist, where on click all the title, song and the picture will change in the player:
  • After that  another loop is created which will add and remove the class which changes the css effect.
  • Then, I prepared functions audioajax to add the playlist dynamically:
  • Lastly, I created Ajax function for the playlist where data like audio path, title, play & pause images will be added to the txt file and it can be accessed by server on the run when songs are clicked.

There are many functionalities which can be added to make this more dynamic and interactive. This is really it.

About Author

Hello friends, I Shweta Sinha exploring JavaScript and Angular with our experts at best web design and development training institute in Delhi. I hope this tutorial has helped you understand the code to create a audio with a playlist. I’ve tried to share my knowledge with you which I have attended during my Advanced JavaScript training.

Thanks for reading this blog, please leave your suggestions in below given comments section.

Leave a Reply

You must be logged in to post a comment.

Copy link