Скрипт там правда привязан к другой кнопке, а надо привязать к имеющимся кнопкам. HTML такой :
<head>
<title></title>
<meta charset="UTF-8">
<style type="text/css">
.ok{
width: 60px;
height: 60px;
background-image: url(8.png);
background-repeat: no-repeat;
background-size: contain;
background-color: transparent;
padding-botton: 0;
border: 0 !important;
}
.ok:after{
color: #FFFFFF;
}
.ok.cat:after{
color: #000000;
}
.ok.cat{
background-image: url(5.png);
background-color: #FFFFFF;
background-color: transparent;
padding-botton: 0;
border: 0 !important;
}
</style>
<body>
<body style="visibility: hidden"
onload="setTimeout
('document.body.style.visibility = \'visible\'', 0)">
<button class="ok" onclick="this.classList.toggle('cat')"></button>
<input type="range" min="0" max="100" value="50" id="volume_range" oninput="document.getElementById('myaudio').volume = this.value/100" onchange="this.oninput()">
<audio id="myaudio" loop autoplay>
<source src="Шторм.ogg" type="audio/ogg; codecs=vorbis" />
<source src="Шторм.mp3" type="audio/mpeg">
</audio>
<script>
document.getElementById("mybtn").onclick = function()
{
var myaudio = document.getElementById("myaudio");
if(myaudio.paused == true)
{
document.getElementById("myaudio").play();
//this здесь является самой кнопкой, так как функция является дочерней кнопке
}
else if (myaudio.paused == false)
{
document.getElementById("myaudio").pause();
}
}
</script>
</body>
</html>
Не нашёл как тут фал вложить. Всем спасибо.