jquery - Playing random audio in HTMLJavascript - Stack Overflow|江阴雨辰互联

I am trying to figure out how to continuously play random audio sound bites, one after another without having them overlap on an HTML page using jquery. I have code that plays random sound bites on a timer, but sometimes they overlap and sometimes there is a pause in between the sounds. I had looked into ended and other EventListeners but I really have no idea what I am doing. Here is a portion my code:

<html>
    <audio id="audio1">
        <source src="cnn.mp3"></source>
    </audio>
    <audio id="audio2">
        <source src="sonycrackle.mp3"></source>
    </audio>

    <script src=".min.js"></script>
    <script type="text/javascript">
            $(document).ready(function(){
                    $('audio').each(function(){
                            this.volume = 0.6;
                    });
            var tid = setInterval(playIt, 2000);
            });

            function playIt() {
                    var n = Math.ceil(Math.random() * 2);
                    $("#audio"+n).trigger('play');
            };

Is there a way to just continuously play these sounds bites one after another right after the previous sound plays? FWIW I have many sound bites but I am just showing two above for reference.

<html>
    <audio id="audio1">
        <source src="cnn.mp3"></source>
    </audio>
    <audio id="audio2">
        <source src="sonycrackle.mp3"></source>
    </audio>

    <script src="http://ajax.googleapis./ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
            $(document).ready(function(){
                    $('audio').each(function(){
                            this.volume = 0.6;
                    });
            var tid = setInterval(playIt, 2000);
            });

            function playIt() {
                    var n = Math.ceil(Math.random() * 2);
                    $("#audio"+n).trigger('play');
            };

Is there a way to just continuously play these sounds bites one after another right after the previous sound plays? FWIW I have many sound bites but I am just showing two above for reference.

Share Improve this question asked Jan 9, 2013 at 22:57 ajt 1,3813 gold badges13 silver badges30 bronze badges

2 I love it when people ask for jQuery when it's full on JavaScript. Mind if I give you a pure JS answer in a bit? – Khez Commented Jan 9, 2013 at 23:03
Hey @Khez, that would be awesome, and I would really appreciate it. – ajt Commented Jan 9, 2013 at 23:08
1 @Khez you suck, not enough jQuery. i.sstatic/ssRUr.gif – Shmiddty Commented Jan 9, 2013 at 23:40
@Shmiddty aww man, I lost that link a couple of months back, +1 for giving it back :D – Khez Commented Jan 9, 2013 at 23:43

Add a ment |

2 Answers 2

Sorted by: Reset to default 2

So I dabbled a bit, here's a full pure JavaScript solution.

Should be cross-browser, haven't tested (/lazy). Do tell me if you find bugs though

var collection=[];// final collection of sounds to play
var loadedIndex=0;// horrible way of forcing a load of audio sounds

// remap audios to a buffered collection
function init(audios) {
  for(var i=0;i<audios.length;i++) {
    var audio = new Audio(audios[i]);
    collection.push(audio);
    buffer(audio);
  }
}

// did I mention it's a horrible way to buffer?
function buffer(audio) {
  if(audio.readyState==4)return loaded();
  setTimeout(function(){buffer(audio)},100);
}

// check if we're leady to dj this
function loaded() {
  loadedIndex++;
  if(collection.length==loadedIndex)playLooped();
}

// play and loop after finished
function playLooped() {
  var audio=Math.floor(Math.random() * (collection.length));
  audio=collection[audio];
  audio.play();
  setTimeout(playLooped,audio.duration*1000);
}

// the songs to be played!
init([
  'http://static1.grsites./archive/sounds/background/background005.mp3',
  'http://static1.grsites./archive/sounds/background/background006.mp3',
  'http://static1.grsites./archive/sounds/background/background007.mp3'
]);

Some quick suggestions is add the attribute preload="auto" to the audio element and change the script to be $(window).onload instead of document ready. Document ready fires when html is in place but not necessarily when audio and other assets (like images) have loaded.

You could also look into using the AudioBuffer Interface in the new Web Audio API, it's described as "this interface represents a memory-resident audio asset (for one-shot sounds and other short audio clips)." which sounds like what you need. I believe part of the issues you're having (random pauses/delays/sound glitches with the audio element) are one of the reasons why it's being developed.

jquery - Playing random audio in HTMLJavascript - Stack Overflow

2 Answers 2

发表回复

评论列表（0条）

联系我们

400-800-8888

jquery - Playing random audio in HTMLJavascript - Stack Overflow

2 Answers 2

相关推荐