[FIX] Admin panel custom sounds, multiple sound playback fix and added single play/pause button

[ashwaniYDV]

Closes #16213 #16208

Before changes

(1) All sounds can be played simultaneously which overlaps with the other ones.
(2) There are seperate buttons for play and pause.

After changes:

(1) One sound can be played at a time.
(2) There is a single button for play and pause which looks consistent with most of the media players and is more handy for admins than having seperate buttons for play and pause.

[ashwaniYDV]

@sampaiodiego @tassoevan Would you please review :)

[gabriellsh]

Hey! Really cool what you did, works better in my opinion. Just make it so when the sound finishes playing it on its own resets to the play button.

[ashwaniYDV]

Hey! Really cool what you did, works better in my opinion. Just make it so when the sound finishes playing it on its own resets to the play button.

@gabriellsh I have done the requested changes. But doing so I encountered some more corner case issues. I have solved them too.
Please review.

[gabriellsh]

You could just add this block inside the play event.

document.getElementById(this._id).onended = function() { t.isPlayingId.set(''); this.onended = null; };

Then you don't have to work with settimeout and the process is straightforward.

Obs.: don't forget to remove the event once the audio is stopped.

[ashwaniYDV]

@gabriellsh Thank you very much. This reduced lots of code and also I don't have to worry about end cases which I faced using the settimeout. 👍
I have done the requested changes.

[gabriellsh]

Looks good to me!

[CLAassistant]

All committers have signed the CLA.