在 HTML/Javascript 中播放随机音频答案

【问题标题】：Playing random audio in HTML/Javascript在 HTML/Javascript 中播放随机音频
【发布时间】：2012-12-24 06:06:38
【问题描述】：

我正在尝试弄清楚如何使用 jquery 连续播放随机音频片段，而不会让它们在 HTML 页面上重叠。我有在计时器上播放随机声音片段的代码，但有时它们会重叠，有时声音之间会有停顿。我查看了ended 和其他事件监听器，但我真的不知道我在做什么。这是我的代码的一部分：

<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 我有很多声音片段，但我只是在上面显示两个以供参考。

【问题讨论】：

当人们要求 jQuery 时，我喜欢它。介意我给你一个纯 JS 的答案吗？
嘿@Khez，那太棒了，我真的很感激。
@Khez 你太烂了，没有足够的 jQuery。 i.stack.imgur.com/ssRUr.gif
@Shmiddty aww 伙计，几个月前我失去了那个链接，+1 还给它：D

标签： javascript jquery html audio event-listener

【解决方案1】：

所以我涉猎了一下，这是一个完整的纯 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'
]);

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

感谢您的预加载建议。好东西。