Compressed all relevant files

ohjay · Oct 29, 2015 · 7d38b42 · 7d38b42
1 parent 73894a4
commit 7d38b42
Show file tree

Hide file tree

Showing 11 changed files with 3,393 additions and 61,351 deletions.
diff --git a/css/style.min.css b/css/style.min.css
diff --git a/images/drake-black-background(newest).png b/images/drake-black-background(newest).png
diff --git a/images/j-cole-black-background(new).png b/images/j-cole-black-background(new).png
diff --git a/images/kanye-black-background.png b/images/kanye-black-background.png
diff --git a/images/kendrick-black-background(new).png b/images/kendrick-black-background(new).png
diff --git a/index-nm.html b/index-nm.html
@@ -0,0 +1,253 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link rel="icon" href="images/dragonhead.ico">
+    <title>The Rap App</title>
+
+    <link rel="stylesheet" href="css/style.min.css" />
+    <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
+</head>
+<body style="background-color: #000000">
+    <!-- [ BEGIN MAIN BODY ] -->
+    <div id="mp3_player">
+        <div id="audio_box"></div>
+        <canvas id="analyzer_render"></canvas>
+    </div>
+
+    <!-- Images -->
+    <img id="drake" src="images/drake-black-background(newest).png" alt="Drake" height="270"/>
+    <img id="cole" src="images/j-cole-black-background(new).png" alt="Cole" height="340"/>
+    <img id="kanye" src="images/kanye-black-background.png" alt="Kanye" height="270"/>
+    <img id="kendrick" src="images/kendrick-black-background(new).png" alt="Kendrick" height="255"/>
+
+    <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>
+    </p>
+
+    <!-- Buttons -->
+    <div id="start">
+    	<button type="button">Start</button>
+    </div>
+
+    <div id="mobi-drake"></div>
+    <div id="mobi-cole"></div>
+
+    <!-- [ END MAIN BODY ] -->
+    <!-- Scripts -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+    <script>
+        // Song paths
+        var 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';
+
+        // Create a new Audio object and customize it a bit
+        var audio = new Audio();
+        audio.src = freestyleMP3;
+        audio.controls = true;
+        audio.loop = true;
+        audio.autoplay = false;
+
+        // Variables used by the Analyzer
+        var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;
+
+        // Initialize the MP3 player after the page loads all of the HTML
+        window.addEventListener("load", initMP3Player, false);
+
+        function beat(name) {
+            switch (name) {
+                case "Kendrick":
+                    $('#directive').text("If I'm gonna tell a real story, I'm gonna start with my name.");
+                    audio.src = (audio.src.indexOf(moneyTreesMP3) > -1) ? 
+                            freestyleMP3 : moneyTreesMP3;
+                    break;
+                case "Drake":
+                    $('#directive').text("My pain, you can experience through the rhyming, boy.");
+                    audio.src = (audio.src.indexOf(backToBackMP3) > -1) ? 
+                            freestyleMP3 : backToBackMP3;
+                    break;
+                case "Cole":
+                    $('#directive').text("This is my canvas... I'mma paint it how I want it, baby.");
+                    audio.src = (audio.src.indexOf(slowMP3) > -1) ? 
+                            freestyleMP3 : slowMP3;
+                    break;
+                case "Kanye":
+                    $('#directive').text("Who else you know been hot this long?");
+                    audio.src = (audio.src.indexOf(mediumMP3) > -1) ? 
+                            freestyleMP3 : mediumMP3;
+                    break;
+                default:
+                    audio.src = freestyleMP3;
+            }
+
+            if (audio.paused) {
+                audio.play();
+                startButton.innerHTML = '<button type="button">Stop</button>'
+            }
+        }
+
+        $('#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", start);
+
+            function start() {
+                if (audio.paused) {
+                    if (++timesStarted > 2) {
+                        $('#directive').text("You know what to do, bro. Show 'em what you've got.");
+                    } else {
+                        $('#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>';
+                }
+            }
+
+            context = new webkitAudioContext(); // AudioContext object instance
+            analyser = context.createAnalyser(); // AnalyserNode method
+            canvas = document.getElementById('analyzer_render');
+            if (canvas != null) {
+                ctx = canvas.getContext('2d');
+                // Re-route audio playback into the processing graph of the AudioContext
+                source = context.createMediaElementSource(audio); 
+                source.connect(analyser);
+                analyser.connect(context.destination);
+                frameLooper();
+            }
+        }
+
+        // frameLooper() animates any style of graphics you wish to the audio frequency
+        // Looping at the default frame rate that the browser provides (approx. 60 FPS)
+        function frameLooper() {
+            window.webkitRequestAnimationFrame(frameLooper);
+            fbc_array = new Uint8Array(analyser.frequencyBinCount);
+            analyser.getByteFrequencyData(fbc_array);
+            ctx.clearRect(0, 0, canvas.width, canvas.height); // clear the canvas
+            ctx.fillStyle = '#00CCFF'; // color of the bars
+            bars = 100;
+            for (var i = 0; i < bars; i++) {
+                bar_x = i * 3;
+                bar_width = 2;
+                bar_height = -(fbc_array[i] / 2);
+                ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
+            }
+        }
+
+        /* Just some mobile overrides. */
+        var generateMobileView = function() {
+            if ($(window).width() <= 1000) {
+                // Remove and reposition Drake and J. Cole
+                $('#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'); });
+
+                // Remove the visualizer and reposition text
+                $('#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;
+        var rhymes = ["Just start rapping!^2000"];
+        var updated = false;
+
+        var newTyped = function(idStr) {
+            $("#sos" + idStr).typed({
+                strings: rhymes,
+                typeSpeed: 0,
+                backDelay: 500,
+                callback: function() {
+                    if (!updated) {
+                        rhymes = ["...^2000"];
+                    } else {
+                        updated = false;
+                    }
+
+                    currentID += 1;
+                    currIDStr = currentID.toString();
+                    document.getElementById("typed").innerHTML = '<span id="sos' + currIDStr + '"></span>';
+                    newTyped(currIDStr);
+                }
+            });
+        }
+
+        var newSpeechRecognition = function() {
+            var r = new webkitSpeechRecognition();
+
+            r.onresult = function(event) {
+                // Only the final word
+                if (event.results[event.results.length - 1].isFinal) {
+                    var finalPhrase = event.results[event.results.length - 1][0].transcript;
+                    var finalWord = finalPhrase.substring(finalPhrase.lastIndexOf(' ') + 1);
+
+                    document.getElementById("final-word").innerHTML = "[ Your previous line: <i>" + finalPhrase + "</i> ]";
+
+                    // Easter eggs + rhymes (this is where we'll set the response text)
+                    if (finalPhrase.indexOf("Oliver") > -1) {
+                        rhymes = ["Hi, Oliver. How goes it?^3000"];
+                    } else if (finalPhrase.indexOf("cigar") > -1) {
+                        rhymes = ["Cigar? ...or SAGANG?^3000"];
+                    } else {
+                        rhymes = ["Rhymes: " + lookup(finalWord).toString() + "^3000"];
+                    }
+
+                    updated = true;
+                    r.stop();
+                }
+            };
+
+            r.onerror = function(event) {
+                $('#directive').text('[SPEECH RECOGNITION ERROR] : ' + event.error);
+            };
+
+            r.onend = function() {
+                recognition = newSpeechRecognition();
+                recognition.start();
+            };
+
+            return r;
+        };
+
+        var recognition = newSpeechRecognition();
+        recognition.start();
+
+        document.getElementById("typed").innerHTML = '<span id="sos' + currentID.toString() + '"></span>';
+        newTyped(currentID.toString());
+    </script>
+</body>
+</html>