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

我从未使用过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 2

这个怎么样？

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

<强>更新

回答下面的评论，这里有一种方法可以重复播放每个声音四次，然后再转到下一个随机声音：

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 3

您需要更新 number 的值并更改 Howl 实例的 src 属性，或者只创建一个新属性。以下内容应该有效：

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

如果浏览器错误“Uncaught（in promise）DOMException：无法解码音频数据”，则表示您的文件格式不正确。

每次javascript循环随机数

4 个答案: