JSFiddle - React, Tailwind, and code Playground

by ibroom

HTML

audioPlayer("http://fliplet.com","The name of the song");

JavaScript

function audioPlayer(path, title) {

	var audioObject,
	  $audioElement = $('.green-audio-player'),
	  mediaTimer;
	  
	var styles = ".audio.green-audio-player {  width: 100%;  height: 56px;  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.07);  padding-left: 24px;  padding-right: 24px;  border-radius: 4px;  user-select: none;  -webkit-user-select: none;  border: 1px solid #dedede;  background-color: #efefef;  overflow: hidden;}.audio.green-audio-player .controls {  width: 100%;  display: flex;  justify-content: space-between;  align-items: center;}.audio.green-audio-player .playing-title {  margin: 0 -24px;  padding: 0 24px;  background-color: #e6e6e6;  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;  font-size: 12px;  line-height: 19px;}.audio.green-audio-player .play-pause-btn {  cursor: pointer;  width: 28px;  height: 28px;  font-size: 18px;  display: flex;  justify-content: center;  align-items: center;  border-radius: 4px;}.audio.green-audio-player .play-pause-btn:active {  background-color: #dedede;}.audio.green-audio-player .loading,.audio.green-audio-player.loading .play-pause-btn {  display: none;}.audio.green-audio-player.loading .loading,.audio.green-audio-player .play-pause-btn .fa-play,.audio.green-audio-player.playing .play-pause-btn .fa-stop {  display: block;}.audio.green-audio-player.playing .play-pause-btn .fa-play,.audio.green-audio-player .play-pause-btn .fa-stop {  display: none;}.audio.green-audio-player .spinner {  width: 28px;  height: 28px;  font-size: 18px;  display: flex;  justify-content: center;  align-items: center;}.audio.green-audio-player .wave {  display: flex;  font-size: 16px;  line-height: 18px;  color: #55606E;  flex-grow: 1;  justify-content: space-between;  align-items: center;  margin-left: 24px;}.sound-icon {  width: 100%;  display: flex;  flex-direction: column;  align-items: center;}.sound-wave {  width: 100%;  height: 36px;  display: none;  justify-content: space-around;  align-items: center;}.sound-wave...