クリックしたら音楽が変わるようにしたい

前提・実現したいこと

html,JavaScriptでサイトを作っています。
ボタンをクリックしたら音楽が変わるようにしたいです。

具体的には「memories.mp3」を「pulse.mp3」に変更したく、
javaScriptのattrを使ったのですが、
ファイルが変わりません。

どこがまずいのでしょうか？
どうぞよろしくお願いします。

なお、Chromeでautoplayが動作しない対策で、
無音ファイルを先に読み込むようにしてあります。

発生している問題・エラーメッセージ

エラーメッセージは出ないが、音楽ファイルが変更されず
ページのソースを見ても変更されてない。

該当のソースコード

html
1<div id="hoge">
2				<iframe src="audio/silence.mp3" allow="autoplay" id="audio" style="display:none"></iframe>
3				<audio id="player" controlslist="nodownload" controls <?php if($user_vol==2){ echo("autoplay"); } ?>
4				 loop>
5						<source src="audio/memories.mp3" type="audio/mp3">
6				</audio>
7</div>

JavaScript
1$('#botton_hoge').on('click', () => {
2			console.log("botton_hoge click");
3			$('#hoge source').attr('src', 'audio/pulse.mp3');
4});

試したこと

１．attrの対象を、

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

などにしましたが、変更されませんでした。

２．ソースファイル部分をdivで囲み、

として、

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

としましたがだめでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

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

とすると手元の環境(Google Chrome 87.0.4280.66)では曲を入れ替えることができました。

曲名を source 要素で指定していますが、source 要素は複数の候補をブラウザに提示するための audio 要素の src 属性を指定する代替記法のため、実態としては audio 要素の src 属性を書き換えるのが正しいようです。複数の候補を提示しないなら、最初の曲も audio 要素の src 属性で直接指定してしまって良いと思います。

では複数の候補を提示して曲を差し替えたいときはどうするのか？というのは疑問ですが、多分 audio 要素全体を動的に生成して置き換えるのではないかと（未検証）

以下、参考まで

投稿2020/11/19 22:01