前提・実現したいこと
個人用に音楽をランダムに繰り返し再生するページを作っています。
発生している問題
音楽がランダムに再生されるようには作れたのですが、
「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>'; });
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答4件
1
ベストアンサー
失礼しました。一つ前の投稿のコードに全角スペースが混入していてそれでスクリプトがうまく動いてなかったようです。
お待たせしました。完全版を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
総合スコア501
1
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総合スコア501
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/05/06 08:14
2020/05/09 11:38
1
audioにendedのイベントリスナーを登録して、再生が終わったタイミングで新たな曲を選びplay()すればいいんじゃないかなと思います。
javascript
1audio.addEventListener('ended', function(){ 2};
投稿2020/05/06 00:47
総合スコア501
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/05/06 01:26
0
少しはご自分で考えてみましたか?丸投げみたいな印象を受けます。
色々やってみてダメだったらダメだったのでお願いしますならいいのですが・・・
<!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総合スコア501
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/05/09 21:05
2020/05/09 23:59
2020/05/10 12:22