Merge branch 'feature/use-javascript-api' into gh-pages

raphamorim · Apr 16, 2014 · 511d6b8 · 511d6b8
2 parents 038ff39 + 6847ebf
commit 511d6b8
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 44 deletions.
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="pt-br">
 <head>
   <meta charset="utf-8">
   <title>Sound Hunter</title>
@@ -12,7 +12,6 @@
   <meta property="og:title" content="Sound Hunter"/>
   <meta property="og:site_name" content="Sound Hunter"/>
   <meta property="og:url" content="raphamorim.com/sound-hunter/"/>
-  <meta property="og:image" content="img/fb-share.jpg"/>
   <meta property="og:description" content="Increase speed for search, find songs in less than 5 minutes"/>
 
   <!-- CSS -->
@@ -99,17 +98,19 @@
       <h1>Sound <span>Hunter</span></h1>
       <h3>Increase speed for search, finding songs in less than 5 minutes</h3>
 
-        <form class="search" ng-controller="Form">
+        <form class="search">
           <a class="sound">
-            <input id="mic-input" lang="en" type="text" onspeechchange="sayThis(this.value)"
-            onwebkitspeechchange="sayThis(this.value)" x-webkit-speech>
+            <input id="mic-input" lang="pt-br" type="text" />
           </a>
 
           <a class="share">
             <img src='img/share.png' />
           </a>
-
         </form>
+
+        <div class="recording" style="display:none;">
+          <br><p>recording...</p>
+        </div>
     </div>
 
     <div id='results'></div>
@@ -125,7 +126,7 @@ <h3>Increase speed for search, finding songs in less than 5 minutes</h3>
 
   <script src="libs/jquery-2.0.3.min.js"></script>
 
-  <script src='js/stream.js'></script>
-  <script src='js/app.js'></script>
+  <script async src='js/stream.min.js'></script>
+  <script src='js/app.min.js'></script>
 
 </html>
diff --git a/js/app.js b/js/app.js
@@ -1,13 +1,29 @@
-var screenStatus = 0;
+// Speech Functions
+var recognition = new webkitSpeechRecognition();
+recognition.onstart = function() {
+    $('.search').fadeOut(300, function() {
+        $('.recording').fadeIn(300);
+    });
+};
+recognition.onend = function() {
+    $('.recording').fadeOut(300);
+};
+recognition.onresult = function(event) {
+    sayThis(event.results[0][0].transcript);
+};
+
+// Btn to start get audio function
+$('.main').on('click', '.sound', function() {
+    recognition.start();
+});
 
-function sayThis(speech)
-{
-    //Start a animation of loading search
+// Where magic happens :)
+function sayThis(speech) {
 
-    var query = speech
-      , url = 'http://gdata.youtube.com/feeds/api/videos?q=' + query + '&alt=json&max-results=20';
+    var query = speech,
+        url = 'http://gdata.youtube.com/feeds/api/videos?q=' + query + '&alt=json&max-results=20';
 
-    $.getJSON(url, function (data) {
+    $.getJSON(url, function(data) {
 
         var feed = data.feed;
         var entries = feed.entry || [];
@@ -25,66 +41,71 @@ function sayThis(speech)
 
             if (entry.category[1].term === "Music")
                 results += '<p videoid="' + file + '" ><img src="' + thumb + '"/>' +
-                    '<br>' + title.substring(0,60); + '</p>';
+                    '<br>' + title.substring(0, 60); + '</p>';
 
         }
 
         $('footer').hide();
-        $('.search').fadeOut(300, function(){
+        $('.search').fadeOut(300, function() {
             $('#results').fadeIn(2000).css('margin-top', '40px').html(results);
         });
-
     });
-
 }
 
+// Btn to play video
 $("#results").on('click', 'p', function() {
     this.file = $(this).attr("videoid");
     $(this).html('<embed width="250" height="230" src="' + this.file +
         '&autoplay=1&showsearch=0&iv_load_policy=3&fs=0&rel=0&loop=1"' +
-         ' type="application/x-shockwave-flash"></embed>');
+        ' type="application/x-shockwave-flash"></embed>');
 });
 
+// Btn to return to begin
 $("#results").on('click', '#reSearch', function() {
-    $('#results').fadeOut(300, function(){
+    $('#results').fadeOut(300, function() {
         $('footer').show();
         $('.search').fadeIn(600);
     });
 });
 
+// Full Screen status
+var screenStatus = 0;
+
+// Launch Full Screen function
 function launchFullScreen(element) {
-  if(element.requestFullscreen) {
-    element.requestFullscreen();
-  } else if(element.mozRequestFullScreen) {
-    element.mozRequestFullScreen();
-  } else if(element.webkitRequestFullscreen) {
-    element.webkitRequestFullscreen();
-  } else if(element.msRequestFullscreen) {
-    element.msRequestFullscreen();
-  }
-
-  screenStatus = 1;
+    if (element.requestFullscreen) {
+        element.requestFullscreen();
+    } else if (element.mozRequestFullScreen) {
+        element.mozRequestFullScreen();
+    } else if (element.webkitRequestFullscreen) {
+        element.webkitRequestFullscreen();
+    } else if (element.msRequestFullscreen) {
+        element.msRequestFullscreen();
+    }
+
+    screenStatus = 1;
 }
 
+// Exit Full Screen function
 function exitFullscreen() {
-  if(document.exitFullscreen) {
-    document.exitFullscreen();
-  } else if(document.mozCancelFullScreen) {
-    document.mozCancelFullScreen();
-  } else if(document.webkitExitFullscreen) {
-    document.webkitExitFullscreen();
-  }
-
-  screenStatus = 0;
+    if (document.exitFullscreen) {
+        document.exitFullscreen();
+    } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen();
+    } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen();
+    }
+
+    screenStatus = 0;
 }
 
-$('#screen').click(function(){
+// Set or exit Full Screen
+$('#screen').click(function() {
     if (screenStatus === 0) {
         launchFullScreen(document.querySelector('html'));
         $(this).prop('title', 'Exit full screen');
         $(this).html('<img src="img/icon-fullscreen_exit-128.png" height="35">');
-    }
-    else {
+    } else {
         exitFullscreen();
         $(this).prop('title', 'Set full screen');
         $(this).html('<img src="img/icon-fullscreen-128.png" height="35">');

diff --git a/js/app.min.js b/js/app.min.js
diff --git a/js/stream.min.js b/js/stream.min.js