i want to add repeat song button and also to make time bar according to song time

  dynamic, javascript, progress-bar, repeat

enter code here
i want to add repeat song button and also to make time bar according to song time. If it is done then I will be very thankful to anyone. Advance thanks who will assist me. It is creating problem for me when I am adding new function for repeat song.JavaScript statements are commands to the browser JavaScript code is a sequence of statements JavaScript statements are separated with semicolon Multiple statement on one line is allowed JavaScript statements can be grouped together in code blocks You can break a code line after an operator or a comma.

<!DOCTYPE html>
<?php
$con = mysqli_connect('localhost','root');
mysqli_select_db($con,'music');

if(isset($_POST['submit']))
{
$file_name=$_FILES["audio"]["name"];
$tmp_name=$_FILES["audio"]["tmp_name"];
$file_img=$_FILES["img"]["name"];
$tmp_img=$_FILES["img"]["tmp_name"];
$singer=$_POST["sname"];
$sql = "INSERT INTO bd (id,audio,img,singer) VALUES(NULL,'$file_name','$file_img','$singer')";
$qu=mysqli_query($con,$sql) or die(mysqli_error());

move_uploaded_file($tmp_name,"upload/".$file_name);
  move_uploaded_file($tmp_img,"img/".$file_img);
}
?>

<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" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <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>
    <!--- left part --->
    <div class="container">
    <div class="row">
     <div class="left">

      <!--- song img --->
      <img id="track_image">
         <div class="volume">
            <p id="volume_show">90</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>
     </div>
 

     <!--- right part --->
 <div class="container">
 <div class="row">

   <div class="form-group col-lg-4">
    <div class="input-group">
     <span class="input-group-addon ">Search</span>
     <input type="text" name="search_text" id="search_text" placeholder="Search by song" class="form-control"/>
    </div>
   
   </div>
   <div id="result"></div>
     <div class="container">
 <div class="row">
 <div class="right">
      <p id="title">title.mp3</p>
      <p id="artist">Artist name</p>
      

        <div class="show_song_no">
          <p id="present">1</p>
          <p>/</p>
          <p id="total">5</p>
        </div>
</div>
</div>
   </div>
      <!--- middle part --->
      <div class="container">
 <div class="row">
        <div class=" middle">
        <div class="right">
           <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>
</div>
</div>
   
       <!--- song duration part --->
       <div class="container">
 <div class="row">
 <div class="right">
        <div class="duration">
        
         <td class="length"><h5>0:00</h5></td>
           <input type="range" min="0" max="100" value="0" id="duration_slider" onchange="change_duration()">
              <td class="length"><h5>3:12</h5></td>
              </div>
              </div>
    </div>
</div>
  </div>
        <div class="container">
 <div class="row">
 <div class="right1">
        
           <button id="auto" onclick="autoplay_switch()">Replay  <i class="fa fa-circle-o-notch" aria-hidden="true"></i></button>
          
    
  </div>
  </div>
   </div>
  <script>
$(document).ready(function(){
$("#search_text").keyup(function(){
    var search = $("#search_text").val();
load_data(search);
});
 function load_data(query)
 {
  $.ajax({
   url:"new.php",
   method:"POST",
   data:{query:query},
   success:function(data)
   {
    $('#result').html(data);
   }
  });
 }
 
 $('#search_text').keyup(function(){
  var search = $(this).val();
  if(search != '')
  {
   load_data(search);
  }
  else
  {
   load_data();
  }
  function next_song()
 {
  $.ajax({
   url:"new.php",
   success:function(data)
   {
    $('#next').html(data);
   }
  });
 }
 });
});

</script>
 </body>
  


       <!--- song title & artist name --->
     
<script type="text/javascript">
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;

//create a audio Element
let track = document.createElement('audio');


//All songs list
let All_song = [
    <?php

 $connect = mysqli_connect("localhost", "root", "", "music");
 $query = "
  SELECT * FROM bd 
  ";
    $result = mysqli_query($connect, $query);
foreach($result as $key=>$row){
 ?>
   {
      
     name: "<?php echo $row['audio']; ?>",
     path: "upload/<?php echo $row['audio']; ?>",
     img: "img/<?php echo $row['img']; ?>",
    
     singer: "<?php echo $row['singer']; ?>"
     
       
   },
  
   <?php } ?>
];


// All functions


// function load the track
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);


//mute sound function
function mute_sound(){
    track.volume = 0;
    volume.value = 0;
    volume_show.innerHTML = 0;
}


// checking.. the song is playing or not
 function justplay(){
    if(Playing_song==false){
        playsong();

    }else{
        pausesong();
    }
 }


// reset song slider
 function reset_slider(){
    slider.value = 0;
 }

// play song
function playsong(){
  track.play();
  Playing_song = true;
  play.innerHTML = '<i class="fa fa-pause" aria-hidden="true"></i>';
}

//pause song
function pausesong(){
    track.pause();
    Playing_song = false;
    play.innerHTML = '<i class="fa fa-play" aria-hidden="true"></i>';
}


// next song
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();

    }
}


// previous song
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();
    }
}


// change volume
function volume_change(){
    volume_show.innerHTML = recent_volume.value;
    track.volume = recent_volume.value / 100;
}

// change slider position 
function change_duration(){
    slider_position = track.duration * (slider.value / 100);
    track.currentTime = slider_position;
}

// autoplay function
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;
        
        // update slider position
        if(!isNaN(track.duration)){
           position = track.currentTime * (100 / track.duration);
           slider.value =  position;
          }

       
       // function will run when the song is over
       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();
           }
        }
     }
</script>
</body>
</html>

Source: Ask Javascript Questions

LEAVE A COMMENT