Using Javascript to Change HTML sound

Question

I would like to change the audio element I inserted with another audio element.

I checked the solution at: Create Audio element dynamically in Javascript, and I don't understand why my code isn't working.

In HTML I have:

<audio id="sound" src="shush1.mp3" controls>
    Your Browser Does Not Support the Audio Feature
</audio>

and in babySounds.js I have:

var sound = document.createElement('audio');
sound.src = "Shush2.mp3";
sound.controls = "controls";
document.getElementById("sound").appendChild(sound);

I'm not familiar with <audio>, but I would assume it's not working because you are nesting the tags with your appendChild(), such that you have <audio id="sound" src="shush1.mp3" controls\> Your Browser Does Not Support the Audio Feature <audio src="Shush2.mp3" controls="controls"></audio></audio\>. You probably want to replace the original instead. — mykaf
– mykaf, Commented Feb 6, 2023 at 14:30
You're appending a new audio element to the existing one. Did you mean to replace the existing one with the new one instead? — Andy
– Andy, Commented Feb 6, 2023 at 14:31
Try using replaceWith like this document.getElementById("sound").replaceWith(sound)? — evolutionxbox
– evolutionxbox, Commented Feb 6, 2023 at 14:32

T.J. Crowder · Accepted Answer · 2023-02-06 14:43:33Z

2

Your code attempts to append your new audio element as a child of the one that's already there (appendChild), rather than replacing it.

If you want to replace it, you can use the replaceWith method instead in all non-obsolete browsers:

const sound = /*...*/;
document.getElementById("sound").replaceWith(sound);`

But if you just want to change what the sound is, you can assign to the existing element's src property instead, there's no need to create a whole new element:

document.getElementById("sound").src = "Shush2.mp3";

From the spec:

If a src attribute of a media element is set or changed, the user agent must invoke the media element's media element load algorithm.

...

The src IDL attribute on media elements must reflect the content attribute of the same name.

edited Feb 6, 2023 at 14:43

answered Feb 6, 2023 at 14:36

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using Javascript to Change HTML sound

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related