<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+"&shy;";
  $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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js