<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>
<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>
