Music has been a part of human life for thousands of years. It is a form of expression that transcends language barriers and speaks to the heart of the listener. With the advent of technology, music has become more accessible than ever before. In this article, we will explore how to create a music player using JavaScript.
JavaScript is a powerful programming language that is used to create dynamic and interactive web pages. It is widely used for web development and can be used to create music players that run in the browser. With JavaScript, you can create a music player that is fast, responsive, and customizable.
Introduction to JavaScript
JavaScript is a scripting language used to add interactivity to web pages. It is a popular language among developers due to its flexibility and ease of use. JavaScript can be used to create a wide range of applications, from simple calculators to complex games and everything in between.
Creating a Music Player
To create a music player in JavaScript, we will need to use the HTML5 Audio element. This element allows us to play audio files directly in the browser without the need for any plugins. We will also need to use JavaScript to handle user interactions, such as play, pause, and skip.
Music Player In JavaScript Preview
Getting Started
Before we dive into the code, let’s first discuss what we need to get started. To create a music player in JavaScript, we will need the following:
- HTML file
- CSS file
- JavaScript file
- Audio files
Creating a Music Player using HTML, CSS and JavaScript
Step 1. Open Sublime Text, or your text editor
Step 2. Then click “file” and save as “index.html“ to create a html file
Step 3. Click “file” and save as “app.css“ to create CSS file
Step 4. Last, click “file” and save as “app.js“ to crate JavaScript file
Step 5. Now copy all the code that we given bellow
Code for the HTML file
Copy the code below into the HTML file you just created
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>Audio Player</title>
<link href="https://fonts.googleapis.com/css?family=Darker+Grotesque|Poiret+One&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="src/app.css">
</head>
<body>
<div class="audio-player" id="skin">
<div class="user_avatar">
<span class="live">
live <i class="fa fa-circle fa-fw"></i>
</span>
<span class="listeners">
<!-- font family , font size 30px, san serif -->
23 <i class="fa fa-microphone fa-fw"></i>
</span>
<img src="assets/avatar.jpeg">
<nav class="set">
<a class="dropdown-toggle" href="#" title="Menu"><i class="fa fa-cogs"></i></a>
<ul class="dropdown">
<li><a href="#" id="darkButton">Dark</a></li>
<li><a href="#" id="whiteButton">Default</a></li>
<li><a href="#" id="blueButton">Blue</a></li>
</ul>
</nav>
</div>
<div class="holder">
<div class="cover">
<!-- box sizing border box height 100 -->
<img src="assets/cover.jpg">
</div>
<div class="audio-wrapper" id="player-container" href="javascript:;">
<audio id="player" preload="metadata" onloadedmetadata="mDur()" ontimeupdate="initProgressBar()">
<source src="" type="audio/mp3">
</audio>
<!-- box shadow and object fit cover -->
</div>
<div class="player-controls scrubber">
<div>
<div>
<p class="title"></p>
</div>
<div class="range">
<!-- border radius 50 , opacity 0 and event listeners height 100vh -->
<input id="dur" type="range" class="range" name="rng" min="0" max="1" step="0.00000001" value="0" onchange="mSet()" style="width: 100%">
</div>
<br>
<span class="time start-time"></span>
<span class="time end-time"></span>
<br>
<div class="ctrl">
<div>
<a href="#prev" class="ctrl_btn " id="prev"><i class="fa fa-arrow-left" ></i></a>
<span id="play-btn" class="fa fa-play "></span>
<a href="#next" class="ctrl_btn " id="next"><i class="fa fa-arrow-right" ></i></a>
</div>
<div class="volumeControl">
<div class="wrapper">
<i class="fa fa-volume-up"></i>
<span class="outer">
<span class="inner"></span>
</span>
</div>
</div>
</div>
</div>
<div>
</div>
</div>
</div>
<div class="action">
<div>
<a href="#" class="like shadow">Like <i class="fa fa-heart-o"></i></a>
<a href="#" class="like shadow">Share <i class="fa fa-share-alt"></i></a>
<a href="#" class="like shadow">Subscribe <i class="fa fa-podcast"></i></a>
</div>
</div>
</div>
<script type="text/javascript" src="assets/jquery/jquery.min.js"></script>
<script type="text/javascript" src="src/app.js"></script>
</body>
</html>In this HTML file, we have created a basic structure for our music player. We have included a link to a CSS file and a script tag for our JavaScript file. We have also included an audio tag with the source attribute set to our audio file.
We have also created a container div to hold our audio tag and control buttons. We have added three buttons to control our music player – play, pause, and stop.
Code for the App.js Module
Copy the code below into the JS file you just created
let playlist = [ {
'title': 'Disco Mix',
'audio': "assets/sample1.mp3",
}, {
'title': 'I Remember You By Jude Suarez',
'audio': "assets/sample2.mp3",
}
];
i = 0;
n = playlist.length;
let player = document.getElementById( 'player' );
let dur = document.getElementById( 'dur' );
playlist.forEach( function( i ) {
console.log( i.audio )
player.src = i.audio;
$( '.title' ).html( i.title );
}, );
function calculateTotalValue( length ) {
let minutes = Math.floor( length / 60 ),
seconds_int = length - minutes * 60,
seconds_str = seconds_int.toString( ),
seconds = seconds_str.substr( 0, 2 ),
time = minutes + ':' + seconds
return time;
}
function calculateCurrentValue( currentTime ) {
let current_hour = parseInt( currentTime / 3600 ) % 24,
current_minute = parseInt( currentTime / 60 ) % 60,
current_seconds_long = currentTime % 60,
current_seconds = current_seconds_long.toFixed( ),
current_time = ( current_minute < 10 ? "0" + current_minute : current_minute ) + ":" + ( current_seconds < 10 ? "0" + current_seconds : current_seconds );
return current_time;
}
function initProgressBar( ) {
let length = player.duration;
let current_time = player.currentTime;
let totalLength = calculateTotalValue( length )
jQuery( ".end-time" ).html( totalLength );
let currentTime = calculateCurrentValue( current_time );
jQuery( ".start-time" ).html( currentTime );
dur.value = player.currentTime;
if ( player.currentTime == player.duration ) {
$( "#play-btn" ).fadeIn( "slow", function( ) {
$( this ).removeClass( "fa-pause" );
$( this ).addClass( "fa-play" );
dur.value = 0;
} );
}
};
function mSet( ) {
player.currentTime = dur.value;
}
function mDur( ) {
let length = player.duration;
dur.max = length;
}
function initPlayers( num ) {
for ( let i = 0; i < num; i++ ) {
( function( ) {
let playerContainer = document.getElementById( 'player-container' ),
player = document.getElementById( 'player' ),
isPlaying = false,
playBtn = document.getElementById( 'play-btn' );
if ( playBtn != null ) {
playBtn.addEventListener( 'click', function( ) {
togglePlay( )
} );
}
function togglePlay( ) {
if ( player.paused === false ) {
player.pause( );
isPlaying = false;
$( "#play-btn" ).fadeIn( "slow", function( ) {
$( this ).removeClass( "fa-pause" );
$( this ).addClass( "fa-play" );
} );
}
else {
player.play( );
$( "#play-btn" ).fadeIn( "slow", function( ) {
$( this ).removeClass( "fa-play" );
$( this ).addClass( "fa-pause" );
} );
isPlaying = true;
}
}
}( ) );
}
}
$( "#next" ).data( 'dir', 1 );
$( "#prev" ).data( 'dir', -1 );
$( '#next, #prev' ).on( 'click', function( ) {
i = ( i + $( this ).data( 'dir' ) + n ) % n;
console.log( i );
player.src = playlist[ i ].audio;
$( '.title' ).html( playlist[ i ].title );
$( '#play-btn' ).removeClass( "fa-play" );
$( '#play-btn' ).addClass( "fa-pause" );
player.play( );
} );
$( ".audio-player" )
.toArray( )
.forEach( function( player ) {
let audio = $( player ).find( "audio" )[ 0 ];
let volumeControl = $( player ).find( ".volumeControl .wrapper" );
volumeControl.find( ".outer" ).on( "click", function( e ) {
let volumePosition = e.pageX - $( this ).offset( ).left;
let audioVolume = volumePosition / $( this ).width( );
if ( audioVolume >= 0 && audioVolume <= 1 ) {
audio.volume = audioVolume;
$( this )
.find( ".inner" )
.css( "width", audioVolume * 100 + "%" );
}
} );
} );
$( function( ) {
// Dropdown toggle
$( '.dropdown-toggle' ).click( function( ) {
$( this ).next( '.dropdown' ).slideToggle( "fast" );
} );
$( document ).click( function( e ) {
var target = e.target;
if ( !$( target ).is( '.dropdown-toggle' ) && !$( target ).parents( ).is( '.dropdown-toggle' ) ) {
$( '.dropdown' ).hide( );
}
} );
} );
$( '#darkButton' ).click( switchDark );
$( '#whiteButton' ).click( switchWhite );
$( '#blueButton' ).click( switchBlue );
function switchDark( ) {
$( '#skin' ).attr( 'class', 'dark audio-player' );
$( '.inner' ).css( 'background', '#fff' );
$( '.title' ).css( 'color', '#fff' );
$( '.time' ).css( 'color', '#fff' );
$( '.fa-volume-up' ).css( {
'color': '#fff'
} );
$( '.audio-player #play-btn' ).css( {
'color': '#fff',
'border-color': '#fff'
} );
$( '.ctrl_btn' ).css( {
'color': '#fff',
'border-color': '#fff'
} );
}
function switchWhite( ) {
$( '#skin' ).attr( 'class', 'white audio-player' );
$( '.inner' ).css( 'background', '#555' );
$( '.title' ).css( 'color', '#555' );
$( '.time' ).css( 'color', '#555' );
$( '.fa-volume-up' ).css( {
'color': '#555'
} );
$( '.audio-player #play-btn' ).css( {
'color': '#555',
'border-color': '#555'
} );
$( '.ctrl_btn' ).css( {
'color': '#555',
'border-color': '#555'
} );
}
function switchBlue( ) {
$( '#skin' ).attr( 'class', 'blue audio-player' );
$( '.inner' ).css( 'background', '#fff' );
$( '.title' ).css( 'color', '#fff' );
$( '.time' ).css( 'color', '#fff' );
$( '.fa-volume-up' ).css( {
'color': '#fff'
} );
$( '.audio-player #play-btn' ).css( {
'color': '#fff',
'border-color': '#fff'
} );
$( '.ctrl_btn' ).css( {
'color': '#fff',
'border-color': '#fff'
} );
}
initPlayers( jQuery( '#player-container' ).length );Download Source Code of Music Player Project in JavaScript
| ABOUT PROJECT | PROJECT DETAILS |
|---|---|
| Project Name : | Music Player In JavaScript |
| Project Platform : | JavaScript |
| Programming Language Used : | JavaScript, HTML, and CSS |
| Credit Developer : | itsourcecode |
| IDE Tool (Recommended): | Sublime |
| Project Type : | Web Application |
| Database: | None |
You can download the source code of Music Player by clicking this link Music Player in JavaScript
Conclusion
Creating a music player in JavaScript is not as difficult as it may seem. With the HTML5 Audio element and some JavaScript code, we can create a basic music player that can play, pause, and skip tracks.
When creating a music player, it is important to focus on the user experience. We can achieve this by adding intuitive controls and styling the player to make it visually appealing. We can also use JavaScript to add additional functionality, such as the ability to shuffle or repeat tracks.
Overall, a music player can be a fun project for developers to work on, and it can also be a valuable addition to websites that feature music or podcasts. With a little bit of HTML, CSS, and JavaScript knowledge, anyone can create a music player that is both functional and aesthetically pleasing.