Adding A Custom Music Player

CRM Build Tutorials Migrate A Website Adding A Custom Music Player

Lesson text coming soon...

HTML Code

Place the following HTML code in the Code element on the page:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple Music Player</title>
<!-- Load FontAwesome icons -->
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
</head>

<body>
<div class="player">

<!-- Define the section for displaying details -->
<div class="details">
<div class="track-name">Track Name</div>
</div>

<!-- Define the section for displaying track buttons -->
<div class="buttons">
<div class="prev-track" onclick="prevTrack()">
<i class="fa fa-step-backward fa-1x"></i>
</div>
<div class="playpause-track" onclick="playpauseTrack()">
<i class="fa fa-play-circle fa-2x"></i>
</div>
<div class="next-track" onclick="nextTrack()">
<i class="fa fa-step-forward fa-1x"></i>
</div>
</div>

<!-- Define the section for displaying the seek slider-->
<div class="slider_container">
<div class="current-time">00:00</div>
<input type="range" min="1" max="100"
value="0" class="seek_slider" onchange="seekTo()">
<div class="total-duration">00:00</div>
</div>

<!-- Define the section for displaying the volume slider-->
<div class="slider_container">
<i class="fa fa-volume-down"></i>
<input type="range" min="1" max="100"
value="99" class="volume_slider" onchange="setVolume()">
<i class="fa fa-volume-up"></i>
</div>
</div>

<!-- Load the main script for the player -->
<script src="main.js"></script>
</body>
</html>

Javascript/CSS Code

Copy the following code into a text editor and add your music links and titles. Then, paste the code into the "Head Tracking Field" in your site's settings:

<script>

// Select all the elements in the HTML page
// and assign them to a variable
let track_name = document.querySelector(".track-name");

let playpause_btn = document.querySelector(".playpause-track");
let next_btn = document.querySelector(".next-track");
let prev_btn = document.querySelector(".prev-track");

let seek_slider = document.querySelector(".seek_slider");
let volume_slider = document.querySelector(".volume_slider");
let curr_time = document.querySelector(".current-time");
let total_duration = document.querySelector(".total-duration");

// Specify globally used values
let track_index = 0;
let isPlaying = false;
let updateTimer;

// Create the audio element for the player
let curr_track = document.createElement('audio');

// Define the list of tracks that have to be played
let track_list = [
{
name: "Summertime",
path: "https://storage.googleapis.com/msgsndr/qQDMxG9AXNHN0Ce18tOx/media/65bbcff8471a55689cdaa480.mpeg"
},
{
name: "Jubilee",
path: "https://storage.googleapis.com/msgsndr/qQDMxG9AXNHN0Ce18tOx/media/65bbcff8748da7f4ced6e0fb.mpeg"
},
{
name: "World Brand New",
path: "https://storage.googleapis.com/msgsndr/qQDMxG9AXNHN0Ce18tOx/media/65bbcff882a5e3162a9c838e.mpeg",
},
];

function loadTrack(track_index) {
// Clear the previous seek timer
clearInterval(updateTimer);
resetValues();

// Load a new track
curr_track.src = track_list[track_index].path;
curr_track.load();

// Update details of the track
track_name.textContent = track_list[track_index].name;

// Set an interval of 1000 milliseconds
// for updating the seek slider
updateTimer = setInterval(seekUpdate, 1000);

// Move to the next track if the current finishes playing
// using the 'ended' event
curr_track.addEventListener("ended", nextTrack);
}

// Function to reset all values to their default
function resetValues() {
curr_time.textContent = "00:00";
total_duration.textContent = "00:00";
seek_slider.value = 0;
}

function playpauseTrack() {
// Switch between playing and pausing
// depending on the current state
if (!isPlaying) playTrack();
else pauseTrack();
}

function playTrack() {
// Play the loaded track
curr_track.play();
isPlaying = true;

// Replace icon with the pause icon
playpause_btn.innerHTML = '<i class="fa fa-pause-circle fa-2x"></i>';
}

function pauseTrack() {
// Pause the loaded track
curr_track.pause();
isPlaying = false;

// Replace icon with the play icon
playpause_btn.innerHTML = '<i class="fa fa-play-circle fa-2x"></i>';
}

function nextTrack() {
// Go back to the first track if the
// current one is the last in the track list
if (track_index < track_list.length - 1)
track_index += 1;
else track_index = 0;

// Load and play the new track
loadTrack(track_index);
playTrack();
}

function prevTrack() {
// Go back to the last track if the
// current one is the first in the track list
if (track_index > 0)
track_index -= 1;
else track_index = track_list.length - 1;

// Load and play the new track
loadTrack(track_index);
playTrack();
}

function seekTo() {
// Calculate the seek position by the
// percentage of the seek slider
// and get the relative duration to the track
seekto = curr_track.duration * (seek_slider.value / 100);

// Set the current track position to the calculated seek position
curr_track.currentTime = seekto;
}

function setVolume() {
// Set the volume according to the
// percentage of the volume slider set
curr_track.volume = volume_slider.value / 100;
}

function seekUpdate() {
let seekPosition = 0;

// Check if the current track duration is a legible number
if (!isNaN(curr_track.duration)) {
seekPosition = curr_track.currentTime * (100 / curr_track.duration);
seek_slider.value = seekPosition;

// Calculate the time left and the total duration
let currentMinutes = Math.floor(curr_track.currentTime / 60);
let currentSeconds = Math.floor(curr_track.currentTime - currentMinutes * 60);
let durationMinutes = Math.floor(curr_track.duration / 60);
let durationSeconds = Math.floor(curr_track.duration - durationMinutes * 60);

// Add a zero to the single digit time values
if (currentSeconds < 10) { currentSeconds = "0" + currentSeconds; }
if (durationSeconds < 10) { durationSeconds = "0" + durationSeconds; }
if (currentMinutes < 10) { currentMinutes = "0" + currentMinutes; }
if (durationMinutes < 10) { durationMinutes = "0" + durationMinutes; }

// Display the updated duration
curr_time.textContent = currentMinutes + ":" + currentSeconds;
total_duration.textContent = durationMinutes + ":" + durationSeconds;
}
}


// Load the first track in the tracklist
loadTrack(track_index);

</script>

<style>

/* Using flex with the column direction to
align items in a vertical direction */
.player {
height: 10%;
display: flex;
align-items: center;
flex-direction: row;
justify-content: center;
}

.details {
display: flex;
align-items: center;
justify-content: center;
margin-top: -5px;
}

/* Changing the font sizes to suitable ones */

.track-name {
font-size: 1.5rem;
margin-right: 40px;
font-family: Oswald;
color: white;
}


/* Using flex with the row direction to
align items in a horizontal direction */
.buttons {
display: flex;
flex-direction: row;
align-items: center;
color: white;
}

.playpause-track,
.prev-track,
.next-track {
color: white;
padding: 10px;
opacity: 1;

/* Smoothly transition the opacity */
transition: opacity .2s;
}

/* Change the opacity when mouse is hovered */
.playpause-track:hover,
.prev-track:hover,
.next-track:hover {
opacity: 0.8;
}

/* Define the slider width so that it scales properly */
.slider_container {
width: 75%;
max-width: 400px;
display: flex;
justify-content: center;
align-items: center;
}

/* Modify the appearance of the slider */
.seek_slider, .volume_slider {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 5px;
background: white;
opacity: 1;
-webkit-transition: .2s;
transition: opacity .2s;
}

/* Modify the appearance of the slider thumb */
.seek_slider::-webkit-slider-thumb,
.volume_slider::-webkit-slider-thumb {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 15px;
height: 15px;
background: white;
cursor: pointer;
border-radius: 50%;
}

/* Change the opacity when mouse is hovered */
.seek_slider:hover,
.volume_slider:hover {
opacity: 0.8;
}

.seek_slider {
width: 60%;
}

.volume_slider {
width: 30%;
}

.current-time,
.total-duration {
padding: 10px;
font-family: Oswald;
color: white;
}

i.fa-volume-down,
i.fa-volume-up {
padding: 10px;
color: white;
}

/* Change the mouse cursor to a pointer
when hovered over */
i.fa-play-circle,
i.fa-pause-circle,
i.fa-step-forward,
i.fa-step-backward {
cursor: pointer;
}

</style>

Previous Lesson
Back to Module
Next Lesson