gpt4 book ai didi

javascript - 在 HTML/Javascript 中播放随机音频

转载 作者:可可西里 更新时间:2023-11-01 13:36:57 25 4
gpt4 key购买 nike

我正在尝试弄清楚如何使用 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 我有很多声音片段,但我只在上面显示两个以供引用。

最佳答案

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

关于javascript - 在 HTML/Javascript 中播放随机音频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14247998/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com