HTMLの<audio>のplay()に関してDOMExceptionのエラー

Question

トラックが結構ある中で、セレクトボックスでトラックを選択、再生し、再生が終了したら次のトラックへaudioタグを変更して再生、また終了したら…といったことを実装しようとして、以下のコードを書きましたが、ローカルで動かすと問題なく動いた(ように見えた)のですが、サーバーに上げてから実行するとトラックが飛ばされるため、コンソールを見たところエラーが吐かれていました。

変数formにはセレクトボックスが入っています
変数aには<audio>タグが入っています
変数numには現在のトラックナンバー(セレクトボックスから取得)が数値で入っています
変数tracksにはトラックリストが配列形式で入っています

コード
~
a.addEventListener("ended", function () {
  num = num + 1;
  form.selectedIndex = num;
  a.currentTime = 0;
  a.src = tracks[num];
  a.play();
}, false);
~

エラー
VM5 script.js:17 Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.

google developersへの参照がついていたので読んで色々と試してみましたがうまく行きませんでした…

どのようにすると解決できますか？

Answer 1

src属性値を変更したあと、loadeddataイベントが来るのを待ってからplay()するべきかもしれませんね。

https://developer.mozilla.org/ja/docs/Web/API/HTMLMediaElement/loadeddata_event

Answer 2

ローカルで動かすと問題なく動いた(ように見えた)のですが、サーバーに上げてから実行するとトラックが飛ばされる

a.src を変更すると、サーバー（ブラウザキャッシュ）から読み込みますが、この時の遅延を考慮します
（読み込みが完了していない状態で play() を実行するとエラーになる）。

どのようにすると解決できますか？

<audio>要素のイベント を駆使して、「音源の交換時（最中）にプレイヤーは音を出せない」という特徴に着目します。

---

現在はファイル化された圧縮音源が一般的ですが、古いオーディオ機器についても調べてみるとヒントになります。
ソース（音源）の入れ替えは（テープ媒体/光ディクス媒体）物理的媒体の交換作業が付きまといます。

圧縮音源の現在も、音源媒体（ファイル）の交換は、ローカルマシンのディスクから高速に行われるのか、ネットワークを経由して（サーバー/ネットワークの状態で）必ず遅延が伴なうのか、微妙な違いを考える必要があります。

• ソース管理機能（「ジュークボックス」や「CDチェンジャー」のような、音源媒体の管理・交換機能をプログラムで実現）
• プレイヤー機能（セットされた１つの媒体について、再生/停止/早送り/巻き戻しなどをプログラムで実現）

Comments

[Shoto9023]

つまり、ロードが終わるイベントをリッスンしてplay()するか、load()を実行してからplay()するかすれば実行できるということでしょうか？
これらの方法に問題があるかもしれないと不安になってしまったので聞かせていただきました。
原因などについては非常にわかりやすい回答をありがとうございます。

[AkitoshiManabe]

gpsoft さんの回答が、ソースの読み込みイベントを待つ。という内容になっており、高評価させていただいております（コード上は端的な回答に感じました）。
ご質問の全体像からは「ソースを切り替える毎にイベントを待つ必要がある」と感じました。
私なら <audio> （HTMLAudioElement）をラップするなどして、抽象化を考えます（既存のプレイヤー系ライブラリを探して参考にする）。