JSFiddle - React, Tailwind, and code Playground

by paka

HTML

<!--

http://karlovich.com.ua/_audiotst/01-amelie-almost_one_minute_with_a_toypiano.mp3
http://karlovich.com.ua/_audiotst/SC6401.WAV
http://karlovich.com.ua/_audiotst/SC6402.WAV
http://karlovich.com.ua/_audiotst/SC6403.WAV
-->



<a href="http://karlovich.com.ua/_audiotst/SC6403.WAV" class="audio" onmouseover="playThis(this.getAttribute('href'))">File —→ SC6403.WAV</a>

<br/><br/>

<a href="http://karlovich.com.ua/_audiotst/SC6401.WAV" class="audio" onmouseover="playThis(this.getAttribute('href'))">File —→ SC6401.WAV</a>


<br/><br/>

<a href="http://karlovich.com.ua/_audiotst/SC6402.WAV" class="audio" onmouseover="playThis(this.getAttribute('href'))">File —→ SC6402.WAV</a>

CSS

.aPlayer {background: lime; padding: 10px; margin: 10px;}
#wrap {margin: 30px; display: block; background: #eee; height: 400px;}

.playerDiv {width: 350px;}

.playBtn {background:#020263; width:30px;height:30px; float: left; margin: 10px; color:white;text-align:center; }

.audio {position: relative; z-index:9;}
a.audio {position: relative; top:16px; z-index:10; color: black}

.aTitle {position:relative; z-idex: 11; float:left;}

.progressBar {position:relative;   height: 30px; background: blue; opacity:0.2; float: left; top:10px; margin-left:-135px; z-index:20; width: 0px;}

.progressBarOn {position:relative;  height: 30px; background: blue; opacity:0.5; float: left; top:10px; margin-left:-300px; z-index:30; width: 0px; display:block;}

.duration {position:relative; z-index:33; top:15px; float:right;}

JavaScript

/* AUDIO 2-fork */

var audioURL;
/* var buttons = '<input type="button" value="Play" onclick="playThis()">';
 
 $('.audioPlayer').wrap('<div class="aPlayer"></p>');
 $('.audioPlayer').before(buttons);
 $('.audioPlayer').after('<br/>');


//for (var i = 0; i < audioURLs.length; i++) {
  //  document.write(audioURLs[i] + " => " + audioURLs[i].innerHTML + '<br/><br/>');
//}

*/ 


function playThis(audioURL) {
  
    var audio = new Audio(audioURL);
    
    audio.play();
}