Javascript p&&endingCount时间) }, 100); // 播放间隔,如果使用浮动秒(如2.5)设置持续时间或“delayAfter”,则0,1秒的间隔持续时间可确保准确性。 }//播放音频 //预加载所有音频以确保它们可用,因为时间有时很短。 var PREVARR=[]; 对于(i=0;i

Javascript p&&endingCount时间) }, 100); // 播放间隔,如果使用浮动秒(如2.5)设置持续时间或“delayAfter”,则0,1秒的间隔持续时间可确保准确性。 }//播放音频 //预加载所有音频以确保它们可用,因为时间有时很短。 var PREVARR=[]; 对于(i=0;i,javascript,jquery,html,Javascript,Jquery,Html,我从头完全重写了您的代码。。。第二次 我认为这真的是一个很好的项目。。。这是一个很好的编码挑战 在第二节课上,我看到了第一个使用setTimeout()延迟“概念”的几个问题: 超过超时延迟的音频长度被剪切。。。在两个文件之间不留超时 即使音频的长度不超过延迟,该延迟也会被文件长度部分“吸收” 更改“场景”,如添加更多随机问题,需要在代码中添加tweek 在随机“stage”之后播放的“ending”需要为每个结束文件嵌套setTimeout(),这很可怕 因此,我认为使用setInterval

我从头完全重写了您的代码。。。第二次
我认为这真的是一个很好的项目。。。这是一个很好的编码挑战

在第二节课上,我看到了第一个使用
setTimeout()延迟“概念”的几个问题:

  • 超过超时延迟的音频长度被剪切。。。在两个文件之间不留超时
  • 即使音频的长度不超过延迟,该延迟也会被文件长度部分“吸收”
  • 更改“场景”,如添加更多随机问题,需要在代码中添加tweek
  • 在随机“stage”之后播放的“ending”需要为每个结束文件嵌套
    setTimeout()
    ,这很可怕
  • 因此,我认为使用
    setInterval()
    检查“实际时间”与脚本在每次迭代时设置的开始下一个音频的时间(基于文件持续时间+延迟)的比较。。。这是个好主意

    而且有效它大大简化了代码。
    所有“场景”信息现在都在对象数组中

    var audioSrc=”https://www.bessetteweb.com/SO/45704602/";    // 音频文件的路径
    var audioType=“.mp3”;
    var default_numFollowUp=4;//默认随机问题数,如果用户使用下拉列表
    var default_secFollowUp=10;//如果用户使用下拉列表,则随机问题之间的默认延迟(秒)
    //创建音频元素
    var audioElement=document.createElement('audio');
    //通过获取不同数组中的索引来分析场景。
    var endingArr=[];
    var runThoughArr=[];
    var-randomArr=[];
    对于(i=0;i时间){
    //第一个“贯穿”按顺序播放所有音频,除了“结束”部分。
    if(播放索引=runThoughArr.length&&randomplayCount=numFollowUp&&endingCount时间)
    },100); // 间隔
    }//播放音频()
    //预加载所有音频以确保它们可用,因为时间有时很短。
    var PREVARR=[];
    
    对于(i=0;i如果正确解释问题,您可以使用
    .queue()
    .promise()
    .then()
    和重复调度来执行ac
    <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>
                <option value="8">8</option>
                <option value="9">9</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>
    </select>
    
    $("#ImageEnterVariables").on("click", function() {
            $('#ImageEnterVariables').hide();
            $("#numFollowUp").show();
            $("#secFollowUp").show();
            $("#subBut").show();
            $("#pause").hide();
        });
    
    var intro_playList = [{
              "duration": 11,        // in seconds, real file duration
              "key": "1_hello",     
              "delayAfter": 6,    // in seconds, delay after file ended
              "stage": "intro",
              "runThrough": true,
              "random": false
            }, {
              "duration": 4,
              "key": "2_how_old",
              "delayAfter": 6,
              "stage": "intro",
              "runThrough": true,
              "random": false
            }, {
              "duration": 3,
              "key": "3_what_did_you_make",
              "delayAfter": 10,
              "stage": "intro",
              "runThrough": true,
              "random": false
            }, {
              // story_playlist
              "duration": 5,
              "key": "4_tell_me_a_story",
              "stage": "story",
              "runThrough": true,
              "random": false
            }, {
              "duration": 4,
              "key": "5_and_then_what",
              "stage": "story",
              "runThrough": true,
              "random": true
            }, {
              "duration": 2,
              "key": "6_why",
              "stage": "story",
              "runThrough": true,
              "random": true
            }, {
              "duration": 3,
              "key": "7_tell_me_more",
              "stage": "story",
              "runThrough": true,
              "random": true
            }, {
              "duration": 3,
              "key": "8_what_happened_next",
              "stage": "story",
              "runThrough": true,
              "random": true
            }, {
              "duration": 4,
              "key": "9_how_does_it_end",
              "stage": "ending",
              "runThrough": false,
              "random": false
            }, {
              "duration": 4,
              "key": "10_what_is_the_story_name",
              "stage": "ending",
              "runThrough": false,
              "random": false
            }, {
              "duration": 6,
              "key": "11_thank_you_goodbye",
              "stage": "ending",
              "runThrough": false,
              "random": false
            }];
    
    
    
    $(document).ready(function() {
    // Version 1
            var audioElement = document.createElement('audio');
            audioElement.addEventListener("ended", playAudio);
    
            var audioSrc = "sound/"
            var audioType = ".wav";
            var defaultNumFollowUp = 1; // default number of random question, if user this used the dropdown
            var defaultSecFollowUp = 10; // default delay (seconds) between random questions, if user this used the dropdown
    
            // Analyse the scenario by getting indexes in different arrays.
            var endingArr = [];
            var runThroughArr = [];
            var randomArr = [];
    
            for(i = 0; i < intro_playList.length ; i++){
    
                if(intro_playList[i].stage === "ending"){ endingArr.push(i); }
                if(intro_playList[i].runThrough){ runThroughArr.push(i); }
                if(intro_playList[i].random){ randomArr.push(i); }
            }
    
            function getAudio(n){
                audioElement.src = audioSrc + intro_playList[n].key + audioType;
                audioElement.load();
                audioElement.play();
    
                return intro_playList[n]; // return the object
            }
    
            // Onload indexes.
            var playIndex = 0;
            var randomplayCount = 0;
            var endingCount = 0;
    
            // Interval variables
            var playInterval;
            var time = new Date().getTime();
            console.log(time + " is old time");
    
            // User inputs
            var numFollowUp = parseInt($("#numFollowUp").val());
            if(isNaN(numFollowUp)){ numFollowUp = defaultNumFollowUp; }
    
            var secFollowUp = parseInt($("#secFollowUp").val());
            if(isNaN(secFollowUp)){ secFollowUp = defaultSecFollowUp; }
    
    $("#play").on("click", playAudio);
    
    function playAudio(){
    
                playInterval = setInterval(function(){ // Every 0.1 second, do setInterval
                    var now = new Date().getTime();
                    //console.log(now + " now time");
    
                    if(now > time){
                        // First "run throught" plays all the audios in order, except the "ending" ones.
                        // playIndex = 0 in the first place
                        if(playIndex < runThroughArr.length){
                            var audioIndex = playIndex;
                            console.log("================================== RUN THROUGH!");
                            console.log("audioIndex is " + audioIndex);
    
                            playIndex++;
    
                        }else if (playIndex >= runThroughArr.length && randomplayCount <= numFollowUp){
                            var audioIndex = randomArr[ Math.floor(Math.random()*(randomArr.length - 1)) ];
    
                            console.log("================================== RUN random!");
    
                            // Increment index for next iteration
                            randomplayCount++;
                            console.log(randomplayCount);
    
                        }else if (randomplayCount >= defaultNumFollowUp && endingCount < endingArr.length ){
                            var audioIndex = endingArr[endingCount];
    
                            console.log("================================== RUN ending!");
    
                            // Increment index for next iteration
                            endingCount++;
                        }
    
                        // STOP INTERVAL!
                        if( endingCount === endingArr.length ){
                            clearInterval(playInterval);
                            console.log("=========== Interval stopped.");
    
                            // Reset onload indexes.
                            playIndex = 0;
                            randomplayCount = 0;
                            endingCount = 0;
                        }
    
                        // Prepare the audio file.
                        var audioObj = getAudio(audioIndex);
    
                        if(audioObj.stage === "intro"){
                        // set a new trigger time
                            time = new Date().getTime() + (audioObj.duration * 1000) + (audioObj.delayAfter * 1000);
                            console.log(time + " is time");
    
                        }else{
    
                            time = new Date().getTime() + (audioObj.duration * 1000) + (secFollowUp * 1000);
                        }
    
                        // Show what is actually playing
                        console.log("Playing "+ audioObj.key + " after " + audioObj.delayAfter + " seconds");
                        console.log("Stage: "+ audioObj.stage);
    
                    } // if(now > time)
    
                }, 100); // playInterval, The interval duration of 0,1 second is to ensure accuracy if you set a duration or "delayAfter" using float seconds like 2.5.
    
            } // playAudio
    
            // Preload all audios to make sure they are available since timing is sometimes short.
            var preloadArr = [];
    
            for(i = 0; i < intro_playList.length; i++){
    
                var audioElementPreload = document.createElement('audio');
                audioElementPreload.src = audioSrc + intro_playList[i].key + audioType;
                audioElementPreload.load();
                preloadArr.push(audioElementPreload);
            }
    });
    
    var audioSrc = "https://www.bessetteweb.com/SO/45704602/";    // Path to the audio files
    var audioType = ".mp3";
    
    var default_numFollowUp = 4;  // default number of random question, if user this used the dropdown
    var default_secFollowUp = 10;  // default delai (seconds) between random questions, if user this used the dropdown
    
    // Create the audio element
    var audioElement = document.createElement('audio');
    
    // Analyse the scenario by getting indexes in different arrays.
    var endingArr = [];
    var runThoughArr = [];
    var randomArr = [];
    for(i=0;i<intro_playList.length;i++){
      if(intro_playList[i].stage == "ending"){ endingArr.push(i); }
      if(intro_playList[i].runThough){ runThoughArr.push(i); }
      if(intro_playList[i].random){ randomArr.push(i); }
    }
    
    // Get an audio and play it
    function getAudio(n){
      audioElement.src = audioSrc + intro_playList[n].key + audioType;
      audioElement.load();
      audioElement.play();
      console.log(JSON.stringify(intro_playList[n]));
      return intro_playList[n]; // return the object
    }
    
    // Onload indexes.
    var playIndex = 0;
    var randomplayCount = 0;
    var endingCount = 0;
    
    // Interval variables
    var playInterval;
    var time = new Date().getTime();
    
    
    // Function to start the interval check to play a file
    function playAudio(){
    
      // User inputs
      var numFollowUp = parseInt($("#numFollowUp").val() );
      if(isNaN(numFollowUp)){ numFollowUp = default_numFollowUp;}
    
      var secFollowUp = parseInt($("#secFollowUp").val() );
      if(isNaN(secFollowUp)){  secFollowUp = default_secFollowUp; }
    
      // Ensure no other interval runs...
      clearInterval(playInterval);
    
      // Set the interval.
      playInterval = setInterval(function(){
    
        var now = new Date().getTime();
        if(now > time){
    
          // First "run throught" plays all the audios in order, except the "ending" ones.
          if( playIndex < runThoughArr.length){
            var audioIndex = playIndex;
            console.log("==================================================================== RUN TROUGH!");
    
            // Increment index for next iteration
            playIndex++;
          }
    
          // Random!
          else if( playIndex >= runThoughArr.length && randomplayCount < numFollowUp ){
            //var audioIndex = getRandomIndex();
            var audioIndex = randomArr[ Math.floor(Math.random()*(randomArr.length-1)) ];
            console.log("==================================================================== RANDOM! ("+randomplayCount+"/"+numFollowUp+")");
    
            // Increment index for next iteration
            randomplayCount++;
          }
    
          // Ending
          else if( randomplayCount >= numFollowUp && endingCount < endingArr.length ){
            var audioIndex = endingArr[endingCount];
            console.log("==================================================================== ENDING!");
    
            // Increment index for next iteration
            endingCount++;
          }
    
          // STOP INTERVAL!
          if( endingCount == endingArr.length ){
            clearInterval(playInterval);
            console.log("=========== Interval stopped.");
    
            // Reset onload indexes.
            playIndex = 0;
            randomplayCount = 0;
            endingCount = 0;
          }
    
          // Prepare the audio file.
          var audioObj = getAudio(audioIndex);
    
          if(audioObj.stage == "intro"){
            // set a new trigger time
            time = new Date().getTime() + (audioObj.duration * 1000) + (audioObj.delayAfter * 1000);
          }else{
            time = new Date().getTime() + (audioObj.duration * 1000) + (secFollowUp * 1000);
          }
          // Show what is actually playing
          console.log("Playing "+ audioObj.key);
          console.log("Stage: "+ audioObj.stage);
    
        } // if(now > time)
    
      },100); // interval
    
    } // playAudio()
    
    // Preload all audios to make sure they are available since timing is sometimes short.
    var preloadArr = [];
    for(i=0;i<intro_playList.length;i++){
      var audioElementPreload = document.createElement('audio');
      audioElementPreload.src = audioSrc + intro_playList[i].key + audioType;
      audioElementPreload.load();
      preloadArr.push(audioElementPreload);
    }
    
    // Play button handler
    $("#play").on("click", playAudio);