サイト上にこんな2曲分のmp3ファイルがあったとして
これらを連続再生したい。
つまり「aimyon_MG.mp3」の再生が終わったら「aimyon_ROCK.mp3」を再生したい。
ちなみに「aimyon_MG.mp3」1曲だけを繰り返しループ再生するコードは以前書けた（phpで実装）。
今回は JavaScript を使って2曲連続再生を実装する。なおJQueryは使わない。
できた。
$ vim my_musicplayer_loop.html
コピペ用
1 <!DOCTYPE html>
2 <html lang="ja">
3 <head>
4 <meta charset="utf-8">
5 <title>音楽連続再生テスト</title>
6 </head>
7
8 <body>
9 <audio id='audio'></audio>
10 <script type="text/javascript">
11 'use strict';
12
13 var playlist = [
14 './aimyon_MG.mp3',
15 './aimyon_ROCK.mp3'
16 ]
17
18 var audio = document.createElement('audio');
19 document.body.appendChild(audio);
20 audio.style.width = '100%';
21 audio.style.height = 'auto';
22 audio.controls = true;
23 audio.volume = 0.2;
24
25 audio.src = playlist[0];
26 audio.play();
27
28 // イベントendedは下記コメント参照
29 var index = 0;
30 audio.addEventListener('ended', function(){
31 index++;
32 if (index < playlist.length) {
33 audio.src = playlist[index];
34 audio.play();
35 } else {
36 audio.src = playlist[0];
37 audio.play();
38 index = 0;
39 }
40 });
41
42
43 </script>
44 </body>
45 </html>
といっても自分で書いたわけではなくて。どこかの天才のコード写経だけど。
[JavaScript] 複数の音楽ファイルを連続で再生しループする。 · GitHub
うまいのは36行目。2曲目が終わったら1曲目の頭に戻るようにしてるところ。
これは便利。
こういうシンプルなコードの良いところは応用が効くから。例えばちょっと改造してこんな感じにして
チェックボックスをつけた曲だけ連続再生するサイトとかすぐ作れそうだ（今度試す）。
動かしてみる。
my_musicplayer_loop.html をクリックすると…
最初の曲の再生が開始され
その曲が終わると
次の曲が読み込まれ
再生開始する。
うまくいった。最高。
なお、30行目でイベント ended を捕まえているが
これを違うものに変えれば色々と動作を変えられそうだ。
今度試す。
追記）
再生対象の曲名を表示するようにした。
16行目の配列に入っているファイル名（曲名）を表示する処理を入れる。
1 <!DOCTYPE html>
2 <html lang="ja">
3 <head>
4 <meta charset="utf-8">
5 <title>音楽連続再生テスト</title>
6 </head>
7
8 <body>
9 <!-- getElementByIdより前にdiv id='my_src_Area を描かないとエラーになる-->
10 <div id='my_src_Area'></div>
11
12 <audio id='audio'></audio>
13 <script type="text/javascript">
14 'use strict';
15
16 var filelist = [
17 './aimyon_MG.mp3',
18 './aimyon_ROCK.mp3'
19 ]
20
21 //曲名配列の内容を表示
22 //https://ascii.jp/elem/000/000/525/525808/index-4.html
23 var my_src = '<ul>';
24 for(var i=0; i<filelist.length; i++){
25 // my_src += '<li onclick=start_music("'+filelist[i]+'")>';
26 my_src += '<li>' + filelist[i] + '</li>';
27 // console_log(filelist[i]);
28 }
29 my_src += '</ul>';
30 document.getElementById("my_src_Area").innerHTML = my_src;
31
32 var audio = document.createElement('audio');
33 document.body.appendChild(audio);
34 audio.style.width = '100%';
35 audio.style.height = 'auto';
36 audio.controls = true;
37 audio.volume = 0.2;
38
39 audio.src = filelist[0];
40 audio.play();
41
42 // イベントendedは下記コメント参照
43 var index = 0;
44 audio.addEventListener('ended', function(){
45 index++;
46 if (index < filelist.length) {
47 audio.src = filelist[index];
48 audio.play();
49 } else {
50 audio.src = filelist[0];
51 audio.play();
52 index = 0;
53 }
54 });
55 </script>
56
57 </body>
58 </html>
変更点
・10行目 getElementByIdで呼ばれるidを<div>で定義
・23行目から30行目 曲名を表示するためのforループとgetElementByIDを追記
参考）
