javascript - 如何将用户的选择设置到我的数组中并随机选择元素

Question

我正在尝试让我的程序在不同的持续时间播放音频列表。从音频列表元素4开始，持续时间将取决于用户的选择，并在第一轮中播放4到8范围内的每个元素。 (所以第一轮，程序将播放元素 4, 5,...,8。)

另一个问题是从音频列表中随机选择元素 4 到 8 并播放，但持续时间与用户的选择相同。

我的想法是使用 if 语句 for i = 4，并执行 for 循环。如果我不使用循环，我可以存储用户输入并将其设置为元素的持续时间。但考虑到我需要播放从元素 4 到 8 的音频，所以我认为我应该使用循环，但如果我使用循环，我无法将用户输入存储到我的数组中。为什么是这样？以及如何随机编写代码从元素 4 到 8 中选择数组列表。

感谢您的帮助。我很感激。

<select id="numFollowUp" name="numFollowUp" style=display:none>
            <option value="">Number of follow-up questions</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
</select>

<select id="secFollowUp" name="secFollowUp" style=display:none>
            <option value="">Second between each question</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
</select>

var intro_playList = [{
        "duration": 1000,
        "key": "0_silence"
    }, {
        "duration": 500,
        "key": "1_hello"
    }, {
        "duration": 1000,
        "key": "2_how_old"
    }, {
        "duration": 1000,
        "key": "3_what_did_you_make"
    }, {
        // story_playlist
        "duration": 1000,
        //"duration": document.getElementById("secFollowUp").value * 1000,
        "key": "4_tell_me_a_story"
    }, {
        "duration": 1000,
        //"duration": document.getElementById("secFollowUp").value * 1000,
        "key": "5_and_then_what"
    }, {
        "duration": 1000,
        "key": "6_why"
    }, {
        "duration": 1000,
        "key": "7_tell_me_more"
    }, {
        "duration": 1000,
        "key": "8_what_happened_next"
    }];

  $(document).ready(function() {
    var audioElement = document.createElement('audio');

        audioElement.addEventListener("ended", playAudio);

        var i = 0;
        $("#play").on("click", playAudio);

        function playAudio() {
            console.log(i);
            var audioIndex = intro_playList[i++];
            console.log(audioIndex);
            console.log("After " + audioIndex.duration + " seconds play next audio");

            audioElement.src = "sound/" + audioIndex.key + ".wav";
            audioElement.load();
            setTimeout(function() { audioElement.play()}, audioIndex.duration);

            if(i === 4){

                while(i === 4)
                {
                  intro_playList[i].duration = document.getElementById("secFollowUp").value * 1000

                audioElement.src = "sound/" + audioIndex.key + ".wav";
                audioElement.load();
                setTimeout(function(){ audioElement.play()}, audioIndex.duration);
                i++;

                if(i === 8) break;
        }
    }
});

Answer 1

您可以使用 Fisher-Yates shuffle 创建 4-8 的打乱(无重复)序列，如下所示(伪代码):

for (let i = 4; i > 1; i--) {
    let idx = Math.round(Math.random() * (i - 1));
    let t = songs[3 + i];
    songs[3 + i] = songs[3 + idx];
    songs[3 + idx] = t;
}