Работает только часть аудиоплеера

Question

У меня есть HTML-код:

<audio src="whale-music.mp3" id="audio"></audio>
<button class="oi oi-media-play b-play" id="play" onclick="play()"></button>

и сценарий:

<script>
function play() {
    var audio = document.getElementById('audio');
    if (audio.paused) {
        audio.play();
        document.getElementById('play').removeClass('oi-media-play')
        document.getElementById('play').addClass('oi-media-pause')
    }else{
        audio.pause();
        audio.currentTime = 0
        document.getElementById('play').addClass('oi-media-play')
        document.getElementById('play').removeClass('oi-media-pause')
    }
}

Воспроизводит и приостанавливает песню, но не меняет классы, либо он не возвращается к воспроизведению в тот момент, когда он был остановлен (он воспроизводится с начала).Что не так с этим кодом?

Answer 1

используйте этот код

function play() {
var audio = document.getElementById('audio');
if (audio.paused) {
    audio.play();
    document.getElementById('play').classList.remove('oi-media-play')
    document.getElementById('play').classList.add('oi-media-pause')
}else{
    audio.pause();
    audio.currentTime = 0
    document.getElementById('play').classList.add('oi-media-play')
    document.getElementById('play').classList.remove('oi-media-pause')
}}

"removeClass" и "addClass" - это синтаксис jquery

Answer 2

, если вы используете собственный код:

 document.getElementById('play').classList.remove('oi-media-play');
 document.getElementById('play').classList.add('oi-media-pause');

или Jquery:

$('#play').removeClass('oi-media-play');