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" id="audio">Scratch</a>


-->
<input type="button" value="PlayThis" onclick="alert('gi')"/>

<a href="http://karlovich.com.ua/_audiotst/01-amelie-almost_one_minute_with_a_toypiano.mp3" class="audioPlayer">01 Amelie Almost One Minute With A Toypiano.mp3</a>

<a href="http://karlovich.com.ua/_audiotst/SC6403.WAV" class="audioPlayer">Scratch</a>

<!--
<div>
    <input id="play" type="button" value="Play" />
    <input id="pause" type="button" value="Pause" />
    <span id="duration"> </span>
</div>
<div>
    Volume:
    <input id="volume" type="range" min="0" max="10" value="5" />
</div>
-->

CSS

.aPlayer {background: lime; padding: 10px; margin: 10px;}

JavaScript

/* AUDIO 2*/

// Invoke new Audio object
//var audio = new Audio('http://karlovich.com.ua/_audiotst/SC6403.WAV');


/* var audioURL = jQuery('.audioPlayer').prop('href');
var audioTitle = jQuery('.audioPlayer').text(); */


var audioURLs = jQuery('.audioPlayer');
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() {
  alert('gi');
}