How to custom Play/Pause image For HTML5 Audio Using JavaScript

Question

how could I make this happen? For example.....

Once I have clicked 'button play' the changes to 'button pause' and once I have clicked 'button pause' the changes to 'button play'.

I want to custom audio tags,but I don't know how to make it.

I don't know how to use Javascript to switch image.

I trying to find a way,but I don't understand it. TT

Below is what I using in html template:

    <button><img src="{% static "img/play.png" %}"></button>
    <button><img src="{% static "img/pause.png" %}"></button>
    <audio controls>
        <source src="{{ song.song_file.url }}" type="audio/mp3">
    </audio>

Thanks a lot

Answer 1

  var track = document.getElementById('track'); var controlBtn = document.getElementById('play-pause'); function playPause() { if (track.paused) { track.play(); //controlBtn.textContent = "Pause"; controlBtn.className = "pause"; } else { track.pause(); //controlBtn.textContent = "Play"; controlBtn.className = "play"; } } controlBtn.addEventListener("click", playPause); track.addEventListener("ended", function() { controlBtn.className = "play"; }); 

  #player-container #play-pause { cursor: pointer; text-indent: -999999px; height:40px; width: 40px; background: #eb01a5; background-image: url('http://basichow.com/asserts/images/play.png'); background-repeat:no-repeat; background-position:center; background-size:20px; } .play { background-image: url('http://basichow.com/asserts/images/play.png'); } .pause { background-image: url('http://basichow.com/asserts/images/pause.png')!important; } 

  <audio id="track"> <source src="http://basichow.com/asserts/interlude.mp3" type="audio/mpeg" /> </audio> <div id="player-container"> <div id="play-pause" class="play">Play</div> </div>