"Load audio example"
Bootstrap 4.1.1 Snippet by MichCode

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html><head></head><body> <div id="https://cdn.wikimg.net/en/splatoonwiki/images/1/1c/Amiibo_Tide_Goes_Out.ogg" class="load-music"> <span class='loader'>Error, javascript not loaded</span> </div> <script> var unloadedtext = "<span onclick=\"loadaudio(document.getElementById('"; var unloadedtext2 = "'))\">Load music</span>"; var els = document.getElementsByClassName("load-music"); [].forEach.call(els, function (el) {el.innerHTML=unloadedtext+el.id+unloadedtext2;}); function loadaudio(text){ console.log(text.innerHTML); console.log(unloadedtext+text.id+unloadedtext2); if(text.innerHTML == unloadedtext+text.id+unloadedtext2){ text.innerHTML = "<span onclick='loadaudio(document.getElementById(\""+text.id+"\"))'>Unload music</span>"+"<br/><audio src="+text.id+" autoplay controls>Audio</audio>"; } else{ text.innerHTML = unloadedtext+text.id+unloadedtext2; } } </script> </body></html>

Related: See More

Vue Paper Dashboard
Fancy subscribe modal (md, lg) with delay functionality on page load

Questions / Comments: