How To Change Play/button Images In Html5 Audio

I have the code of audio player. Please halp me to change the picture of play/pause button when press. Unfortunately i`m not strong in js (

Solution 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');

functiontoggleButton() {
    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 Actionreturnfalse;
};

#audioControlimg {
    width: 50px;
    height: 50px;
}

#pause {
    display: none;
}

<divclass="onlineradio"><imgsrc="images/Radio.jpg"alt="" /><p><audioid="yourAudio"><sourcesrc='http://178.219.160.126:8000/stream.mp3'type='audio/mpeg'preload="auto" /></audio><aid="audioControl"href="#"><imgsrc="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"/><imgsrc="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.

Solution 2:

The solution proposed by Karlen Kishmiryan will only work if there is one audio button per page.

Share