JSFiddle - React, Tailwind, and code Playground
HTML
<button id="playSound" type="button">Play</button>
JavaScript
var Player = $(function () {
var soundBuffer, context;
try {
context = new webkitAudioContext();
}
catch (e) {
console.log("Error setting up webaudiocontext: " + e);
}
var registerPlayButton = function(buffer){
$("#playSound").click(function () {
playSound(buffer);
});
}
loadSound("https://dl.dropboxusercontent.com/u/9780255/counting-coins-3.mp3",soundBuffer, registerPlayButton);
function loadSound(url, buffer, callbackFn) {
var rq = new XMLHttpRequest();
rq.open("GET", url, true);
rq.responseType = "arraybuffer";
rq.onload = function () {
context.decodeAudioData(rq.response,
function (b) {
buffer = b;
console.log("buffer loaded...");
playSound(buffer);
callbackFn(buffer);
});
};
rq.onerror = function (e) {
console.log("error loading audio:"+e);
};
rq.send();
}
function playSound(soundBuffer) {
var sn= context.createBufferSource();
sn.buffer = soundBuffer;
sn.connect(context.destination);
sn.start(0);
}
});