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

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. T-T

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