音楽再生時に名前を表示する

前提・実現したいこと

音楽を再生する際にその音楽の名前を表示させたいと思っています。

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

Uncaught (in promise) DOMException:

play() failed because the user didn't interact with the document first.
※上記エラーは質問内容とは無関係（ブラウザ表示によって発生するエラーで今回の編集のために発生したものではない）ことが判明しました。

音楽を次々とランダムに再生するように作っていて、新たに再生されるたびに名前を表示させるようにしたいです。media.currentTimeで音楽が再生されたことを確認し、3秒台の時に名称を表示するようにしたのですが、ここで上記の問題が発生しているようです。音楽が変わったときに元の表示を変える必要はなく、次々と下に記載されていくイメージです。どのように作成するとうまくいくのでしょうか。
※表示のタイミングは3秒の時である必要はありません。

実際に表示がされていないので、何が問題点であるのかがつかめないのですが、どのように修正したらいいのでしょうか。

以下のようなエラーが出てきました。（以下に修正した部分の最後にコメントアウトしています。）

Uncaught ReferenceError: rand is not defined

randが未定義とされていますが、以下のコードではrandは0~4の乱数になっているはずです。
なぜ未定義の状態なのでしょうか。

該当のソースコード

js
1<audio type="audio/mpeg" id="audioElement" controls="controls">
2                <source id="srcElement" src="" type="audio/mp3">
3            </audio>
4        </div>
5    　<script type="text/javascript">
6        var src = [
7            './sounds/1.mp3',
8            './sounds/2.mp3',
9            './sounds/3.mp3',
10            './sounds/4.mp3',
11            './sounds/5.mp3',
12                ];
13        var randmize_wrapper = function () {
14            var rand = Math.floor( Math.random() * src.length );
15            return rand;
16        }
17        var currentRand = 0;
18        document.addEventListener("DOMContentLoaded", function(){
19          var rand = randmize_wrapper();
20          document.getElementById("srcElement").setAttribute('src', src[rand]);
21          currentRand = rand;
22          var audio_elm = document.getElementById("audioElement");
23          audio_elm.load(); 
24          audio_elm.play();
25        });
26        var audio_elm = document.getElementById("audioElement");
27        audio_elm.addEventListener('ended', function(){
28          var rand = randmize_wrapper();
29          while ( currentRand == rand ) {
30            rand = randmize_wrapper();
31          }
32          currentRand = rand;
33          document.getElementById("srcElement").setAttribute('src', src[rand]);
34          audio_elm.load(); 
35          audio_elm.play();
36        });
37        function name() {
38        var plytime = audioElement.currentTime;//mediaをaudioElementに修正
39          if(plytime >= 3 && plytime < 4){
40            switch(rand){
41            case 0:
42                document.write("『特定楽曲１』<br>");
43                break;
44            case 1:
45                document.write("『特定楽曲２』<br>");
46                break;
47            default:
48                document.write("その他の楽曲<br>");
49            }
50            }}
51           setInterval(name, 1000);
52      </script>

ku__ra__ge

2021/06/22 08:14

エラーメッセージを見ると、ユーザが操作してないからplay()は失敗したよと書いてありますが、ランダム再生以前にjavascriptのコードから音楽を再生することは出来ているのでしょうか？

Ito_Kazuki_

2021/06/22 08:31

再生そのものはできています。

Ito_Kazuki_

2021/06/22 13:03

確認した結果、エラーは無関係であることが判明しました。しかし、エラーとしては表示されませんが、表示されるべきの名前が表示されません。

行動規範の内容に同意します

回答2件

ベストアンサー

グローバル変数とローカル変数についてきちんと理解されていないようですね。
乱暴な言い方になりますが、関数外に宣言して定義しているグローバル変数を使えば
どの関数内からでも参照可能です。

HTML
1        <audio type="audio/mpeg" id="audioElement" controls="controls">
2            <source id="srcElement" src="" type="audio/mp3">
3        </audio>
4
5    　<script type="text/javascript">
6        var src = [
7            './sounds/1.mp3',
8            './sounds/2.mp3',
9            './sounds/3.mp3',
10            './sounds/4.mp3',
11            './sounds/5.mp3',
12                ];
13        var randmize_wrapper = function () {
14            var rand = Math.floor( Math.random() * src.length );
15            return rand;
16        }
17        var currentRand = 0; //グローバル変数、どの関数からでも参照できる
18        document.addEventListener("DOMContentLoaded", function(){
19          var rand = randmize_wrapper(); //randは関数内で宣言して使っているので関数内でしか有効じゃない。ローカル変数
20          document.getElementById("srcElement").setAttribute('src', src[rand]);
21          currentRand = rand;
22          var audio_elm = document.getElementById("audioElement");
23          audio_elm.load(); 
24          audio_elm.play();
25        });
26        var audio_elm = document.getElementById("audioElement"); //audioElementを取得してグローバル変数にセットしている
27        audio_elm.addEventListener('ended', function(){
28          var rand = randmize_wrapper();
29          while ( currentRand == rand ) {
30            rand = randmize_wrapper();
31          }
32          currentRand = rand;
33          document.getElementById("srcElement").setAttribute('src', src[rand]);
34          audio_elm.load(); 
35          audio_elm.play();
36        });
37        function name() {
38            var element = document.createElement('div'); //divタグ要素を新たに作る
39            var playtime = audio_elm.currentTime;//mediaをaudioElementに修正  //audioElementのグローバル変数audio_elmを使う
40            if(playtime >= 3 && playtime < 4){ //plytimeのように適当に省略した名前だと後から見て分からなくなるので省略はしないか、だれが見てもわかる省略の仕方をしないといけない
41                switch(currentRand){ //現在の乱数（どの曲を演奏しているかを保持しているグローバル変数currentRandで切り分けなければならない
42                case 0:
43                    element.innerHTML = "『特定楽曲１』<br>"; //document.writeしてしまうと、audioタグとか全部消えてしまう。divタグの要素を作ってそれにメッセージをセットしてbody要素に挿入するようにする
44                    break;
45                case 1:
46                    element.innerHTML = "『特定楽曲２』<br>";
47                    break;
48                default:
49                    element.innerHTML = "その他の楽曲<br>";
50                    break;
51                }
52                document.body.insertBefore(element, audio_elm); //audioタグの前に新たに作ったdivタグ要素を追加する
53            }
54        };
55           setInterval(name, 1000);
56      </script>