Play & Enjoy Awesome Song With Maa Blogger By Coding (Music Player)

Ticker

10/recent/ticker-posts

Play & Enjoy Awesome Song With Maa Blogger By Coding (Music Player)

AK Creative 1/15/2021 04:13:00 PM

Create A Music Player Program By This Code 


HTML Code

<!DOCTYPE html>

<html>

<head>

<title>Music Player</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <link rel="stylesheet" type="text/css" href="style.css">

</head>


<body>


  <div class="main">

  <p id="logo"><i class="fa fa-music"></i>Music</p>

     <div class="left">

     <img id="track_image">

         <div class="volume">

            <p id="volume_show">100</p>

            <i class="fa fa-volume-up" aria-hidden="true" onclick="mute_sound()" id="volume_icon"></i>

            <input type="range" min="0" max="100" value="90" onchange="volume_change()" id="volume">  

         </div>

     </div>

  <div class="right">


        <div class="show_song_no">

          <p id="present">1</p>

          <p>/</p>

          <p id="total">5</p>

        </div>

      <p id="title">title.mp3</p>

      <p id="artist">Artist name</p>

  <div class="middle">

         <button onclick="previous_song()" id="pre"><i class="fa fa-step-backward" aria-hidden="true"></i></button>

         <button onclick="justplay()" id="play"><i class="fa fa-play" aria-hidden="true"></i></button>

         <button onclick="next_song()" id="next"><i class="fa fa-step-forward" aria-hidden="true"></i></button>

     </div>

        <div class="duration">

           <input type="range" min="0" max="100" value="0" id="duration_slider" onchange="change_duration()">

        </div>

           <button id="auto" onclick="autoplay_switch()">Auto play <i class="fa fa-circle-o-notch" aria-hidden="true"></i></button>

  </div>

  </div>

  <script src="script.js"></script>

</body>

</html>



CSS Code

*{

margin: 0;

padding: 0;

font-family: Harrington, Harrington, Harrington;

}

body{

height: 100vh;

width: 100%;

display: flex;

align-items: center;

justify-content: center;

}

.main{

position: relative;

height: 80%;

width: 80%;

display: flex;

align-items: center;

justify-content: center;

background:url(https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80);

}

.main button{

padding: 10px 12px;

margin: 0 10px;

}

.main #logo{

position: absolute;

top: 10px;

left: 30px;

font-size: 35px;

color: #3333cc;

}

.main #logo i{

margin-right: 15px;

}

.right,.left{

position: relative;

height: 100%;

width: 50%;

display: flex;

align-items: center;

justify-content: center;

flex-direction: column;

}

.left img{

height: 300px;

width: 80%;

border-radius: 15px;

box-shadow: 1px 0px 20px 12px rgba(240,240,240,0.2);

}

input[type="range"] {

-webkit-appearance: none;

width: 50%;

outline: none;

height: 2px;

margin: 0 15px;

}

input[type="range"]::-webkit-slider-thumb{

-webkit-appearance: none;

height: 20px;

width: 20px;

background: #FF8A65;

border-radius: 50%;

cursor: pointer;

}

.right input[type=range]{

width: 40%;

}

.left .volume{

position: absolute;

bottom: 10%;

left: 0;

width: 100%;

height: 30px;

display: flex;

align-items: center;

justify-content: center;

color: #fff;

}

.left .volume p{

font-size: 25px;

}

.left .volume i{

cursor: pointer;

padding: 8px 12px;

background: #0000ff;

}

.left .volume i:hover{

background: rgba(245,245,245,0.1);

}

.volume #volume_show{

padding: 8px 12px;

margin: 0 5px 0 0;

background: rgba(245,245,245,0.1);

}

 .right .middle{

  width: 100%;

    display: flex;

align-items: center;

justify-content: center;

}

.right .middle button{

border: none;

height: 70px;

width: 70px;

border-radius: 50%;

    display: flex;

align-items: center;

justify-content: center;

cursor: pointer;

outline: none;

transition: 0.5s;

background: rgba(255,255,255,0.1);

}

.right #title{

position: absolute;

top: 60px;

left: 50%;

transform: translateX(-50%);

text-transform: capitalize;

color: #00f0ff;

font-size: 35px;

}

.right #artist{

position: absolute;

top: 110px;

left: 50%;

transform: translateX(-50%);

text-transform: capitalize;

color: #ff0066;

font-size: 28px;

}

.right .duration{

position: absolute;

bottom: 20%;

left: 50%;

transform: translateX(-50%);

display: flex;

align-items: center;

justify-content: center;

width: 100%;

height: 20px;

margin-top: 40px;

}

.right .duration p{

color: #fff;

font-size: 20px;

margin-left: 20px;

}

.right #auto{

font-size: 20px;

cursor: pointer;

margin-top: 45px;

border: none;

padding: 10px 14px;

color: #ff0066;

background: rgba(0,255,255,0.2);

outline: none;

border-radius: 10px;

}

.right #auto i{

margin-left: 8px;

}

#play{

background: #7300e6;

}

.right button:hover{

background: #00ff00;

}

.right i:before{

color: #ff0066;

font-size: 20px;

}


.right .show_song_no{

  position: absolute;

  top: 10px;

  right: 10px;

  width: 30px;

  height: 20px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 8px 12px;

  color: #fff;

  border-radius: 5px;

  background: rgba(255,255,255,0.2);

}

.right .show_song_no p:nth-child(2){

margin: 0 5px;

}




JavaScript Code

let previous = document.querySelector('#pre');
let play = document.querySelector('#play');
let next = document.querySelector('#next');
let title = document.querySelector('#title');
let recent_volume= document.querySelector('#volume');
let volume_show = document.querySelector('#volume_show');
let slider = document.querySelector('#duration_slider');
let show_duration = document.querySelector('#show_duration');
let track_image = document.querySelector('#track_image');
let auto_play = document.querySelector('#auto');
let present = document.querySelector('#present');
let total = document.querySelector('#total');
let artist = document.querySelector('#artist');
let timer;
let autoplay = 0;

let index_no = 0;
let Playing_song = false;
let track = document.createElement('audio');

let All_song = [
   {
     name: "Tu Kitni Achhi Hai O Maa ",
     path: "https://pagalsongs.site/files/sfd3/1080/Tu%20Kitni%20Achhi%20Hai_192(PaglaSongs).mp3",
     img: "https://i.pinimg.com/originals/d2/20/80/d2208033c35769487d2cae274f6abebc.jpg",
     singer: "1"
   },
   {
     name: "second song",
     path: "music/song2.mp3",
     img: "img/img2.jpg",
     singer: "2"
   },
   {
     name: "third song",
     path: "music/song3.mp3",
     img: "img/img3.jpg",
     singer: "3"
   },
   {
     name: "fourth song",
     path: "music/song4.mp3",
     img: "img/img4.jpg",
     singer: "4"
   },
   {
     name: "fifth song",
     path: "music/song5.mp3",
     img: "img/img5.jpg",
     singer: "5"
   }
];
function load_track(index_no){
clearInterval(timer);
reset_slider();

track.src = All_song[index_no].path;
title.innerHTML = All_song[index_no].name;
track_image.src = All_song[index_no].img;
    artist.innerHTML = All_song[index_no].singer;
    track.load();
timer = setInterval(range_slider ,1000);
total.innerHTML = All_song.length;
present.innerHTML = index_no + 1;
}
load_track(index_no);
function mute_sound(){
track.volume = 0;
volume.value = 0;
volume_show.innerHTML = 0;
}
 function justplay(){
  if(Playing_song==false){
  playsong();

  }else{
  pausesong();
  }
 }
 function reset_slider(){
  slider.value = 0;
 }
function playsong(){
  track.play();
  Playing_song = true;
  play.innerHTML = '<i class="fa fa-pause" aria-hidden="true"></i>';
}
function pausesong(){
track.pause();
Playing_song = false;
play.innerHTML = '<i class="fa fa-play" aria-hidden="true"></i>';
}
function next_song(){
if(index_no < All_song.length - 1){
index_no += 1;
load_track(index_no);
playsong();
}else{
index_no = 0;
load_track(index_no);
playsong();

}
}
function previous_song(){
if(index_no > 0){
index_no -= 1;
load_track(index_no);
playsong();

}else{
index_no = All_song.length;
load_track(index_no);
playsong();
}
}
function volume_change(){
volume_show.innerHTML = recent_volume.value;
track.volume = recent_volume.value / 100;
}
function change_duration(){
slider_position = track.duration * (slider.value / 100);
track.currentTime = slider_position;
}

function autoplay_switch(){
if (autoplay==1){
       autoplay = 0;
       auto_play.style.background = "rgba(255,255,255,0.2)";
}else{
       autoplay = 1;
       auto_play.style.background = "#FF8A65";
}
}


function range_slider(){
let position = 0;

if(!isNaN(track.duration)){
   position = track.currentTime * (100 / track.duration);
   slider.value =  position;
      }

       if(track.ended){
        play.innerHTML = '<i class="fa fa-play" aria-hidden="true"></i>';
           if(autoplay==1){
       index_no += 1;
       load_track(index_no);
       playsong();
           }
    }
     }


Music Player Screen 



Tags:

Post a Comment

36 Comments

  1. Unique KnowJanuary 15, 2021 at 4:14 PM

    Awesome work with HTML code

    ReplyDelete
  2. UnknownJanuary 15, 2021 at 5:24 PM

    Kallu good

    ReplyDelete
  3. WonderingJanuary 15, 2021 at 6:03 PM

    Wonderful & Excellent

    ReplyDelete
  4. Excellent workJanuary 15, 2021 at 6:05 PM

    Excellent & Fabulous idea

    ReplyDelete
  5. Excellent workJanuary 15, 2021 at 6:10 PM

    Nice Work

    ReplyDelete
  6. AwesomeJanuary 15, 2021 at 6:11 PM

    Superb & Very nice

    ReplyDelete
  7. WonderfulJanuary 15, 2021 at 6:14 PM

    Amazing & Wonderful

    ReplyDelete
  8. Rock_ArviJanuary 15, 2021 at 6:17 PM

    Excellent & Perfect 👌

    ReplyDelete
  9. ArviJanuary 15, 2021 at 6:23 PM

    Perfect 👌
    Nice Work

    ReplyDelete
  10. UnknownJanuary 15, 2021 at 6:25 PM

    Brilliant & Perfect

    ReplyDelete
  11. FabulousJanuary 15, 2021 at 6:27 PM

    Wonderful

    ReplyDelete
  12. MLLJanuary 15, 2021 at 6:29 PM

    Awesome & Perfect 👌

    ReplyDelete
  13. SuperJanuary 15, 2021 at 6:31 PM

    Excellent & Exclusive

    ReplyDelete
  14. Max Gaur presentsJanuary 16, 2021 at 8:28 AM

    Outstanding

    ReplyDelete
  15. ShubhamJanuary 16, 2021 at 9:33 AM

    Excellent work

    ReplyDelete
  16. ArzuJanuary 16, 2021 at 7:17 PM

    Excellent

    ReplyDelete
  17. akhJanuary 16, 2021 at 7:19 PM

    Perfect 👌

    ReplyDelete
  18. UnknownJanuary 16, 2021 at 7:25 PM

    Awesome

    ReplyDelete
  19. UnknownJanuary 16, 2021 at 7:26 PM

    Awesome

    ReplyDelete
  20. UnknownJanuary 16, 2021 at 7:30 PM

    Very Nice

    ReplyDelete
  21. UnknownJanuary 16, 2021 at 7:34 PM

    Fantastic

    ReplyDelete
  22. UnknownJanuary 16, 2021 at 7:35 PM

    Fantastic

    ReplyDelete
  23. UnknownJanuary 16, 2021 at 7:36 PM

    Fantastic

    ReplyDelete
  24. KritikaJanuary 16, 2021 at 7:38 PM

    Awesome

    ReplyDelete
  25. UnknownJanuary 16, 2021 at 7:44 PM

    Amazing & Wonderful

    ReplyDelete
  26. UnknownJanuary 16, 2021 at 7:46 PM

    Amazing & Fantastic

    ReplyDelete
  27. KKJanuary 16, 2021 at 7:48 PM

    Amazing Wonderful

    ReplyDelete
  28. UnknownJanuary 16, 2021 at 7:51 PM

    Amazing

    ReplyDelete
  29. UnknownJanuary 16, 2021 at 7:53 PM

    Amazing

    ReplyDelete
  30. UnknownJanuary 16, 2021 at 7:56 PM

    Amazing

    ReplyDelete
  31. UnknownJanuary 16, 2021 at 8:05 PM

    Amazing

    ReplyDelete
  32. snehaJanuary 16, 2021 at 8:09 PM

    Awesome

    ReplyDelete
  33. son aJanuary 16, 2021 at 8:12 PM

    Amazing

    ReplyDelete
  34. UnknownJanuary 16, 2021 at 8:17 PM

    Amazing

    ReplyDelete
  35. UnknownJanuary 16, 2021 at 8:33 PM

    Amazing

    ReplyDelete
  36. UnknownJanuary 16, 2021 at 8:34 PM

    Superb

    ReplyDelete