The Music Player in JavaScript is a simple web-based music player that can be used to make your playlist well-organized on web.

In addition, the Music Player is developed using JavaScript, CSS, bootstrap, and HTML. this Music Player is for listening to our self-made songs collection.

The user can play different kinds of music and enjoy the sound of their music. The user can adjust the background color of the app and click the forward and backward play button to change the songs.

What is Music Player in JavaScript

In JavaScript, Music Player is a simple project which allows you to play and enjoy music on the web using internet browser such as (Google Chrome, Brave, and Mozilla Firefox).

In addition, the user can play music and listen to their favorite music and relax by enjoying the entire songs available on the project you can play or pause and view all the song details and can previous song which you like the most.

This Music Player in JavaScript also includes a downloadable source code for free, just find the downloadable source code below and click to start downloading.

I have here a suggested list of Best JavaScript Projects with Source Code Free to download and I’m sure this can help you to improve your skills in JavaScript programming and web development as a whole.

Project details and technology:

ABOUT PROJECT	PROJECT DETAILS
Project Name :	Music Player In JavaScript
Project Platform :	JavaScript
Programming Language Used:	JavaScript, HTML, and CSS
Developer Name :	itsourcecode.com
IDE Tool (Recommended):	Sublime
Project Type :	Web Application
Database:	None
Upload Date:	9 / 24 / 2022

Steps on how to create a Music Player In JavaScript

Time needed: 5 minutes

Music Player In JavaScript With Source Code

Step 1: Open Sublime Text.
First after installing sublime text IDE, click “open” to start.
Step 2: Create a HTML file.
Second click “file” and select “save as” and named it “index.html“
Step 3: Create a CSS file.
Third click “file” and select “save as” and named it “app.css“
Step 4: Create a JavaScript file.
Fourth click “file” and select “save as” and named it “app.js“
Step 5: The actual code.
You are free to copy the code given below and paste to your different file created.

The Code Given Below Is For The Index.html Module

<!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 module which is the html file of the system.

The Code Given Below Is For The App.js Module

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 );

In this module which is the JavaScript file of the system.

Downloadable Source Code

DOWNLOAD

Summary

This Music Player is simply developed in HTML, CSS, and JavaScript.

Taking about the features of this system, the user can listen to their music and relax by enjoying the music sound as their choice like the music player.

Also, you can adjust the background color of the app. You just have to click on settings option and set the color they like.

This project includes a lot of JavaScript for making the functioning of the project.

Inquiries

If you have any questions or suggestions about Music Player In JavaScript, please feel free to leave a comment below.

Music Player In JavaScript With Source Code