Как добавить функцию возврата иконки Play и остановки анимации, после завершения воспроизведения музыки в JS?

У меня такая проблема. При завершении воспроизведения композиции, не происходит возврат иконки Play. Продолжает стоять иконка Pause и соответственно небольшой блок анимации тоже не останавливается. Как это исправить? Кто знает? Подскажите пожалуйста! Буду очень благодарен! Нужно всего лишь дать команду на замену иконки Pause на Play и остановку анимации при завершении воспроизведения композиции.

window.onload=function(){ $('.play-song img').on('click',function(e){ var song = e.currentTarget.dataset.song;

var songtoplay = document.querySelector(`[data-audio="${song}"]`);

//if song is playing pause it if (songtoplay.duration > 0 && !songtoplay.paused) {

songtoplay.pause()

songtoplay.classList.remove('playing')

this.src="images/play.png";

var sondindicator = document.querySelectorAll('.music-indicator-span');

sondindicator.forEach(a=>a.classList.remove('animating'));


}

//if song is not playing play it and if another song is playing mute the other song

//also change the play button image to pause else {

if($('.playing') && $('.playing-symbol')){ var playing = document.querySelectorAll('.playing') playing.forEach(a=>a.pause()); playing.forEach(a=>a.classList.remove('playing'));


var playingsymbol = document.querySelectorAll('.playing-symbol') playingsymbol.forEach(a=>a.src="images/play.png"); playingsymbol.forEach(a=>a.classList.remove('playing-symbol')); }

songtoplay.play()

var sondindicator = document.querySelectorAll('.music-indicator-span');

sondindicator.forEach(a=>a.classList.add('animating'));


songtoplay.classList.add('playing') this.classList.add('playing-symbol')

this.src="images/pause.png"; } }) }