Download Music Player Free Source Code In JavaScript

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.