JSFiddle - React, Tailwind, and code Playground

by tunechest000

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>
    </title>

    <!-- linking the stylesheet(CSS) -->
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/audio.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

  <body>
    <script>
      function formatTime( time ) {
        let minutes = Math.floor( time / 60 )
        let timeForSeconds = time - ( minutes * 60 ) // seconds without counted minutes 
        let seconds = Math.floor( timeForSeconds )
        let secondsReadable = seconds > 9 ? seconds : `0${seconds}` // To change 2:2 into 2:02
        return `${minutes}:${secondsReadable}`
      }
    </script>
    <!--HTML5 audio-->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript"></script>
<audio id="audioPlayer"></audio>

<div id="player">
    <a href="javascript:void(0)">
        <i class="far fa-play-circle fa-3x"></i>
    </a>
    <div id="progress-bar">
        <span id="progress"></span>
    </div>
    <div id="timer">
        
    </div>
</div>

 
    <!-- input tag -->
    <input id="searchbar" onkeyup="search_animal()" type="text" name="search" placeholder="Search song or artist">

    <!-- ordered list -->
    <ul id='playlist'>
      <li class="current-song"><a href="http://www.sousound.com/music/healing/healing_01.mp3">
          <div class="background"><img src="https://images.unsplash.com/photo-1577044685231-70e99274404c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1567&q=80Cat" class="image" />
            <h4 id="song">Dream Big</h4>
            <h5 class="artist">William Banotvan</h5>
          </div>
        </a></li>
      <li class="animals"><a...

CSS

/* Absolute Center */
#player {
    background-color: rgb(191, 167, 201);
    height: 60px;
    position: fixed;
    bottom: 0px;
    width: 100%;
    opacity: 80%;
}

#player  > a {
    width: 0px;
    color: black;
    margin-top: 6px;
    margin-left: 10px;
    float: left;
}

#progress-bar {
    width: 60%;
    background-color: #ffb3ff;
    height: 5px;
    cursor: pointer;
    margin-top: 28px;
    float: left;
    margin-left: 65px;
}

#timer {
    width: 10%;
    font: Arial;
    margin-top: 23px;
    margin-left: 10px;
    float: left;
}

#progress-bar > #progress {
    background-color: rgb(102, 149, 173);
    display: block;
    width: 0;
    height: 5px;
}
#searchbar {
  padding: 15px;
  border-radius: 10px;
  width: 80%
}

#playlist .current-song a {
  color: #7777FE;
  border-color: #008ae6;
}

#playlist {
  list-style: none;
}

#playlist li a {
  text-decoration: none;
  color: #ca0ce0;
}


#playlist {
  font-size: 14.5px;
  list-style: none;
  margin-left: 40px;
  color: blue;
}

.animals {
  display: list-item;
  margin-bottom: 5px;

}

.background {
  border: solid;
  width: 100%;
  height: 75px;
  margin-top: 5px;
}

#playlist.current-song {
  border-color: #008ae6;
}

.image {
  width: 100px;
  float: left
}

#song {
  margin-left: 13px;
  margin-top: 9px;
  float: left;
}

.artist {
  text-align: center;
  margin-right: 20px;
  font-size: 12px;
  margin-top: 14px;
}

.image3 {
  width: 100px;
  float: left;
  height: 75px;
}

JavaScript

$(function() {
    const audio = $('audio')[0];
    $('#playlist li a').click( () => {audio.play();} );
    $('#player a').click(function(e) {
        e.preventDefault();
        
        $(this).find('i').toggleClass('fa-play-circle fa-pause-circle');
        
        if (audio.paused) {
            audio.play();
        } else {
            audio.pause();
        }
    });
   
    audio.ontimeupdate = () => {
        $('#progress').css('width', audio.currentTime / audio.duration * 100 + '%');
        $('#timer').text(formatTime(audio.currentTime));
    };
    
    audio.onended = () => {
        
    };
    
    $('#progress-bar').click(function(e) {
        e.preventDefault();
        audio.currentTime = e.offsetX / $(this).width() * audio.duration;
    });
    
    function formatTime(seconds) {
        let minutes = Math.floor(seconds / 60);
        seconds = Math.floor(seconds % 60);
        seconds = (seconds >= 10) ? seconds : '0' + seconds;
        return minutes + ':' + seconds;
    }
});