ipod like music player using HTML CSS and Javascript.

Hello readers we are back with another interesting article.This is based on the topic HTML. Hope alll are doing well and safe. Explore all the contents in our blog and support us.

In this article we are going to learn how to code ipod like music player using HTML,CSS and Javascript.In this article we have created a custom ipod like music player.

What does the music player contain?

Top heading as "MUSIC PLAYER".
A speaker image.
Control buttons like "play" and "pause" buttons.
A heading named "volume".
Volume control buttons.

Video Explanation.

Here I have explained in detail about the code, For better understanding the video is provided.

Download the source codes from here.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <script src='https://kit.fontawesome.com/a076d05399.js'></script>
  <title>Created by RiseProgramming</title>
  <link rel="stylesheet" href="music player.css">
  <script src="music palyer.js">

  </script>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <audio src="play.mp3" id="song">

  </audio>
  <div class="player">
    <div class="wrapper">MUSIC PLAYER</div><br>
    <img src="speaker3.jpg" alt=""><br>
    <div class="contols">
      <button id="start" onclick="start()">play</button>
      <button id="stop" onclick="stop()">pause</button>
    </div>
  <div class="volume">
    <div class="volhead">VOLUME</div><br>
    <button id='up' onclick="up()">+</button>
    <button id="down" onclick="down()">-</button>
  </div>


  </div>

</body>
</html>

The HTML part is quite simple and small for this task. The whole content is written inside the "player" class. The audio is played using the <audio> tag with src pointed to the path of the song you wish to play. Inside the "wrapper" class the title "MUSIC PLAYER" is written.

Inside the "controls" class the pause and play buttons are written with unique ids and unique onclick functions "start()" and "stop()" respectively..

Inside the "volume" class the volume up and down buttons are written with it's heading written inside the "volhead" class. The volume buttons are given with "up()" and "down()" onclick functions respectively.

CSS:

html,body{
  display: grid;
  height: 100%;
  width: 100%;

  place-items:center;
}
.wrapper{
  text-align: center;
  font-size: 20px;
  padding: 10px;
  border-radius: 10px;
  width: 130;
  background: -webkit-linear-gradient(130deg,#e9c121,#cbc8df);
}
img{
  display:block;
  margin-left: auto;;
  margin-right: auto;
  width: 100px;
  text-align: center;
}
.player{
  border:2px solid #500ef1;
  width:220px;
  background: -webkit-linear-gradient(130deg,green,blue);
  border-radius: 10px;

}
button{
  color:white;
  padding-left: 20px;
  padding-right: 20px;
background-color: transparent;
  font-size: 20px;
  border-radius: 10px;
}
.contols{
  margin-top: 20px;
}
.volume{
  margin-top: 60px;
}
#start{
  background: -webkit-linear-gradient(-105deg,green,blue);
}
.volhead{
  text-align: center;
  padding: 10px;
  background: -webkit-linear-gradient(130deg,violet,pink);
  border-radius: 10px;
}

Here the CSS part played the main role in styling the audio player. Let's discuss it step by step.

The "wrapper" class the text is aligned to center, the properties like padding, border are adjusted according to requirements. The background is set through the "-webkit-linear-gradient" so that 2 colors can be mixed.

The speaker image width is set to "100px" and it is made to be placed in the middle so that the experience of an ipod will be seen by seeing the image.

The whole player's width is set to "220px" and border and background are according to requirements.

The buttons color is made white and background color to transparent. The font-size padding and all are set to 20px.

At last such a styling is done so that the buttons and controls are all placed in aright position.

Javascript:

var a=0.2;
function start() {
  document.getElementById('song').volume=a;
  document.getElementById('song').play();
}
function stop() {
  document.getElementById('song').pause();
}
function up() {
  if(window.a>0.9)
    window.a=0.9;
  window.a+=0.1;
  document.getElementById('song').volume=a;
}
function down() {
  if(window.a<0.1)
    window.a=0.1;
  window.a-=0.1;
  document.getElementById('song').volume=a;
}

document.getElementById('song') will point to the <audio> tag document.getElementById('song').play() is used to play the song.

document.getElementById('song').pause() is used to pause the song. document.getElementById('song').volume sets the volume for it.

On clicking the pause the pause button the song is paused according to the syntax which is mentioned above. On clicking the play button the song will be played.

Care is taken care that the volume will that the volume does not go beyond 1.0 and not decreases less than 0.0 by placing some if statements inside the functions. If the variable "a" goes beyond 1.0 it is made to stay in 1.0 itself and vice versa.

RiseProgramming

Video Explanation.

You might like these:

Download the source codes from here.

HTML:

CSS:

Javascript:

Thanks for Visiting.

Post a Comment

Post a Comment

About Us

Contact Form