3

我试图弄清楚如何连续播放随机音频片段，一个接一个，而不用让它们在使用 jquery 的 HTML 页面上重叠。我有在计时器上播放随机声音片段的代码，但有时它们会重叠，有时声音之间会有停顿。我已经研究过ended和其他 EventListeners 但我真的不知道我在做什么。这是我的代码的一部分：

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

    <script src="http://ajax.googleapis.com/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');
            };

有没有办法在上一个声音播放后立即连续播放这些声音？FWIW 我有很多声音片段，但我只是在上面显示两个以供参考。

4

2 回答 2

2

所以我涉猎了一下，这是一个完整的纯 JavaScript 解决方案。

应该是跨浏览器的，没有测试过（/lazy）。如果你发现错误，请告诉我

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.com/archive/sounds/background/background005.mp3',
  'http://static1.grsites.com/archive/sounds/background/background006.mp3',
  'http://static1.grsites.com/archive/sounds/background/background007.mp3'
]);
于 2013-01-09T23:42:15.713 回答
0

一些快速的建议是将属性 preload="auto" 添加到音频元素并将脚本更改为 $(window).onload 而不是文档就绪。Document ready 在 html 就位时触发，但不一定在音频和其他资产（如图像）已加载时触发。

您还可以考虑在新的 Web 音频 API 中使用 AudioBuffer 接口，它被描述为“此接口代表内存驻留的音频资产（用于一次性声音和其他短音频剪辑）。” 这听起来像你需要的。我相信您遇到的部分问题（音频元素的随机暂停/延迟/声音故障）是开发它的原因之一。

在这里阅读更多：

https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html#AudioBuffer

不幸的是，据说在接下来的 6（ish）个月内，只有 Chrome 和最新的 Safari 支持 Firefox 支持，而且还没有关于 IE 支持的消息。

于 2013-01-09T23:02:56.100 回答