JSFiddle - React, Tailwind, and code Playground
HTML
<!--<div class="play">Play</div>
<div class="pause">Stop</div> -->
JavaScript
$(document).ready(function () {
var Audio_types = {
"mp3": "audio/mpeg",
"mp4": "audio/mp4",
"ogg": "audio/ogg",
"wav": "audio/wav",
soundbits: function (sound) {
var audio_element = document.createElement('audio');
if (audio_element.canPlayType) {
for (var i = 0; i < arguments.length; i++) {
var source_element = document.createElement('source');
source_element.setAttribute('src', arguments[i]);
}
}
if (arguments[i].match(/\.(\w+)$/i)) {
source_element.setAttribute('type', Audio_types[RegExp.$1]);
audio_element.appendChild(source_element);
}
audio_element.load();
audio_element.playclip = function () {
audio_element.currentTime = 0;
audio_element.play();
}
return audio_element;
}
}
var buzz = Audio_types.soundbits( 'http://www.uscis.gov/files/nativedocuments/Track%2093.mp3');
buzz.playclip();
});
/*var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'http://www.uscis.gov/files/nativedocuments/Track%2093.mp3');
audioElement.setAttribute('autoplay', 'autoplay');
//audioElement.load()
$.get();
audioElement.addEventListener("load", function() {
audioElement.play();
}, true);
$('.play').click(function() {
audioElement.play();
});
$('.pause').click(function() {
audioElement.pause();
});*/