CODEWITHSUNDEEP
javascriptcssaudioaudio-player
Michael D
Michael D

Reputation: 83

Only part of the audio player works

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?

Upvotes: 0

Views: 42

Answers (2)

Fahim Khan
Fahim Khan

Reputation: 405

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

Upvotes: 1

Nam Tang
Nam Tang

Reputation: 100

if you use native code:

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

or Jquery:

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

Upvotes: 0

Related Questions