How can I change play/button images in HTML5 audio?

Question

I have the code of audio player. How can I change the picture of play/pause button when press?

<div class="onlineradio"><img src="images/Radio.jpg" alt="" />
<p><video id="yourAudio" width="0" height="0">
    <source src='http://178.219.160.126:8000/stream.mp3' type='audio/mpeg' preload="auto" />
</video> <a id="audioControl" href="#"><img src="images/radioscalebutton.png" alt="" /></a></p>
</div>
<script>// <![CDATA[
var yourAudio = document.getElementById('yourAudio'),
    ctrl = document.getElementById('audioControl');

ctrl.onclick = function () {

    // Update the Button
    var pause = ctrl.innerHTML === 'pause!';
    ctrl.innerHTML = pause ? 'pause' : 'play';

    // Update the Audio
    var method = pause ? 'pause' : 'play';
    yourAudio[method]();

    // Prevent Default Action
    return false;
};
// ]]></script>

Answer 1

I have implemented a final working solution with custom audio controls (play and pause) with toggling state button. If something is not clear for you, please ask.

Here is the working solution and the JSFiddle :

 var yourAudio = document.getElementById('yourAudio'), ctrl = document.getElementById('audioControl'), playButton = document.getElementById('play'), pauseButton = document.getElementById('pause'); function toggleButton() { if (playButton.style.display === 'none') { playButton.style.display = 'block'; pauseButton.style.display = 'none'; } else { playButton.style.display = 'none'; pauseButton.style.display = 'block'; } } ctrl.onclick = function () { if (yourAudio.paused) { yourAudio.play(); } else { yourAudio.pause(); } toggleButton(); // Prevent Default Action return false; };

 #audioControl img { width: 50px; height: 50px; } #pause { display: none; }

 <div class="onlineradio"> <img src="images/Radio.jpg" alt="" /> <p> <audio id="yourAudio"> <source src='http://178.219.160.126:8000/stream.mp3' type='audio/mpeg' preload="auto" /> </audio> <a id="audioControl" href="#"> <img src="http://etc-mysitemyway.s3.amazonaws.com/icons/legacy-previews/icons/glossy-black-3d-buttons-icons-media/002110-glossy-black-3d-button-icon-media-a-media22-arrow-forward1.png" id="play"/> <img src="https://www.wisc-online.com/asset-repository/getfile?id=415&getType=view" id="pause"/> </a> </p> </div>

You can download the images of controls and use refer to them locally.

Answer 2

Karlen Kishmiryan提出的解决方案仅在每页只有一个音频按钮时才有效。