JSFiddle - React, Tailwind, and code Playground
HTML
<button id="playSound" type="button">Play</button>
JavaScript
$(function () {
var soundBuffer = {}, context;
try {
context = new webkitAudioContext();
}
catch (e) {
console.log("Error setting up webaudiocontext: " + e);
}
loadSound("https://dl.dropboxusercontent.com/u/9780255/counting-coins-3.mp3", soundBuffer);
$("#playSound").click(function () {
playSound(soundBuffer{b);
});
function loadSound(url, buffer) {
var rq = new XMLHttpRequest();
rq.open("GET", url, true);
rq.responseType = "arraybuffer";
rq.onload = function () {
context.decodeAudioData(rq.response,
function (b) {
console.log("buffer loaded...");
buffer{b} = b;
});
};
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);
}
});