How to: build a responsive audio player with HTML5, SASS and JS — Part 1

Over the past few months we have been working with Hertfordshire County Council and the great team at the MusicNet East Musical Inclusion Project to create a website for young aspiring musicians in the South East of England.

Songwriter is a community of aspiring musicians that submit songs to the chart, which ranks the songs based on Weekly Listens. As part of that project we built a responsive audio player using HTML5, SASS and JS. With modern web technologies this task was much more simple than you might expect, so we wanted to share the process for anyone who might want to build their own!

You can see the full project here or read more about it on our project page.


THE START

Firstly you are going to want to design your player. This design will need to cover both Desktop and Mobile variations, if you are following along with this guide feel free to use ours. This tutorial assumes you will be adding this player into an already existing project so doesn’t include the full html you will need. At the end of the tutorial we include all the working files you need for this to work fully.


DESKTOP DESIGN

Here we have the design of the player on a desktop sized display. In this design we have included a few things we won’t be adding the functionality to in this tutorial such as the previous and next buttons, but are helpful to have in your design incase you want to expand on it. As the screen size shrinks we are going to make all the areas stay as they are but have the progress bar shorten in width. Once the progress bar has reached a breakpoint we will change the SASS to follow the mobile design.

MOBILE DESIGN

In the mobile design we have removed and moved some of the elements and moved the progress bar above the player. This design uses the same HTML but the using a media query we have altered the SASS to match this design.


THE HTML

I’m not going to go into depth with the HTML as it’s pretty straight forward but this is what it should look like including comments to explain where everything is:

<div id="music-player"> <!-- The full black bar -->
<div class="inner"> <!-- Keeping everything centered -->

<!-- The controls -->
<div class="controls">
<a class="previous" href="#"><img src="img/previous.svg"></a>
<a class="play" href="#"><img src="img/music-playerplay.png"></a>
<a class="pause" href="#" style="display:none;"><img src="img/music-playerpause.png"></a>
<a class="next" href="#"><img src="img/next.svg"></a>
</div>

<!-- The play bar -->
<div class="play-bar">
<span id="time">0:00</span>
<div class="bar-bg">
<div class="progress"></div>
</div>
<span id="total-time">0:00</span>
</div>
   <div class="song-content"> <!-- The songs meta -->
    <div class="user-info">
<!-- The song cover -->
<div class="img-wrapper">
<img src="img/cover-art.png">
</div>
<!-- The artist name and song title -->
<div class="song-info">
<span class="artist">Artist Name</span>
<span class="song">Song Name</span>
</div>
</div>
    <!-- Comment counter -->
<div class="comment-icon">
<a href="#">
<img src="img/comments.svg">
<span>7</span>
</a>
</div>
   </div> <!-- The songs meta END -->
</div> <!-- Keeping everything centered END -->
</div> <!-- The full black bar END -->

THE SASS

This tutorial is going to assume you have an understanding of the SASS preprocessor and how it works. We are also going to be coding our SASS as SCSS.

SETTING UP

First we are going to put the SASS for this in it’s own .sass file, so create a new file called _audio-player.sass and import it into your main SASS file with @import ‘audio-player’;. We are also going to set up a few variables for colours, so at the top of your new _audio-player file add the following:

$music-player-bg: #1d1d1d; //Whatever colour you want to be the background (Dark grey in the example)
$music-player-fg: #ffffff; //Whatever colour you want to be the foreground (White in this example)
$music-player-hl: #ffc964; //Whatever colour you want to be your highlight colour (Mustard in this example)

If you were building this into a bigger project your highlight colours would probably come from more site wide variables.

We are also going to add in some basic global styles to the top of the sheet for the purpose of this tutorial:

body{
font-family: 'Titillium Web', sans-serif;
}
img{
max-width: 100%;
height: auto;
}

BASIC STRUCTURE

Now we are going to code up some of the basic structure of the player and i’ll explain some of the code in comments:

#music-player {
background-color: $music-player-bg;
width: 100%;
padding: 10px 0;
//Sticky the player to the bottom of the page
position: fixed;
bottom: 0;
z-index: 999;
 .inner {
// We are going to be using flex to get the best responsive results
display: flex;
position: relative;
// Wrap the player to a max width of 940px
max-width: 940px;
padding: 0 20px;
margin: 0 auto;
}
}
.controls {
width: 130px; // Keep the controls a set width
float: left;
display: flex;
justify-content: flex-start;
}
.play-bar {
height: 35px;
float: left;
margin-right: 30px;
display: flex;
justify-content: flex-start;
flex: 1; // This makes the play bar the element that changes size responsively
}
.song-content {
width: 220px; // Keep the song content a set width
height: 35px;
float: left;
display: flex;
justify-content: flex-start;
}

Now we have the basic structure in place we can put in some of the details. I’ll be adding into the .controls, .play-bar & .song-content elements so amend those as we go along.


.CONTROLS

This SASS is just some basic styles to set positioning of the elements:

.controls {
img {
vertical-align: middle;
}
a {
align-self: center;
}
.previous {
margin-right: 12px;
img {
width: 14px;
}
}
.play, .pause {
margin-right: 12px;
img {
width: 30px;
}
}
.next {
margin-right: 45px;
img {
width: 14px;
}
}
}

.PLAY-BAR

This SASS is to style the text formatting on the progress numbers and also the style of the progress bar itself:

.play-bar {

span { //Text properties of the numbers
color: $music-player-fg;
font-size: .8em;
font-weight: bold;
align-self: center;
}

.bar-bg { //Background of the progress bar
background-color: $music-player-fg;
width: 100%;
height: 6px;
border-radius: 10px;
align-self: center;
margin: 0 5px;

.progress { //Actual progress bar
background-color: $music-player-hl;
height: 6px;
border-radius: 10px;
width: 0%;
}
}
}

.SONG-CONTENT

This SASS is to style the song information layout and text formatting:

.song-content {
 .user-info {
display: flex;
justify-content: flex-start;

.img-wrapper { //Song cover image
width: 30px;
margin-right: 12px;
}
  .song-info { //Song information text
padding: 0;
align-self: center;
margin-top: -10px;
text-align: left;

.artist {
display: inline-block;
color: $music-player-hl;
font-size: .8em;
line-height: 1.2em;
display: block;
}

.song {
color: $music-player-fg;
font-size: .8em;
line-height: 1.2em;
display: block;
}
  }
}
}

.COMMENT-ICON

As a bonus we are going to add in some styles for a comment button that we put into the HTML earlier. It’s some simple positioning and styling of the little circle counter in the corner of the icon:

.comment-icon { //Positioning of the container
height: 30px;
display: flex;
justify-content: flex-end;
margin-left: auto;

a {
position: relative;
align-self: center;

img { //Sizing and positioning of the comment icon
width: 26px;
vertical-align: middle;
}

span { //Styling of the comment counter
position: absolute;
top: -3px;
right: -5px;
background-color: $music-player-hl;
color: $music-player-bg;
display: block;
text-align: center;
width: 15px;
height: 15px;
line-height: 15px;
font-weight: bold;
font-size: .5em;
border-radius: 50%;
}
 }
}

RESPONSIVE

At a screen size of 640px and below we are going to change the layout to match the design of the mobile version.

@media only screen and (max-width: 640px) { //Media query uses this code at 640px and under
 #music-player {

.comment-icon,
.previous,
.next {
display: none; //Hide things we don't need
}

.song-content { //Move song information to the left
width: auto;
float: left;
}

.controls { //Move controls to the right
width: auto;
position: absolute;
right: 10px;
}

.play-bar { //Move the player bar to the top
position: absolute;
left: 0;
top: -16px;
z-index: 999;
width: 100%;
display: block;
height: 7px;

.bar-bg {
margin: 0;
border-radius: 0;
}

span {
display: none; //Hide the time stamps
}
  }
}
}

FINAL CODE

You should now have a responsive HTML/SASS audio player! To download a working version of this code click HERE.

Originally published at www.eighty8design.co.uk on November 18, 2016.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.