音楽を繰り返し再生する

前提・実現したいこと

個人用に音楽をランダムに繰り返し再生するページを作っています。

発生している問題

音楽がランダムに再生されるようには作れたのですが、
「1曲終了したらまたランダムで再生する」ようにするにはどうしたらいいのでしょうか。

ソースコード

var src = [
'001.mp3',
'002.mp3',
'003.mp3',
];
document.addEventListener("DOMContentLoaded", function(){
　var rand = Math.floor( Math.random() * src.length ); 
　document.getElementById("audiowrap").innerHTML = '<audio autoplay>' +
　'<source src="' + src[rand] + '" type="audio/mp3">' +
　'</audio>';
});

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

回答4件

ベストアンサー

失礼しました。一つ前の投稿のコードに全角スペースが混入していてそれでスクリプトがうまく動いてなかったようです。

お待たせしました。完全版をUPします。

IEのsrc属性を書き換えても同じ曲が流れるバグにも対応した完全版です

Windows7 IE11でちゃんとランダムかつ重複せずに曲が流れ続けるのを確認した完全版です。

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta  charset="UTF-8">
5<title>audio random test</title>
6</head>
7<body>
8	<div id="audiowrap">
9		<audio id="audioElement" controls="controls">
10			<source id="srcElement" src="" type="audio/mp3">
11		</audio>
12	</div>
13	<script type="text/javascript">
14		var src = [
15					'001.mp3',
16					'002.mp3',
17					'003.mp3',
18				];
19
20		//var xhr = null; // 使える場合はMicrosoft.XMLHTTP, 使えない場合はXMLHttpRequest
21		//try {
22			//xhr = new ActiveXObject("Microsoft.XMLHTTP");
23			//}
24		//catch (e) {
25			//xhr = new XMLHttpRequest();
26			//}
27
28		var randmize_wrapper = function () {
29			var rand = Math.floor( Math.random() * src.length );
30			return rand;
31		}
32
33		var currentRand = 0;
34
35		document.addEventListener("DOMContentLoaded", function(){
36		var rand = randmize_wrapper(); 
37
38		//xhr.open("GET", src[rand], true); // 外部ファイル読み込み
39
40		document.getElementById("srcElement").setAttribute('src', src[rand]);
41		currentRand = rand;
42		var audio_elm = document.getElementById("audioElement");
43		audio_elm.load(); //IEのバグ対応srcが書き換わったあと強制的にloadを実行すると書き換わったsrcのファイルを読み込みplayでちゃんと書き換えた曲が再生される
44		audio_elm.play();
45	});
46		var audio_elm = document.getElementById("audioElement");
47		audio_elm.addEventListener('ended', function(){
48			var rand = randmize_wrapper();
49			while ( currentRand == rand ) {
50				rand = randmize_wrapper();
51			}
52			currentRand = rand;
53
54			//xhr.open("GET", src[rand], true); // 外部ファイル読み込み
55
56			document.getElementById("srcElement").setAttribute('src', src[rand]);
57			audio_elm.load(); //IEのバグ対応srcが書き換わったあと強制的にloadを実行すると書き換わったsrcのファイルを読み込みplayでちゃんと書き換えた曲が再生される
58			audio_elm.play();
59	});
60
61	</script>
62</body>
63</html>

投稿2020/05/09 16:42

nekora

総合スコア501

Ito_Kazuki_

2020/05/09 21:05

何度も検討していただき、ありがとうございます。先ほど確認したところ、問題なく再生されることが確認できました。

nekora

2020/05/09 23:59

一晩中流し続けて朝起きたら、ちゃんとsrc属性を書き換えてあり存在するファイルなのに「対応するファイルではありません」みたいなエラーが発生していました。これはおそらくload()でバッファに読み込み続けたときIEの潜在的なバグでメモリリークが重なってこれ以上読み込めなくなったものと思われます。こればっかりは、対応のしようが無いので、これが出たらページのリロードを行ってください。ちゃんと、また曲が流れるようになります。

miyabi_pudding

2020/05/10 12:22

回答者さん > 質問修正依頼という仕組みがございますので、次、質問の修正依頼や、情報追記を求める際は、そちらを使いましょう。また、回答は編集されてるからわかると思いますが、編集履歴が残りますので、よほど回答の方向性を違わない限りは、重複投稿は止めるべきかと。

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

IEでテストしましたが、1曲目しか流れなかった時間がないので（もう出かける）ほおって置けば3曲目とかを
再生するかもしれません検証してみてください。

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta  charset="UTF-8">
5<title>audio random test</title>
6</head>
7<body>
8    <div id="audiowrap">
9        <audio id="audioElement" autoplay>
10            <source id="srcElement" src="" type="audio/mp3">
11        </audio>
12    </div>
13    <script type="text/javascript">
14        var src = [
15                    '001.mp3',
16                    '002.mp3',
17                    '003.mp3',
18                ];
19        document.addEventListener("DOMContentLoaded", function(){
20    　  var rand = Math.floor( Math.random() * src.length ); 
21    　  document.getElementById("srcElement").setAttribute('src', src[rand]);
22        //var audio_elm = document.getElementById("audioElement");
23        //audio_elm.play();
24    });
25        var audio_elm = document.getElementById("audioElement");
26        audio_elm.addEventListener('ended', function(){
27            var rand = Math.floor( Math.random() * src.length ); 
28            document.getElementById("srcElement").setAttribute('src', src[rand]);
29            audio_elm.play();
30    });    
31        
32    </script>
33</body>
34</html>

投稿2020/05/06 03:01

編集2020/05/06 04:42

nekora

総合スコア501

nekora

2020/05/06 05:25 編集

ソースにミスがあったので修正しました。edgeでランダムに曲が流れ続けるのを確認しました。 chromeではポリシーのせいでautoplayが効かないので対策が必要です。

Ito_Kazuki_

2020/05/06 08:14

ありがとうございます。ランダムに選択され、連続して再生されるようにはなっているのですが、同じ曲が連続して再生されてしまいます。（言葉足らずだったかもしれませんが、）曲が終わるたびに異なる曲を再生するようにはどうしたらいいのでしょうか。お手数かけまして申し訳ありませんが、お願いします。

Ito_Kazuki_

2020/05/09 11:38

autoplayを削除することで、Chrome対応にしました。

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

audioにendedのイベントリスナーを登録して、再生が終わったタイミングで新たな曲を選びplay()すればいいんじゃないかなと思います。

javascript
1audio.addEventListener('ended', function(){
2};

参考サイト [JavaScript] 複数の音楽ファイルを連続で再生しループする。

投稿2020/05/06 00:47

nekora

総合スコア501

Ito_Kazuki_

2020/05/06 01:26

すみません。どこに入れたらいいのでしょうか。以下のように入力したのですが、再生されませんでした。 audio is not defind　とあったので、Audioの定義をする必要があるのだと思うのですが、どれを定義したらいいかわかりません。 ```javascript var src = [ '001.mp3', '002.mp3', '003.mp3', ]; audio.addEventListener('ended', function(){ // 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 src = [ '001.mp3', '002.mp3', '003.mp3', ]; for (let step = 0; step < 200; step++) { // 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>'; }); }; ```

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

少しはご自分で考えてみましたか？丸投げみたいな印象を受けます。
色々やってみてダメだったらダメだったのでお願いしますならいいのですが・・・

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>audio random test</title>
</head>
<body>
    <div id="audiowrap">
        <audio id="audioElement" autoplay>
            <source id="srcElement" src="" type="audio/mp3">
        </audio>
    </div>
    <script type="text/javascript">
        var src = [
                    '001.mp3',
                    '002.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.play();
    });
        var audio_elm = document.getElementById("audioElement");
        audio_elm.addEventListener('ended', function(){
            var rand = randmize_wrapper();
            while ( currentRand == rand ) {
                rand = randmize_wrapper();
            } 
            document.getElementById("srcElement").setAttribute('src', src[rand]);
            currentRand = rand;
            audio_elm.play();
    });    

    </script>
</body>
</html>

IEではIEのバグで乱数からsetAttributeで書き換えても同じ曲が流れてしまいますがedgeならこれでOKのはずです。

投稿2020/05/06 10:52

編集2020/05/06 23:01

nekora

総合スコア501