我正在尝试播放音频阵列列表序列,但是有一些条件。 用户首先会为随机问题和每个问题之间的持续时间选择下拉菜单。 然后单击播放按钮运行。

当playIndex增至3时,其持续时间开始取决于用户的下拉菜单。 但这给了我不确定的信息。 但是当playIndex = 4时,它可以正常工作。为什么呢?

当playIndex增至8(播放第7个元素后)并且随机问题的数量大于4时,它将调用random函数为playIndex和play生成随机值(4到7)。 但是我的代码只执行一次。 为什么这样?

我需要做的时间与用户想要的一样(下拉'numFollowUp')并且减去4,因为在第一轮中,代码从元素0到7播放,而我不需要计算前4次(元素4)至7)。

播放所有随机问题后,playIndex应该为

如果让您感到困惑,请告诉我。 非常感谢你的帮助。

<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);
        }
});

#1楼 票数:1 已采纳

我完全从头开始重写了您的代码…… 第二次!
我认为这确实是一个不错的项目……也是不错的编码挑战。

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

  1. 超过了超时延迟的音频长度被削减了...两个文件之间没有超时。
  2. 即使音频不长于延迟,文件长度也会部分“吸收”该延迟。
  3. 更改“方案”(例如通过添加更多随机问题)需要在代码中使用t周。
  4. 在随机“阶段”之后播放的“结束”需要为每个结束文件嵌套setTimeout() ,这太可怕了。

因此,我认为使用setInterval()来检查“实际时间”与脚本在每次迭代中设置开始下一个音频的时间(基于文件持续时间+延迟)的时间相比……是一个好主意。

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

CodePen

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);

#2楼 票数:1

如果正确地解释问题,你可以使用.queue() .promise() .then()和重复调度执行完整阵列上的动作, while循环.splice().splice()Math.random()Math.floor()获取原始数组的N个元素作为新数组,从切片的数组中选择一个伪随机元素,重复原始任务,然后使用原始数组重复任务以结束过程。

 var arr = [...Array(9).keys()], currentRandomTracks = [], notify = function notify(message) { $("body").append(message + "<br>") } var player = $({}); function playTracks(tracks) { return player.queue("tracks", $.map(tracks, function(el, index) { return function(next) { return new Promise(function(resolve) { // do stuff setTimeout(function() { resolve(el); }, Math.floor(Math.random() * 750)) }).then(function(value) { notify(value); // call `next` when synchronous or asynchronous task completes return next() }) } })).dequeue("tracks").promise("tracks") } function handleRandomQueue() { // select N elements from `arr` if (currentRandomTracks.length === 0) { currentRandomTracks = arr.slice(6); var randomTracks = []; // select random elements from `currentRandomTracks` while (currentRandomTracks.length) { randomTracks[randomTracks.length] = currentRandomTracks .splice(Math.floor(Math.random() * currentRandomTracks.length), 1) .pop(); } notify("original playlist done playing, " + "starting playing random indexes " + currentRandomTracks.toString() + " next" ); return playTracks(randomTracks) } else { notify("random playback playlist complete, " + "stating playing original playlist " + arr.toString() ); // perform task on original array, again return playTracks(arr); } } function handleRepeatOriginalQueue() { notify("original and random playlist playback complete"); return playTracks(arr); } function handleQueueComplete() { // procedure complete notify("original, random, " + "and second original playlist playback complete" ); } $(function() { playTracks(arr) .then(handleRandomQueue) .then(handleRepeatOriginalQueue) .then(handleQueueComplete) .fail(function err(err) { console.error(err) }) }) 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <body></body> 

  ask by Johnny translate from so

未解决问题?本站智能推荐:

2回复

如何使用javascript随机播放音频标签中的多个音频文件?

单击链接时,我试图随机播放文件声音。 我有多个链接,当单击这些链接时,它们当前在每个链接上播放一种声音。 我添加了另一个来源: 在jQuery中,我读取文件是这样的: 我的问题是单击链接时如何从音频标签随机播放文件源。
1回复

在js/jquery中从对象数组播放音频文件

我正在制作一个对象来将控件包装在html5音频元素的实例周围。 为了进行测试,我制作了一个类似这样的对象(为简化可读性)。 我有一个数组,保存此AudioObject的实例。 然后,当创建新的AudioObjects时,我将它们添加到数组中。 我有一个可以延迟播放AudioObjec
2回复

使用Jquery或/和javascript检测网页中是否正在播放任何视频?

如果两个视频之一正在播放并进行控制台,则检测到我的目的。 我尝试构建动态视频播放检测。 当用户单击播放按钮时,我读取了视频ID,然后使用该视频ID为addEventListner为其分配了视频,但它仅与我的第一个视频一起使用。 第二个视频不起作用, 我怎么了 http://jsfi
1回复

如何在HTML5音频中控制播放和暂停

我正在创建一个既没有播放列表又没有播放列表的音乐播放器。 单击播放按钮或单击播放列表中的曲目之一时,音乐开始播放。 当时只能播放一首曲目。 这是我的代码: DEMO $.fn.MusicPlayer = function(options) { var settings = $.e
1回复

如何在HTML5中实现简单的音频播放列表

我有mp3格式和ogg格式的文件列表(每种格式都有)。 我希望有一个播放列表,就像正常播放列表一样,它可以从一首歌转到另一首歌。 而且还允许用户单击想要重新启动播放的任何歌曲。 我想学习如何在HTML5中使用可自定义的外观并使用尽可能少的外部语言来构建它。 (例如,没有Flash ..
1回复

如何在Android设备中自动播放音频?

我知道Android设备不支持自动播放音频。 但我遇到了一个网站,该网站会在Android设备中自动播放音乐。 http://kelvinh.studio/ 那么谁能告诉我他的情况呢?
1回复

使用HTML5和javascript在背景中顺序或随机播放多个音频文件

我正在尝试播放3个在后台运行的音频文件(以后可能还会有更多声音)。 在这一点上,我只是想按顺序播放它们,并在播放最后一个音频文件时将其循环回到第一个音频文件。 我相信我已经尝试了几乎所有的解决方案或功能组合,但我无法使其正常工作。 我遇到两个问题之一: 如果我尝试对存储在数组中的每个
4回复

在InternetExplorer中播放HTML音频吗?

我有这个HTML和JS,我正在用来播放一些音频: 的HTML 的JavaScript 由于它无法识别“播放”方法,因此在IE 8中失败了。 是否存在使用相同代码的跨浏览器的jQuery音频播放方法? 我宁愿这样做,然后尝试回退到某些特定于IE的解决方案(因为特定于浏览器的解决方案