音楽をランダム・再生

Question

前提・実現したいこと

JavaScriptで音楽を再生する動作を作成しています。
具体的に言うと、
6つある音楽（a,b,c,d,e,f）を
順番に（a-b-c-d-e-fの順で）
ループ再生で、
最初は６つの音楽のいずれかをランダムで選択したもの
を流したいです。

※例
aが最初で続いてb-c-d-e-f-a-b-c-d-e-f....
cが最初で続いてd-e-f-a-b-c-d-e-f-a-b....
などのようにしたいです。

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

ページを開いても再生されないというのが現状です。
何が問題であるのか、どのように直したらいいのかを教えていただけないでしょうか。

ソースコード

いくつかのサイトを参考に作成したのが下記のコードになります。

        var src = [
            'a.mp3',
            'b.mp3',
            'c.mp3',
            'd.mp3',
            'e.mp3',
            'f.mp3',
        ];
        // DOM要素の読み込みが終了してから実行
        document.addEventListener("DOMContentLoaded", function(){
            var rand = Math.floor( Math.random() * src.length ); // 0以上ファイル数未満の整数値の乱数を生成
            // id="audiowrap"の要素にaudio要素を書き出す
            document.getElementById("audiowrap").innerHTML = '<audio autoplay>' +
                '<source src="' + src[rand] + '" type="audio/mp3">' +
                    '</audio>';
                });
        var a = new Audio("a.mp3");
        var b = new Audio("b.mp3");
        var c = new Audio("c.mp3");
        var d = new Audio("d.mp3");
        var e = new Audio("e.mp3");
        var f = new Audio("f.mp3");
        // aのendedを検知するための処理
        a.addEventListener("ended", function(e) {
            // bの再生開始
            b.play();
        });
        
        // bのendedを検知するための処理
        b.addEventListener("ended", function(e) {
            // cの再生開始
            c.play();
        });

        // cのendedを検知するための処理
        c.addEventListener("ended", function(e) {
            // bの再生開始
            d.play();
        });
        
        // dのendedを検知するための処理
        d.addEventListener("ended", function(e) {
            // cの再生開始
            d.play();
        });

        // eのendedを検知するための処理
        e.addEventListener("ended", function(e) {
            // bの再生開始
            f.play();
        });
        
        // fのendedを検知するための処理
        f.addEventListener("ended", function(e) {
            // cの再生開始
            a.play();
        });

Comments

[Takumiboo]

ブラウザ側で音楽の自動再生が無効化されていたりする可能性もありますね

Answer 1

・配列の番号で音楽再生するようなコードを組む
・乱数を出してその番号の音楽再生
・＋１して配列のサイズ超えたら０にする
・くりかえし

というふうにすればよろしい

Comments

[jpop]

上記のコードでいうとどこを直したらいいのでしょうか。

[y_waiwai]

一部分の修正でいけるってなもんでもないので（全部の作り直しが必要）
まあ、上から順番に一つづつ実現できるようにコードを書いていこう

[jpop]

なるほど。ありがとうございます。回答を参考に書き直してみます。

Answer 2

回答、コメント、いろいろしてくださった方、ありがとうございます。

再生できない理由が判明しました。

私は現在、GoogleChromeを使用しております。
そして、上記のソースはGCでは使えないようです。
そのために再生できなかったのですね。
コメントの音楽の再生が無効化されているというのを見て
もしかしたらブラウザ自体がタグに対応していないのでは？と思い、
Can I use?で調べたところ、やはり無理・・・
根本的なところでした。すみません。