サイト上で音楽ファイルのランダム（シャッフル）再生

Question

実現したいこと

・数秒の短いmp3ファイルを順序関係なく（シャッフル）で、連続再生をしたい。

・再生中は該当のサムネイルを他のものより少し大きくしたい。
（キャプションも表示。）

・「シャッフルで再生」「選択して再生」を切り替えたい。
（初期設定はシャッフル）

参考の画像

・短いmp3ファイルは増えていく予定です。
・別の音楽ファイルをバックで流す予定です。

---

こちらのサイトさまをよんでいて作れないものかと考えていましたが、
知識が足りずなにをどうすべきかわかりませんでした。

ご教授いただければ幸いです。
よろしくお願いいたします。

・音声プレーヤーの埋め込み
再生リスト/PHP&JavaScript room 様

・HTML5 Audio要素を使ってイベントに応じて任意の音源を再生する/Black Everyday Company 様

Comments

[nskydiving]

質問欄に途中まで書いたコードを提示して、分からない部分はどこかを記載してください。

Answer 1

単純にmp3等を再生したい場合は次の様にして再生出来ます。

let music = new Audio();
music.src = "filename.mp3";
music.play();

UIやシステムはご自由に設計してください。
ただ、Audioオブジェクトは1つのインスタンスに対して1つのファイルなので、同時再生には新しくインスタンスするか、確か、play()後にオブジェクトを再インスタンスする事で実現出来たはずです。

ただし、再インスタンスすると言う事は再生が終わると消滅してしまうのでストップや音量等のコントロールが出来ないので、配列に格納して利用する事をオススメします。

シャッフル

シャッフルするにも手段が幾つかあります。

• ファイル名で管理する
• オブジェクトで管理する

どちらも管理の仕方は大体同じですが、ファイル名で管理すると、ロード時間が必要になります。なので、次の曲を移る時に一旦ロードから初めて再生する事になる。

オブジェクトで管理すると、事前に幾つかの音楽ファイルをロードしておいて、次の曲へ移る時はにロード時間が必要なくなります。

どちらを使うにしても貴方次第です。なんにせよ配列の知識は必要だと思いますが。