I am making a site with html and JavaScript.
I want the music to change when I click the button.

Specifically, I want to change "memories.mp3" to "pulse.mp3",
I used javaScript attr,
The file does not change.

What's wrong?
Nice to meet you.

In addition, as a measure that autoplay does not work in Chrome,
The silence file is read first.

No error message, but no music files changed
Looking at the page source, it hasn't changed.
Corresponding source code

                      <source src = "audio/memories.mp3" type = "audio/mp3">
$('#botton_hoge'). on ('click', () =>{
            console.log ("botton_hoge click");
            $('#hoge source'). Attr ('src','audio/pulse.mp3');
What I tried

1. 1. The target of attr,

$('#hoge player source')
$('#player source')

But it didn't change.

2. 2. Enclose the source file part in a div and


$('#foo source'). Attr ('src','audio/pulse.mp3');

I tried, but it didn't work.

Supplementary information (FW/tool version, etc.)

Please provide more detailed information here.

  • Answer # 1

    $('#player'). Attr ('src','audio/pulse.mp3');

    Then, I was able to replace the songs in my environment (Google Chrome 87.0.4280.66).

    The song title is specified in the source element, but since the source element is an alternative notation that specifies the src attribute of the audio element for presenting multiple candidates to the browser, it is actually correct to rewrite the src attribute of the audio element. It seems that. If you don't suggest multiple candidates, you can specify the first song directly in the src attribute of the audio element.

    So what if you want to present multiple candidates and replace the songs? I doubt that, but maybe it will dynamically generate and replace the entire audio element (unverified).

    Below, for reference

    : Embedded audio element

    ★ Operate video element and audio element from JavaScript