короче все просто, интереса ради слепил пример так как раньше не пробывал этот тэг)
<!DOCTYPE HTML>
<html>
<head> <style>
</style></head>
<body>
<audio id="demo" src="http://cyberua.16mb.com/files/ACDC.mp3" type="audio/mp3" preload="auto">
</audio>
<audio src="http://cyberua.16mb.com/files/ACDC.mp3"></audio>
<div id="control-buttons">
<div class="start">start</div><br>
<div class="stop">stop</div>
</div>
<script>
!function () {
function $(selector){
return document.querySelector(selector);
}
var _audio = $("#demo");
// console.log( new Audio().start());
var control = $("#control-buttons");
control.onclick = function (e){
var cls = e.target.className;
if(cls == "stop") {
*!*
_audio.pause();// останавливаем
_audio.currentTime = 0;// возвращаем в начало
*/!*
return;
};
if(cls == "start" || cls == "pause") {
if(_audio.paused) {
_audio.play();
e.target.innerText = e.target.className = "pause";
}
else {
_audio.pause();
e.targe.innerText = e.target.className = "play";
}
}
};
}();
</script>
</body>
</html>