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="initProgressBar()">
        <source src="oh-my.mp3">      
    </audio>
    <div id="wrapper">
        <!--Audio Player Interface-->
        <div id="audioplayer">
            <button id="pButton" class="play"></button>
            <div id="timeline">
                <div class="progress" id="progress"></div>
                <div id="playhead"></div>
             

            </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="oh-my.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="sleepy.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">Tummy Why</h4><h5 class="artist">Revy Conover</h5></div></a></li>
        <li class="animals"><a href="sample.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: url('C:\Users\tunec\Desktop\Tune Chest\img\play.png');}
.pause{background: url('../img/pause.png') ;}

#timeline{
	width: 50%;
	height: 4px;
	background: rgba(0,0,0,.3);
	margin-top: 27px;
	float: left;
	left: 60px;
	border-radius: 15px;
	background-color:	 white;
	position: absolute;
}
/*Grabable Playhead*/
#playhead{
	cursor: pointer;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	margin-top: -7.5px;
	background: #4d4dff;
}

 .progress {
    
	height: 4px;
	background: rgba(0,0,0,.3);
	margin-top: 0px;
	float: left;
	left: 0px;
	border-radius: 15px;

	position: absolute;
    height: 5px;
    background: 	#4d4dff;
    transition: width .1s linear;
}
#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:...

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 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 clicks
function mouseUp(event) {
    if (onplayhead == true) {
        moveplayhead(event);
       ...