I want to do Play/Pause with images as if it were with Hover

Question

I want to do Play/Pause with images as if it were with Hover

Asked 3 years, 4 months ago

Viewed 43 times

1

I have the code with the buttons/ functional image one on top of the other, but I want that when click on the play the image "play" disappear and appear the "pause" and vice versa.

<div class="container">   
            <div class="radio">
                    <audio id="stream" >
                            <source src="songs/y2mate.com - EPIC DUBSTEP DROP FOR REAL MEN.mp3" type="audio/mpeg">
                    </audio>
                    <img id="play" src="img/play.png" width="80px" onclick="playStream()">
                    <img id="pause" src="img/pause.png" width="80px" onclick="pauseStream()">
           </div>
    </div>
    <script src="script/script.js"></script>"
    
    var stream = document.getElementById('stream');
    var play = document.getElementById('play');
    var pause = document.getElementById('pause');
    
    function playStream(){
            stream.play();
    }
    
    function pauseStream(){
        stream.pause();
    }

ola Bedatty in Edit or click here and add that code to the question, don’t use the comments for that

– Ricardo Pontual

2021/02/15 at 09:22
Sorry, I’m new to the forum and I wasn’t able to put the <html> code together with the JS code, it only appeared the javascript, so I had to opt for the kkkkk gambiarra, I won’t do it again!

– BedattyZ

2021/02/15 at 15:51
ah quiet, when you need to do this, has a button with code tag like this <>, clicking there gets by code that works, as in my answer

– Ricardo Pontual

2021/02/15 at 15:56
Right! Thanks for the tips and the excellent reception!!

– BedattyZ

2021/02/15 at 15:57

1 answer

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.

by Ricardo Pontual • **21,129** points · Answer 1 · 2021-02-15T10:06:08+00:00

In a very simple way you can do so by hiding/displaying by clicking:

function playStream(){
    stream.play();
    document.getElementById('play').style.display == "none";
    document.getElementById('pause').style.display == "block";
}

function pauseStream(){
    stream.pause();
    document.getElementById('play').style.display == "block";
    document.getElementById('pause').style.display == "none";
}

Another way is to work with classes, which gets better and can also start with hidden pause:

function playStream(){
    stream.play();
    document.getElementById('play').classList.add('hidden');
    document.getElementById('pause').classList.remove('hidden');
}

function pauseStream(){
    stream.pause();
    document.getElementById('play').classList.remove('hidden');
    document.getElementById('pause').classList.add('hidden');
}

img {
   width: 80px
}

.hidden {
    display: none;
}

<div class="container">   
  <div class="radio">
    <audio id="stream" >
          <source src="songs/y2mate.com - EPIC DUBSTEP DROP FOR REAL MEN.mp3" type="audio/mpeg">
        </audio>
        <img id="play" src="https://i.stack.imgur.com/SQvZz.png" onclick="playStream()">
        <img id="pause" src="https://i.stack.imgur.com/KgVXL.png" class="hidden" onclick="pauseStream()">
   </div>
</div>