javascriptでディレクトリ指定でのmp3再生

Question

前提・実現したいこと

ページにアクセスすると指定したフォルダ内のオーディオファイル(mp3形式)をランダムに再生したいです。
特にボタンなどは必要としません。アクセスすると自動で再生するものが作りたいです。

自分なりに調べてみて以下のようなコードを見つけたのですが、これだと曲を追加した際にコードも編集する必要があります。
ディレクトリ指定してその中のファイルを自動再生することができればそれも解決するかと思うのですが、方法は無いのでしょうか

https://teratail.com/questions/98734

該当のソースコード

<script>
var a = new Audio("fileA.mp3");
a.addEventListener("ended", function(b) {
(new Audio("fileB.mp3")).play();
});
a.addEventListener("ended", function(c) {
(new Audio("fileC.mp3")).play();
});

a.play();
</script>

Answer 1

AjaxでPHPなどサーバーサイドのプログラムにアクセスし、
そのプログラムからファイル一覧を取得して返せば可能かと思います。
※サーバー内でブラウザからアクセスできる場所にファイルが置いてある前提

「ページにアクセスする際に1曲だけ選ぶ」のであれば「ランダムに」の部分もサーバーサイドで選んだ1曲のファイル名だけを返せばJavaScriptは受け取ったファイルを再生する記述をするだけで済みます。

Answer 2

指定したフォルダ内のオーディオファイル

まず「指定したフォルダ」とはWebサイトを訪れた訪問者のPC内に入っているオーディオファイルですか？
それとも、Webサーバマシン内に入っているオーディオファイルですか？

---

まず前者(訪問者のPC内)からいきます。

機能の全てを実現することは不可能で、
特に「アクセスすると自動で再生するものが作りたいです。」の部分がブラウザのセキュリティに引っかかるのでどうあがいても無理です。

もしこれが出来てしまうのなら、悪意の第三者がWebサイトを開いたらデスクトップの中にあるWordやExcelファイルをこっそり読み込んでAjaxでどこかに勝手に送信といったプログラムも作れますからね。
（昔Winnyというファイル共有ソフトで大流行したウィルスがあり、自衛隊や消防のデータが流出するという大騒ぎがありましたが、あれと同じ事が誰でも出来るようになる）

ユーザがファイルやディレクトリを明示的に指定するという前提であれば
FileAPIを使う事でそれなりのものが作れるかもしれませんね。
HTML5のFileAPIで調査しなおしてみてください。

---

後者ならWebサーバで動いているPHPにはサーバーマシンの特定ディレクトリ内のファイルやディレクトリを読み書きする機能があります。
参考サイト: scandir - PHPマニュアル

後はHTML内に直接書き出したり、もしくはAjaxで後付でファイル一覧をダウンロードし、
audioタグのsrc属性をJavaScriptで書き換えてやれば完了です。
参考サイト: audio - HTML5タグリファレンス

Answer 3

javascriptでフォルダ内のファイル一覧を得る方法は無いです。
htmlファイルがサーバに置かれているかローカルに置かれているかによらず、ファイル一覧を返す機能を別に提供してあげる必要があります。