-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
1 lines (1 loc) · 5.77 KB
/
index.html
1
<!doctypehtml><html lang=en><link href=images/dragonhead.ico rel=icon><title>The Rap App</title><link href=css/style.min.css rel=stylesheet><link href="//fonts.googleapis.com/css?family=Roboto+Condensed"rel=stylesheet><body style=background-color:#000><div id=mp3_player><div id=audio_box></div><canvas id=analyzer_render></canvas></div><img alt=Drake height=270 id=drake src=images/drake-black-background(newest).png> <img alt=Cole height=340 id=cole src=images/j-cole-black-background(new).png> <img alt=Kanye height=270 id=kanye src=images/kanye-black-background.png> <img alt=Kendrick height=255 id=kendrick src=images/kendrick-black-background(new).png><p><span id=for-mobile></span> <span id=directive>Hey, welcome to the Rap App! To play some sick beats, click START.</span><div id=final-word>[ <i>Say something, please!</i> ]</div><div style=text-align:center><span id=typed></span></div><div id=start><button type=button>Start</button></div><div id=mobi-drake></div><div id=mobi-cole></div><script src=https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js></script><script>var canvas,ctx,source,context,analyser,fbc_array,bars,bar_x,bar_width,bar_height,freestyleMP3="rap_app_instrumentals/freestyle_rap.mp3",moneyTreesMP3="rap_app_instrumentals/money_trees.mp3",backToBackMP3="rap_app_instrumentals/back_to_back.mp3",slowMP3="rap_app_instrumentals/slow.mp3",mediumMP3="rap_app_instrumentals/medium.mp3",audio=new Audio;function beat(e){switch(e){case"Kendrick":$("#directive").text("If I'm gonna tell a real story, I'm gonna start with my name."),audio.src=-1<audio.src.indexOf(moneyTreesMP3)?freestyleMP3:moneyTreesMP3;break;case"Drake":$("#directive").text("My pain, you can experience through the rhyming, boy."),audio.src=-1<audio.src.indexOf(backToBackMP3)?freestyleMP3:backToBackMP3;break;case"Cole":$("#directive").text("This is my canvas... I'mma paint it how I want it, baby."),audio.src=-1<audio.src.indexOf(slowMP3)?freestyleMP3:slowMP3;break;case"Kanye":$("#directive").text("Who else you know been hot this long?"),audio.src=-1<audio.src.indexOf(mediumMP3)?freestyleMP3:mediumMP3;break;default:audio.src=freestyleMP3}audio.paused&&(audio.play(),startButton.innerHTML='<button type="button">Stop</button>')}audio.src=freestyleMP3,audio.controls=!0,audio.loop=!0,audio.autoplay=!1,window.addEventListener("load",initMP3Player,!1),$("#drake").click(function(){beat("Drake")}),$("#cole").click(function(){beat("Cole")}),$("#kanye").click(function(){beat("Kanye")}),$("#kendrick").click(function(){beat("Kendrick")});var timesStarted=0;function initMP3Player(){startButton=document.getElementById("start"),startButton.addEventListener("click",function(){if(audio.paused){if(0==timesStarted){try{context=new webkitAudioContext}catch(e){context=new AudioContext}analyser=context.createAnalyser(),null!=(canvas=document.getElementById("analyzer_render"))&&(ctx=canvas.getContext("2d"),(source=context.createMediaElementSource(audio)).connect(analyser),analyser.connect(context.destination),frameLooper())}2<++timesStarted?$("#directive").text("You know what to do, bro. Show 'em what you've got."):$("#directive").text("You best be spitting some savage lines right now."),audio.play(),startButton.innerHTML='<button type="button">Stop</button>'}else $("#directive").text("What!? Don't be quitting on me, man."),audio.pause(),startButton.innerHTML='<button type="button">Start</button>'})}function frameLooper(){try{window.webkitRequestAnimationFrame(frameLooper)}catch(e){window.requestAnimationFrame(frameLooper)}fbc_array=new Uint8Array(analyser.frequencyBinCount),analyser.getByteFrequencyData(fbc_array),ctx.clearRect(0,0,canvas.width,canvas.height),ctx.fillStyle="#00CCFF",bars=100;for(var e=0;e<bars;e++)bar_x=3*e,bar_width=2,bar_height=-fbc_array[e]/2,ctx.fillRect(bar_x,canvas.height,bar_width,bar_height)}var generateMobileView=function(){$(window).width()<=1e3&&($("#drake").remove(),$("#cole").remove(),$("#mobi-drake").prepend('<img id="drake" src="images/drake-black-background(newest).png" alt="Drake" height="280" />'),$("#mobi-cole").prepend('<img id="cole" src="images/j-cole-black-background(new).png" alt="Cole" height="340" />'),$("#mobi-drake").click(function(){beat("Drake")}),$("#mobi-cole").click(function(){beat("Cole")}),$("#mp3_player").remove(),$("#for-mobile").html("<br><br><br><br><br><br><br><br><br><br><br>"),$("p").css({"font-size":"32px"}),$("#final-word").css({"font-size":"32px"}))};generateMobileView(),$(window).resize(function(){generateMobileView()})</script><script src=js/typed.min.js></script><script src=js/trie.min.js></script><script src=js/mobypron.min.js></script><script src=js/rhyme_lookup.min.js></script><script>var currentID=Number.MIN_SAFE_INTEGER,rhymes=["Just start rapping!^2500"],updated=!1,newTyped=function(e){$("#sos"+e).typed({strings:rhymes,typeSpeed:0,backDelay:500,callback:function(){updated?updated=!1:rhymes=["...^2000"];var e=(currentID+=1).toString();document.getElementById("typed").innerHTML='<span id="sos'+e+'"></span>',newTyped(e)}})},newSpeechRecognition=function(){var r;try{r=new webkitSpeechRecognition}catch(e){r=new SpeechRecognition}return r.onresult=function(e){if(e.results[e.results.length-1].isFinal){var n=e.results[e.results.length-1][0].transcript,t=n.substring(n.lastIndexOf(" ")+1);document.getElementById("final-word").innerHTML="[ Your previous line: <i>"+n+"</i> ]",rhymes=-1<n.indexOf("Oliver")?["Hi, Oliver. How goes it?^3000"]:-1<n.indexOf("cigar")?["Cigar? ...or SAGANG?^3000"]:["Rhymes: "+lookup(t).toString()+"^3000"],updated=!0,r.stop()}},r.onerror=function(e){$("#directive").text("[SPEECH RECOGNITION ERROR] : "+e.error)},r.onend=function(){(recognition=newSpeechRecognition()).start()},r},recognition=newSpeechRecognition();recognition.start(),document.getElementById("typed").innerHTML='<span id="sos'+currentID.toString()+'"></span>',newTyped(currentID.toString())</script>