javascriptを埋め込みにすると動作が変わった

Question

前提・実現したいこと

先日、音楽をランダムに、且つ連続で再生するJavaScriptをTeratailの質問を参考の元作成させていただきました。そこでJavaScriptをHTMLに埋め込む形式で同様のものを作りたいと思っています。

以前の質問：音楽を繰り返し再生する

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

実際に行ってみたところ、1曲目は再生されるものの、2曲目以降が自動で再生しなくなりました。

万が一、埋め込みにするとそういった動作ができなくなるのであれば、その旨を教えていただけると幸いです。

該当のソースコード

以下の以前の形のHTML・Javascriptでは動作します。
※正常な動作：自動でランダムに連続で再生される

<div id="audiowrap">
  <audio id="audioElement" controls>
    <source id="srcElement" src="" type="audio/mp3">
  </audio>
</div>
<script type="text/javascript">
var src = [
          'https://*******/file/mp3/001.mp3',
          'https://*******/file/mp3/002.mp3',
          'https://*******/file/mp3/003.mp3',                 
            ];
            var randmize_wrapper = function () {
              var rand = Math.floor( Math.random() * src.length );
              return rand;
            }
            var currentRand = 0;
            document.addEventListener("DOMContentLoaded", function(){
              var rand = randmize_wrapper();
              document.getElementById("srcElement").setAttribute('src', src[rand]);
              currentRand = rand;
              var audio_elm = document.getElementById("audioElement");
              audio_elm.load(); 
              audio_elm.play();
            });
            var audio_elm = document.getElementById("audioElement");
            audio_elm.addEventListener('ended', function(){
              var rand = randmize_wrapper();
              while ( currentRand == rand ) {
                rand = randmize_wrapper();
              }
              currentRand = rand;
              document.getElementById("srcElement").setAttribute('src', src[rand]);
              audio_elm.load(); 
            });
</script>

今回のコード（正常動作しない）

<div id="audiowrap">
  <audio id="audioElement" controls>
    <source id="srcElement" src="" type="audio/mp3">
  </audio>
</div>
<script type="text/javascript" src="https://*******/file/js/play.js">
</script>

var src = [
          'https://*******/file/mp3/001.mp3',
          'https://*******/file/mp3/002.mp3',
          'https://*******/file/mp3/003.mp3',                 
            ];
            var randmize_wrapper = function () {
              var rand = Math.floor( Math.random() * src.length );
              return rand;
            }
            var currentRand = 0;
            document.addEventListener("DOMContentLoaded", function(){
              var rand = randmize_wrapper();
              document.getElementById("srcElement").setAttribute('src', src[rand]);
              currentRand = rand;
              var audio_elm = document.getElementById("audioElement");
              audio_elm.load(); 
              audio_elm.play();
            });
            var audio_elm = document.getElementById("audioElement");
            audio_elm.addEventListener('ended', function(){
              var rand = randmize_wrapper();
              while ( currentRand == rand ) {
                rand = randmize_wrapper();
              }
              currentRand = rand;
              document.getElementById("srcElement").setAttribute('src', src[rand]);
              audio_elm.load(); 
            });

補足情報

ブラウザ：GoogleChrome
※ブラウザの仕様を考え、IEでも行いましたが、結果は同じでした。

Comments

[m.ts10806]

あまり「teratail」のタグは関係ないのでは

[Ito_Kazuki_]

すみません。ミスです。修正します。

[miyabi_pudding]

> 2曲目以降が自動で再生しなくなりました

これはどういうことでしょうか？
何度リロードしても、一曲目しか流れない、と言う事でしょうか？
それとも、意図として、
曲の再生が終わった時、
次の違う曲がランダムで再生されるようにしたいが、そうならない、
なのでしょうか？

> ※コードはIE・Safariに対応しているものでお願いします。

この書き方は、作業依頼に感じてしまう可能性があるので、やめましょう。

[Ito_Kazuki_]

> ※コードはIE・Safariに対応しているものでお願いします。
わかりました。気を付けます。（修正しておきます。）

＞2曲目以降が自動で再生しなくなりました
これは、今までは1曲終了するとすぐに2曲目が自動で再生されていたのにも関わらず、
Scriptを埋め込みにしてから再度再生ボタンを押さないと次が再生されなくなってしまっていたということです。

※
以前は
再生クリック→1曲目再生→1曲目終了・2曲目開始→・・・
現在は
再生クリック→1曲目作成→1曲目終了→再生クリック→2曲目再生→・・・
といった感じです。

Answer 1

"ended"の方。`audio_elm.play();が入ってないだけでは？
"DOMContentLoaded"のように書けばループ再生されうのではないかと。

Answer 2

どうも、お久しぶりです。あの作品が役に立ってるようで何よりです。

うまく動いてると書いてるほうも張り付けたコードでは連続再生されないはずです。
うまく動いてると言ってるほう、動かないと言ってるほう共にコピーミスかどうか分かりませんが
コードが1行抜けてます。

tomomo様がご指摘されているように、'ended'のイベントリスナーのコードが1行抜けています。
以前の質問のページを開いてコードを見てもらえば、抜けているのがわかるはずです。

一応抜けているのを追加したコードを念のため載せておきます。これを別ファイルで読み込んでもらえば動くはずです。

var src = [
          'https://*******/file/mp3/001.mp3',
          'https://*******/file/mp3/002.mp3',
          'https://*******/file/mp3/003.mp3',                 
            ];
            var randmize_wrapper = function () {
              var rand = Math.floor( Math.random() * src.length );
              return rand;
            }
            var currentRand = 0;
            document.addEventListener("DOMContentLoaded", function(){
              var rand = randmize_wrapper();
              document.getElementById("srcElement").setAttribute('src', src[rand]);
              currentRand = rand;
              var audio_elm = document.getElementById("audioElement");
              audio_elm.load(); 
              audio_elm.play();
            });
            var audio_elm = document.getElementById("audioElement");
            audio_elm.addEventListener('ended', function(){
              var rand = randmize_wrapper();
              while ( currentRand == rand ) {
                rand = randmize_wrapper();
              }
              currentRand = rand;
              document.getElementById("srcElement").setAttribute('src', src[rand]);
              audio_elm.load(); 
              audio_elm.play();//コピーミスで抜けてましたよ。これがないと再生されません
            });

Comments

[Ito_Kazuki_]

ありがとうございます。確認してみます。

[Ito_Kazuki_]

無事動作しました。ありがとうございました！

[nekora]

動いてよかったです。埋め込みでも、外部ファイルでも動作するように作ってありますので安心してください。
ただし、埋め込みの場合、jQueryではなくネイティブなJavaScriptでgetElementByIdなどやってるので
HTMLコードの先頭に置くとDOMの読み込みが完了してないため要素が拾えません。
埋め込みの場合はBODYの一番最後に入れるようにしてください。そうすれば動きます。

[nekora]

各回答のところの四角の数字をポイントすると、回答の評価の値を増減できます。今回の回答はtomomo様のご指摘が早かった上に的を射てるのでtomomo様の評価を上げてさしあげてください。せっかく指摘してくださったのに、評価０は失礼ですよ。

[Ito_Kazuki_]

ご説明ありがとうございます。評価させていただきました。

[nekora]

えーと・・・ねだるようでみっともないから明記しなかったんですが、ベストアンサーを付けるだけではなくベストアンサーも役に立ったので、ベストアンサーの評価も上げるようにしてください。