每次在javascript循環上隨機數

Question

我試圖使用howler.js播放隨機音頻文件，然後重新選擇一個不同的隨機文件超時它循環。我讓它播放和循環，但每次循環時都使用相同的文件。唯一的隨機選擇是在初始加載。

這是我有：

var number = Math.floor((Math.random() * 3) + 1); 
    var sound1 = new Howl({ 
     src: ['audio/'+number+'.wav'], 
     autoplay: false, 
     loop: false, 
     volume: 1.0, 
    onend: function() { 
    sound1.play() 
    } 
    }); 

sound1.play() 

這愉快地播放的音頻從文件夾3個隨機WAV文件之一，但只有在負載隨機選擇。同一個文件然後循環無限。

很新的JavaScript，所以任何幫助讚賞。謝謝。

Answer 1

這個怎麼樣？

var sounds = []; 

function playRandom() { 
    // play a random member of sounds 
    sounds[Math.floor(Math.random() * sounds.length) + 1].play(); 
} 

// load all the sounds ahead of time  
var numberOfSounds = 3; 
for (var i = 0; i < numberOfSounds; i++) { 
    sounds.push(new Howl({ 
    src: ['audio/' + i + '.wav'], 
    autoplay: false, 
    loop: false, 
    volume: 1.0, 
    onend: function() { 
     // when one sound ends, play a new random one 
     playRandom(); 
    }, 
    })); 
} 

// kick things off with the first random sound  
playRandom(); 

UPDATE

回答下面的評論，這裏的發揮每個重複聲音四次移動到下一個隨機的聲音之前的一種方式：

var sounds = []; 

function playRepeatedly(sound, howManyTimes, callback) { 
    // this is similar to using `onend` when you create the sound 
    sound.once('end', function() { 
    // if there are more repetitions to go 
    if (howManyTimes > 1) { 
     // play one less time 
     playRepeatedly(sound, howManyTimes - 1, callback); 
    } else { 
     // if we're all done, call the callback 
     callback(); 
    } 
    }); 

    sound.play(); 
} 

function playRandom() { 
    // pick a random sound 
    var sound = sounds[Math.floor(Math.random() * sounds.length) + 1]; 

    // play it 4 times and then play a new random sound 
    playRepeatedly(sound, 4, function() { 
    // this is the callback, which just plays a new random sound 
    playRandom(); 
    }); 
} 

// load all the sounds ahead of time  
var numberOfSounds = 3; 
for (var i = 0; i < numberOfSounds; i++) { 
    sounds.push(new Howl({ 
    src: ['audio/' + i + '.wav'], 
    autoplay: false, 
    loop: false, 
    volume: 1.0, // no more `onend` here 
    })); 
} 

// kick things off with the first random sound  
playRandom(); 

Answer 2

我從來沒有使用過howler.js，但你可以再次調用它。只需創建一個函數，當聲音停止播放時被調用：

function playSound(number) { 
    var num = generateRandomNumber(number); 
    var sound1 = new Howl({ 
     src: ['audio/' + num + '.wav'], 
     autoplay: false, 
     loop: false, 
     volume: 1.0, 
     onend: function() { 
      playSound(num) 
     } 
    }); 

    sound1.play() 
} 

function generateRandomNumber(number) { 
    var num = Math.floor((Math.random() * 3) + 1); 
    // if it's the same number as in the previous round, get a new number 
    while (number == num) { 
     return generateRandomNumber(number); 
    } 
    return num; 
} 

Answer 3

您需要更新值號碼並更改src屬性Howl ins或者只是創建一個新的。類似下面的東西應該可以工作：

function createHowl() { 
    var number = Math.floor((Math.random() * 3) + 1); 
    return new Howl({ 
      src:  ['audio/' + number + '.wav'], 
      autoplay: false, 
      loop:  false, 
      volume: 1.0, 
      onend: function() {createHowl().play()} 
    }); 
} 

createHowl().play(); 

請注意，有33％的機會連續播放兩次相同的聲音。

Answer 4

首先，您需要在服務器上進行測試。我使用了chrome49。 我的測試代碼如下：

var obj = new Options(); 
    var sound1 = new Howl(new Options()); 
    sound1.play(); 
    function Options() 
    { 
     var number = Math.floor((Math.random() * 3) + 1); 
     this.src = ['audio/'+number+'.wav']; 
     this.autoplay=false; 
     this.loop=false; 
     this.volume=1.0; 
     this.onend = function(e) 
     {  
      new Howl(new Options()).play(); 
     } 
    } 

如果瀏覽器錯誤「未捕獲的（以諾）拋出：DOMException：無法解碼音頻數據」，你的文件格式不正確。