タイマーで、一定時間ごとに複数の音からランダムで１つ選び再生する方法

前提・実現したいこと

一定時間(ここでは10秒)ごとに、複数の音からランダムでひとつ選び再生したいと考えています。

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

以下のコードでは、最初に複数の音からひとつ選びそれを繰り返し再生してしまいます。
再生ごとに音の選出をする方法をご存知の方がいらっしゃいましたら、ご教示いただけると幸いです。
よろしくお願いいたします。

該当のソースコード

html
1<FORM name="musicform">
2<INPUT id="playbutton" name="playbutton" type="button" value="再生" onClick="playAudio()">
3</FORM>
4

JavaScript
1<SCRIPT>
2var repeatTimer;
3var button = document.getElementById('playbutton'),
4audioArr = [
5'm0.mp3',
6'm1.mp3',
7'm2.mp3',
8];
9
10var audio = new Audio();
11var playAudio = function() {
12	var num = Math.floor(Math.random() * audioArr.length);
13		if (num == audioArr.length) {
14		num = audioArr.length - 1;
15		}
16	audio.src = audioArr[num];
17	audio.play();
18	}
19button.addEventListener("click",function() {
20	audio.play();
21	setInterval(function() {
22		audio.play();
23	},10000);
24}, false);
25
26</SCRIPT>

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

回答1件

ベストアンサー

js
1button.addEventListener("click",function() {
2	audio.play();
3	setInterval(function() {
4		audio.play();
5	},10000);
6}, false);

なので、ボタンを押すと audio.play() で同じ曲を繰り返すだけなのではありませんか？
ボタンイベントを書き換えなければいいのでは？

10秒ごとに曲を自動変更したいのでしょうか？
どんなタイミングで曲を変更したいのでしょう？

以下のプログラムだと、ボタンを押した後、1秒ごとにコンソールにランダムに選んだファイル名が表示されます。

html
1<html>
2<head>
3<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
4</head>
5
6<body>
7<FORM name="musicform">
8<INPUT id="playbutton" name="playbutton" type="button" value="再生" onClick="playAudio()">
9</FORM>
10
11<script>
12const audioArr = [
13    'm0.mp3',
14    'm1.mp3',
15    'm2.mp3',
16];
17
18const playAudio = function() {
19    const num = Math.floor(Math.random() * audioArr.length);
20    console.log('play', audioArr[num]);
21    setTimeout(playAudio, 1000);
22}
23
24</script>
25</body>
26</html>

10秒ごとに曲を変更する

javascript
1<SCRIPT>
2var audioArr = [
3'm0.mp3',
4'm1.mp3',
5'm2.mp3',
6];
7
8var audio = new Audio();
9var playAudio = function() {
10        var num = Math.floor(Math.random() * audioArr.length);
11        audio.src = audioArr[num];
12        audio.play();
13        setTimeout(audio.play(), 10000);
14}
15
16</SCRIPT>

投稿2022/01/28 16:00

編集2022/01/29 14:22

shiracamus

総合スコア5406

tomonari0712

2022/01/29 10:54

早々のご回答ありがとうございます。再生ボタンを1回押すと指定した曲の中からランダムで選出して1曲再生、10秒後に再びランダムで選出して1曲再生これを繰り返し続けたいと考えています。再生ボタンは最初の1度押すだけで良いようにできればと思っています。ご教示いただきましたプログラムを用いてもう少し考えてみようと思います。