<div id="datsGood" style="display:inline-block;padding:5px;max-width:100%;font-size:40px;user-select:none;box-sizing:border-box;">*Click Here x25*</div>
var arr = {
"0": "0_scoo.wav",
"1": "1_mmbap.wav",
"2": "2_beep.wav",
"3": "3_bop.wav",
"4": "4_booo.wav",
"5": "5_baa.wav",
"6": "6_bebeda.wav",
"7": "7_bo.wav",
"8": "8_baa.wav",
"9": "9_be.wav",
"10": "10_ba.wav",
"11": "11_boowa.wav",
"12": "12_bababa.wav",
"13": "13_bee.wav",
"14": "14_babphwa.wav",
"15": "15_b.wav",
"16": "16_brrrr.wav",
"17": "17_bababa.wav",
"18": "18_tssk.wav",
"19": "19_bubuda.wav",
"20": "20_be.wav",
"21": "21_ba.wav",
"22": "22_booowabadabadowa.wav",
"23": "23_ba.wav",
"24": "24_boooooWAHHHHH.wav"
};
arr = Object.keys(arr).map((idx)=>{
let fileName = arr[idx];
let url = "https://bepis.co/ReenNoises/" + fileName;
let match = fileName.match(/\d+_(\w+)\.wav/i);
let audio = new Audio(url);
audio.preload = "auto";
//Force load
let v = audio.volume;
audio.volume = 0;
audio.play();
setTimeout(()=>{
audio.pause();
audio.currentTime = 0;
audio.volume = v;
}, 200);
console.log(match);
return {
fileName,
name: match[1],
audio
};
});
var audioPlaying = false;
var audioQueue = [];
function playNext(audio){
if(audio && audio instanceof Audio) {
audioQueue.push(audio);
}
if(audioPlaying) {
return;
}
else if(audioQueue.length > 0){
let toPlay = audioQueue.shift();
toPlay.addEventListener("ended", ()=>{
audioPlaying = false;
playNext();
});
toPlay.play();
audioPlaying = true;
}
}
var fullStr = "";
let stopPrev = undefined;
function incrementLoader(str){
let $el = $("#datsGood");
fullStr += str+"­";
$el.html(fullStr);
$el.css({
"background-color": "transparent",
"color": "black"
});
rando = Math.floor(Math.random()*5);
if(rando === 0) {
$el.css({
"background-color": "#FF4422",
"color": "#FFFFFF"
});
}
else if(rando === 1) {
$el.css({
"background-color": "transparent",
"color": "black"
});
}
else if(rando === 2) {
if(stopPrev) {
stopPrev();
}
let startTime = Date.now();
let endTime = Date.now()+300;
let i = setInterval(()=>{
let f = (Date.now() - startTime) / 300;
f = Math.min(Math.max(f,0),1);
f = 1-Math.pow(f, 2);
$el.css({
"transform": "rotate(" + 720*f + "deg)"
});
},15);
stopPrev = ()=>clearInterval(i);
}
else if(rando === 3) {
if(stopPrev) {
stopPrev();
}
let startTime = Date.now();
let endTime = Date.now()+500;
let i = setInterval(()=>{
let f = (Date.now() - startTime) / 500;
f = Math.min(Math.max(f,0),1);
f2 = Math.sin(f*Math.PI*2*5); //5 oscs over 500ms
f2 *= 1-f; //linearly decrease amplitude
f2 *= 35;
$el.css({
"transform": "translateX(" + f2 + "px)"
});
},15);
stopPrev = ()=>clearInterval(i);
}
else if(rando === 4) {
if(stopPrev) {
stopPrev();
}
let startTime = Date.now();
let endTime = Date.now()+500;
let i = setInterval(()=>{
let f = (Date.now() - startTime) / 500;
f = Math.min(Math.max(f,0),1);//0 => 1
f2 = Math.sin(f*Math.PI*2*5)/2+0.5; //5 oscs over 500ms
f2 *= 20;
f2 += 20;
$el.css({
"font-size": f2 + "px"
});
},15);
stopPrev = ()=>clearInterval(i);
}
}
var idx = 0;
var str = "";
$(window).on("click", ()=>{
if(!arr[idx]) {
return;
}
playNext(arr[idx].audio);
incrementLoader(arr[idx].name);
idx++;
});
View Compiled
This Pen doesn't use any external CSS resources.