I want to call a function when my playing sound is finished in HTML and JAVASCRIPT

Question

I want to play a sound by click the play button - it changed to a pause button and when I click the pause button it paused the sound and changed to play button, button when the sound finishes, I want to change it from the Pause button to the Play Button to play Again. Here is the Code: CSS:

.play-button {
    display: none
}

.play-button.show {
    display: block;
}
.pause-button {
    display: none;
}

.pause-button.show {
    display: block
}

for HTML:

<audio id="audio" src="name.mp3">
    Your browser does not support the audio element.
</audio>
<button class="play-button show" id="play-button" onclick="PlayButtonHide()">Play</button>
<button class="pause-button" id="pause-button" onclick="PauseButtonShow()">Pause</button>

for JavaScript:

var play-button = document.getElementById('play-button')
var pause-button = document.getElementById('pause-button')
var audio = document.getElementById("audio");
var duration = document.getElementById("myAudio").duration;
function PlayButtonHide() {
    pause-button.classList.add('show')
    pause-button.setAttribute('onclick', 'PlayButtonShow()');
    play-button.classList.remove('show')
    audio.play()
}
function PlayButtonShow() {
    play.classList.add('show')
    pause.classList.remove('show')
    x.pause()
    play.setAttribute('onclick', 'PlayButtonHide()');
}
function PauseButtonShow() {
    pause-button.classList.add('show')
    pause-button.setAttribute('onclick', 'PauseButtonHide()');
    play-button.classList.remove('show')
}
function PauseButtonHide() {
    pause-button.classList.remove('show')
    pause-button.setAttribute('onclick', 'PauseButtonShow()');
    play-button.classList.add('show')
}

Use the `ended` event on the `audio` element: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended_event — Rory McCrossan, Sep 13 '21 at 08:01
`-` is not a valid character in variable names. You might wanna use an underscore (`_`), instead. — Cerbrus, Sep 13 '21 at 08:01

score 0 · Accepted Answer · answered Sep 13 '21 at 08:10

0

In the HTML Code audio Tag, Add this attribute with its value:

<audio id="audio" src="name.mp3" onended="PlayButtonShow()">
    Your browser does not support the audio element.
</audio>

answered Sep 13 '21 at 08:10

Siddharth Kumar

168
1
2
13

I want to call a function when my playing sound is finished in HTML and JAVASCRIPT

1 Answers1