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>
    <!--HTML5 audio-->
     <audio id="audioPlayer" preload="true"  ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime) + ' / ' + Math.floor(this.duration);">
        <source src="oh-my.mp3">      
    </audio>
    <div id="wrapper">
        <!--Audio Player Interface-->
        <div id="audioplayer">
            <button id="pButton" class="play" onclick="document.getElementById('audioplayer').play();"></button>
            <div id="timeline">
                <div class="progress" id="progress"></div>
                <div id="playhead"></div>
            <span id="tracktime">0 / 0</span>

            </div>
        </div>
    </div>

    <script src="js/html5audio.js" type="text/javascript"></script>
    <!-- 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 href="http://www.sousound.com/music/healing/healing_01.mp3">
          <div class="background"><img...

CSS

/* Absolute Center */
.abs-center {
  margin: auto;
  position: fixed;
  bottom: 0;
}

/*Container for audio player*/
#audioplayer {
  width: 99%;
  height: 60px;
  position: fixed;
  bottom: 0;
  background-color: #cccccc;
}

/* Play/Pause Button */
#pButton {
  height: 40px;
  width: 40px;
  border: solid;
  border-radius: 100px;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  background-position: center;
  float: left;
  margin-left: 10px;
  margin-top: 10px;
  outline: none;

}

#pButton:active {
  height: 44px;
  width: 44px;
  border: solid;
  border-color: black;
  border-radius: 100px;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  background-position: center;
  float: left;
  margin-left: 10px;
  margin-top: 9px;
  outline: none;
}

/*Classes for play/pause button background*/
.play {
  background:...

JavaScript

document.addEventListener("DOMContentLoaded", function(event) {

  var music = document.getElementById('audioPlayer'); // id for audio element
  var duration; // Duration of audio clip
  var pButton = document.getElementById('pButton'); // play button
  var playhead = document.getElementById('playhead'); // playhead
  var timeline = document.getElementById('timeline'); // timeline

  // timeline width adjusted for playhead
  var timelineWidth = timeline.offsetWidth - playhead.offsetWidth;
function updateTracktime(){
  let audioPlayer = document.getElementById("audioPlayer");
  function duration() {
    var audiopp = document.getElementById("audioPlayer");
    if (audiopp.readyState > 0) {
      var minutes = parseInt(audiopp.duration / 60, 10);
      var seconds = parseInt(audiopp.duration % 60);

      alert(minutes + ":" + seconds);
    }
  }

  // other code such as updating the player

  // other code such as updating the player

  // play button event listenter
  pButton.addEventListener("click", play);

  // timeupdate event listener
  music.addEventListener("timeupdate", timeUpdate, false);

  // makes timeline clickable
  timeline.addEventListener("click", function(event) {
    moveplayhead(event);
    music.currentTime = duration * clickPercent(event);
  }, false);

  // returns click as decimal (.77) of the total timelineWidth
  function clickPercent(event) {
    return (event.clientX - getPosition(timeline)) / timelineWidth;

  }


  // makes playhead draggable
  playhead.addEventListener('mousedown', mouseDown, false);
  window.addEventListener('mouseup', mouseUp, false);

  // Boolean value so that audio position is updated only when the playhead is released
  var onplayhead = false;

  // mouseDown EventListener
  function mouseDown() {
    onplayhead = true;
    window.addEventListener('mousemove', moveplayhead, true);
    music.removeEventListener('timeupdate', timeUpdate, false);
  }

  // mouseUp EventListener
  // getting input from all mouse...