Only part of the audio player works

Question

I have a HTML code:

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

and the script:

<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')
    }
}

It plays and pauses the song but it doesn't change classes, neither it returns to playing at point it was stopped (it plays from the beginning). What's wrong with this code?

Answer 1

us this code

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')
}}

the "removeClass" and "addClass" is a jquery syntax