JavaScript, CSS, Bootstrap, and HTML were used to create the Music Player in JavaScript.

This project contains the source code for our self-made song-collecting app.

A JavaScript Music Player user can relax while listening to music by selecting the sound they want to hear from the player. This project uses a lot of JavaScript to keep everything running smoothly.

This project also comes with a free downloadable source code; simply find the downloadable source code below and click to begin downloading.

Why Music Player using Javascript is important?

They’re little digital music players that play music in the form of audio files like MP3.

Furthermore, most of these gadgets allow you to store videos, and photos, and listen to radio and television shows (podcasting).

The typical output devices for providing sound to the listener are earphones and external speakers.

Learning to play a musical instrument has been shown to improve verbal memory, spatial thinking, and reading skills, according to studies.

Playing an instrument requires the use of both sides of the brain, which improves memory.

What are the advantages of Music Player Javascript Code?

It boosts mental performance. Several studies have found strong links between music and improved cognitive performance.
It helps to build self-esteem.
It improves concentration and teaches self-control.
It boosts your emotional health.
It enhances social abilities.

How does Music Player with Javascript?

The user can listen to a variety of songs and enjoy the sound of it.

The user can change the app’s backdrop color and the music by using the forward and backward play buttons.

Learning to play a musical instrument has been shown to improve verbal memory, spatial thinking, and reading skills, according to studies.

Playing an instrument requires the use of both sides of the brain, which improves memory.

About the Project

The system is a straightforward project built with JavaScript, CSS, and HTML. This is a fun activity to work on while listening to our self-made song collection app.

The user can listen to a variety of songs and enjoy the sound of it. To change the music, the user can use the forward and backward play buttons.

The given code below is a Python file for app.js

let playlist = [ {
  'title': 'You Are My Strength By Hillsong',
  '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 );

The given code below is a Python file for index.html

<!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">

<!---border radius 50, transform translate 50 50, sans serif, div class music, font size 30px  ->

		<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">

					23 <i class="fa  fa-microphone fa-fw"></i>

				</span>

				<img src="assets/avatar.jpeg">

				<nav class="set">

<!---font family, rel stylesheet href style.css, 0 box sizing border box body,  height 100vh, box shadow, link rel stylesheet href https cdnjs.cloudflare.com ajax libs font->

				<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">

					

					<img src="assets/cover.jpg">

<!--html code, object fit cover, play pause, doctype html lang en head meta charset utf-8 meta name viewport content width device width initial scale 1.0, display flex align items center justify content center, import url https fonts.googleapis.com css2 family-->

				</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>

				</div>

				<div class="player-controls scrubber">

					<div>

						<div>

							<p class="title"></p>

						</div>

						<div class="range">

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

Project Details and Technology

Project Name:	Music Player in JavaScript with Source Code
Abstract	We’ll make a Music Player in JavaScript with a simple user interface that may be used to listen to music online. We’ll also include features like volume control and seeking. The HTML Media Element interface contains various methods for playing and controlling audio files without the need for any external libraries.
Language/s Used:	JavaScript
JavaScript version (Recommended):	ES2015
Database:	MYSQL
Type:	Web Application
Developer:	Source Code Hero
Updates:	0

Steps how to run the project

Time needed: 3 minutes

Step 1: Download Source Code
To get started, find the downloaded source code file below and click to start downloading it.
Step 2: Extract File
Navigate to the file’s location when you’ve finished downloading it and right-click it to extract it.
Step 3: Run the project
click the index.html inside the folder to start executing the project.

Download the Source Code below

Download

Summary

For those Web developers interested in learning more about web apps, this system is a fully functional project.

Inquiries

If you have any questions or comments on the project, please leave a comment below.