Question

我试图显示图像，播放随机声音，并在随机时间显示随机名称。除了声音，一切都正常。它只是有时播放。.我不知道如何解决它-也许是播放某种声音的另一种方法。有什么建议吗？

document.getElementById('myimage').style.display = 'none';

var mytime = new Array("12000", "22000");
var randomtime = mytime[Math.floor(Math.random() * mytime.length)];

window.setInterval(function(){
    /// call your function here

    //WORKS
    document.getElementById('myimage').style.display = 'block';

    var myarray = new Array("Camilla", "Charlotte", "Beata", "Katrine", "Peppe", "Vorre", "Rene", "Schmidt", "Søholm", "Uffe", "Kromann");
    var random = myarray[Math.floor(Math.random() * myarray.length)];
    document.getElementById("message").innerHTML=random;

    var collection=[];// final collection of sounds to play
    var loadedIndex=0;// horrible way of forcing a load of audio sounds

    function init(audios) {
        for(var i=0;i<audios.length;i++) {
            var audio = new Audio(audios[i]);
            collection.push(audio);
            buffer(audio);
        }
    }

    function buffer(audio) {
        if(audio.readyState==4)
            return loaded();
        setTimeout(function(){buffer(audio)},100);
    }

    function loaded() {
        loadedIndex++;
        if(collection.length==loadedIndex)
            playLooped();
    }

    function playLooped() {
        var audio=Math.floor(Math.random() * (collection.length));
        audio=collection[audio];
        audio.play();
    }

    window.setTimeout(function(){
        document.getElementById("message").innerHTML="THE-CAMEL-YELLING-DRINKING-GAME";
        document.getElementById('myimage').style.display = 'none';
    }, 10000);

    init([
        'sound/camel1.mp3',
        'sound/camel2.mp3',
        'sound/camel3.mp3'
    ]);
},randomtime);

 <img id="myimage" src="dist/images/giphy.gif" width="420" height="236" />
 <h1 id="message">THE-CAMEL-YELLING-DRINKING-GAME</h1>

Answer 1

在您的允许下，我整理了一些代码。（请稍等），我尝试确保何时所有音频文件都准备好播放，然后开始“循环”。每个audio.oncanplay的回调都会增加集合中已加载音频文件的总nr。当此nr等于集合中音轨的总数时，我们称为循环。

var nrReadyToPlay = 0;
var collection = [];
var soundtracks = [
  'sound/camel1.mp3',
  'sound/camel2.mp3',
  'sound/camel3.mp3'
];

function audioReady() {
  nrReadyToPlay++;
  // When nr of ready callbacks calls will be equal to the nr of soundtracks then start loop.
  if (nrReadyToPlay !== soundtracks.length) return;
  startLoop()
}

function init(audios) {
  for (var i = 0; i < audios.length; i++) {
    var audio = new Audio(audios[i]);
    audio.oncanplay = audioReady;
    audio.muted = true;
    collection.push(audio);
  }
}
// returns a random name
function setRandomMessage() {
  var myarray = ["Camilla", "Charlotte", "Beata", "Katrine", "Peppe", "Vorre", "Rene", "Schmidt", "Søholm", "Uffe", "Kromann"];
  var random = myarray[Math.floor(Math.random() * myarray.length)];
  document.getElementById("message").innerHTML = random;
}
// plays a random audio file
function playRandomAudio() {
  var audio = collection[Math.floor(Math.random() * (collection.length))];
  audio.muted = false;
  if (audio.readyState !== 4) console.log('ERROR')
  audio.play();
}

function displayImage() {
  document.getElementById('myimage').style.display = 'block';
}

function startLoop() {
  document.getElementById('myimage').style.display = 'none';

  var mytime = [10000, 12000];
  var randomtime = mytime[Math.floor(Math.random() * mytime.length)];

  window.setInterval(function() {
    displayImage();
    setRandomMessage()
    playRandomAudio();
      <html>
        <head>
          <title>My title</title>
        </head>
        <body>

          <image id="myimage" src="pen.jpg"></image>
          <h1 id="message">THE-CAMEL-YELLING-DRINKING-GAME</h1>


          <script>
            var nrReadyToPlay = 0;
            var collection = [];
            var soundtracks = [
              'sound/camel1.mp3',
              'sound/camel2.mp3',
              'sound/camel3.mp3'
            ];

            function audioReady() {
              nrReadyToPlay++;
              // When nr of ready callbacks calls will be equal to the nr of soundtracks then start loop.
              if (nrReadyToPlay !== soundtracks.length) return;
              startLoop()
            }

            function init(audios) {
              for(var i=0;i<audios.length;i++) {
                var audio = new Audio(audios[i]);
                audio.oncanplay = audioReady;
                audio.muted = true;
                collection.push(audio);
              }
            }
            // returns a random name
            function setRandomMessage() {
              var myarray = ["Camilla", "Charlotte", "Beata", "Katrine", "Peppe", "Vorre", "Rene", "Schmidt", "Søholm", "Uffe", "Kromann"];
              var random = myarray[Math.floor(Math.random() * myarray.length)];
              document.getElementById("message").innerHTML = random;
            }
            // plays a random audio file
            function playRandomAudio() {
              var audio = collection[Math.floor(Math.random() * (collection.length))];
              audio.muted = false;
              if (audio.readyState !== 4) console.log('ERROR')
              audio.play();
            }

            function displayImage() {
              document.getElementById('myimage').style.display = 'block';
            }

            function startLoop() {
              document.getElementById('myimage').style.display = 'none';
            
              var mytime = [3000, 5000];
              var randomtime = mytime[Math.floor(Math.random() * mytime.length)];
            
              window.setInterval(function() {
                displayImage();
                setRandomMessage()
                playRandomAudio(); 
                window.setTimeout(function(){
                    document.getElementById("message").innerHTML="THE-CAMEL-YELLING-DRINKING-GAME";
                    document.getElementById('myimage').style.display = 'none';
                }, 10000);     
              }, randomtime);
            }


            init(soundtracks);

            </script>

        </body>
      </html>

  }, randomtime);
}

init(soundtracks);

 <img id="myimage" src="dist/images/giphy.gif" width="420" height="236" />
<h1 id="message">THE-CAMEL-YELLING-DRINKING-GAME</h1>

在setInterval上播放声音

1 个答案: