Fatal编程技术网
  • javascript/
  • 在HTML/Javascript中播放随机音频

在HTML/Javascript中播放随机音频

javascript jquery html audio

在HTML/Javascript中播放随机音频,javascript,jquery,html,audio,event-listener,Javascript,Jquery,Html,Audio,Event Listener,我试图弄清楚如何使用jquery连续播放随机音频片段，一个接一个地播放，而不让它们在HTML页面上重叠。我有在计时器上播放随机声音片段的代码，但有时它们会重叠，有时声音之间会有停顿。我已经调查了end和其他事件监听器，但我真的不知道我在做什么。以下是我的代码的一部分： <html> <audio id="audio1"> <source src="cnn.mp3"></source> </audio>

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

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


$（文档）.ready（函数（）{
$（'audio'）。每个（函数（）{
该体积=0.6；
});
var tid=设定间隔（playIt，2000年）；
});
函数playIt（）{
var n=Math.ceil（Math.random（）*2）；
$（“#音频”+n）.trigger（'play'）；
};
有没有一种方法可以在前一个声音播放之后，连续播放这些声音？FWIW我有很多声音片段，但我只是展示上面的两个作为参考

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

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

请在此处阅读更多信息：

不幸的是，这是Firefox支持下的Chrome和最新Safari版本，预计在未来6个月内，IE支持方面还没有消息。

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

var集合=[]；//要播放的最终声音集
var loadedIndex=0；//强迫播放大量音频的可怕方式
//将音频重新映射到缓冲集合
函数初始化（音频）{

对于（var i=0；我喜欢人们在jQuery满是JavaScript的时候问它。介意我给你一个纯JS的答案吗？嘿@Khez，那太棒了，我真的很感激你了。@Khez你太差劲了，jQuery还不够。@shmiddy aww伙计，几个月前我失去了那个链接，+1用于返回：谢谢你的预加载建议。很好东西