Question

Hola amigos, buenas, he buscado por todos lados una solución a mi inconveniente pero hasta ahora no logro conseguir. Estoy creando mi página de música (dj) y he insertado reproductor de un solo botón (solo play y pause). Al darle play la música suena y el botón se convierte en pause, y cuando le doy pause se convierte en play, todo bien hasta entonces, el detalle está en que cuando termina la música el botón no se convierte en play, es decir se queda en icono de pause.

<div id="music-demo-play">
    <div id="audio-demo-1">
    <iframe src="demo/audio1/audio1.html"></iframe>
        </div>
</div>

Se encuentra en iframe porque tengo varios audios y me funciona bien esto.

Este es el código del botón:

    <audio class="audio1" src="onelovedemo96.mp3" preload="auto">
        Tu navegador no soporta el elemento <code>audio</code>.
    </audio>
    <button id="boton1"><i class="fas fa-play"></i></button>
        <script type="text/javascript">
                    var v = document.getElementsByClassName("audio1") [0]; 
        var sound = false;

        var boton = document.getElementById("boton1");
        boton.addEventListener("click", function(){
            if (!sound) {
                v.play();
                this.innerHTML="<i class=\"fas fa-pause\">";
                sound = true;
            } else {
                v.pause();
                this.innerHTML="<i class=\"fas fa-play\">";
                sound = false;
            }
        });
    </script>

Gracias de antemano por sus ayuda.