OLDSCRIPTS.md

var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition
// var SpeechSynthesisUtterance = SpeechSynthesisUtterance || webkitSpeechSynthesisUtterance

// var SpeechGrammarList = SpeechGrammarList || webkitSpeechGrammarList
// var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent

// var grammar = '#JSGF V1.0; grammar colors; public <color> = ' + colors.join(' | ') + ' ;'

var recognition = new SpeechRecognition();
// var utterance = new SpeechSynthesisUtterance();

// var speechRecognitionList = new SpeechGrammarList();
// speechRecognitionList.addFromString(grammar, 1);
// recognition.grammars = speechRecognitionList;
//recognition.continuous = false;

recognition.lang = 'en-GB';
recognition.interimResults = false;
recognition.maxAlternatives = 1;

var clickMe = document.querySelector('.click-me');
var diagnostic = document.querySelector('.output');
var transcript = document.querySelector('.transcript');
var titleField = document.querySelector('.title');
var ytIDField = document.querySelector('.ytID');
var thumbnailField = document.querySelector('.thumbnail');
var ytPlayer = document.querySelector('#player');

// var bg = document.querySelector('html');
var speech;

clickMe.onclick = function() {
  
  // console.log('Listening...');
  diagnostic.innerHTML = 'Listening...';
  
  recognition.start();
  //answerMe('how old is harry styles'); // testing

}

// recognition.onsoundstart = function(event) {
//   console.log(event);
//   // utterance.volume();
// }


recognition.onresult = function(event) {
  // The SpeechRecognitionEvent results property returns a SpeechRecognitionResultList object
  // The SpeechRecognitionResultList object contains SpeechRecognitionResult objects.
  // It has a getter so it can be accessed like an array
  // The [last] returns the SpeechRecognitionResult at the last position.
  // Each SpeechRecognitionResult object contains SpeechRecognitionAlternative objects that contain individual results.
  // These also have getters so they can be accessed like arrays.
  // The [0] returns the SpeechRecognitionAlternative at position 0.
  // We then return the transcript property of the SpeechRecognitionAlternative object

  // console.log(event);

  // var last = event.results.length - 1;
  // var speech = event.results[last][0].transcript;
  
  var speech = event.results[0][0].transcript;

  // diagnostic.textContent = 'Result received: ' + speech + '. Confidence Level: ' + event.results[0][0].confidence;
  
  diagnostic.textContent = "You said: " + speech;
  //transcript.textContent = speech;
  // bg.style.backgroundColor = speech;
  // console.log('Confidence: ' + event.results[0][0].confidence);

  if ( speech.startsWith("play") ) {
    searchYouTube(speech);
  } else {
    answerMe(speech);
  }
}

recognition.onspeechend = function() {
  recognition.stop();
}

// recognition.onnomatch = function(event) {
//  diagnostic.textContent = "I didn't recognise that color.";
// }

recognition.onerror = function(event) {
  // console.log(event.error);
  diagnostic.textContent = 'Error occurred: ' + event.error;
}

function answerMe(question) {
  // var xhr = new XMLHttpRequest();
  // xhr.open('GET', 'https://api.wolframalpha.com/v1/result?i=' + question + '&appid=27LAYV-JVWUHLR5JQ');
  // xhr.send(null);

  // xhr.onreadystatechange = function () {
  // var DONE = 4; // readyState 4 means the request is done.
  // var OK = 200; // status 200 is a successful return.
  // if (xhr.readyState === DONE) {
  //   if (xhr.status === OK) 
  //     titleField.textContent = xhr.responseText; // 'This is the returned text.'
  //     console.log(xhr.responseText);
  //   } else {
  //     titleField.textContent = 'Sorry: ' + xhr.responseText; // An error occurred during the request.
  //     console.log(xhr.status);
  //   }
  // }

  // callback(api, function() {
  //   console.log('done');
  // });

  // var api = 'https://api.wolframalpha.com/v2/query?input=' + question + '&format=plaintext&output=JSON&appid=27LAYV-JVWUHLR5JQ';

  // function callback(question, callback) {
  //   console.log('addScript');
  //   var api = 'https://api.wolframalpha.com/v2/query?input=' + question + '&format=plaintext&output=JSON&appid=27LAYV-JVWUHLR5JQ';
  //   var s = document.createElement("script");
  //   s.src = api;
  //   document.body.appendChild(s);
  //   callback();
  // }

  // function myFunc(data) {
  //   // var jsonp = JSONP_CALLBACK_FUNCTION(titleField.textContent);
  //   // titleField.textContent = jsonp;
  //   // console.log(data);
  //   //titleField.textContent = data.queryresult.pods[1].subpods[0].plaintext;
  // }

  var request = new XMLHttpRequest();   

  request.open('GET', 'https://cors-anywhere.herokuapp.com/https://api.wolframalpha.com/v2/query?input=' + question + '&format=plaintext&output=JSON&appid=27LAYV-JVWUHLR5JQ', true);

  request.onload = function() {
    if (request.status >= 200 && request.status < 400) {
      // Success!
      
      // console.log(JSON.parse(request.responseText))
      //var data = JSON.parse(request.responseText);

      var data = JSON.parse(request.responseText);
      titleField.textContent = data.queryresult.pods[1].subpods[0].plaintext;


    } else {
      // We reached our target server, but it returned an error
      console.log(request.status);
    }
  };

  request.onerror = function() {
    // There was a connection error of some sort
  };

  request.send();



};



// Your use of the YouTube API must comply with the Terms of Service:
// https://developers.google.com/youtube/terms

// Helper function to display JavaScript value on HTML page.
// function showResponse(response) {
//     var responseString = JSON.stringify(response, '', 2);
//     document.getElementById('response').innerHTML += responseString;
// }

// Called automatically when JavaScript client library is loaded.
function onClientLoad() {
    gapi.client.load('youtube', 'v3', onYouTubeApiLoad);
}

// Called automatically when YouTube API interface is loaded (see line 9).
function onYouTubeApiLoad() {
    // This API key is intended for use only in this lesson.
    // See http://goo.gl/PdPA1 to get a key for your own applications.
    gapi.client.setApiKey('AIzaSyACNt99PoY7u7F7qWZY5eRIRO2ag6HRB-o');

    // search();
}

function searchYouTube(result) {
  // console.log('search'+result);
    // Use the JavaScript client library to create a search.list() API call.
    var request = gapi.client.youtube.search.list({
        part: 'snippet',
        q: result
    });
    
    // Send the request to the API server,
    // and invoke onSearchRepsonse() with the response.
    request.execute(onSearchResponse);
}

// Called automatically with the response of the YouTube API request.
function onSearchResponse(response) {
    // showResponse(response);
    // console.log(response);
    // console.log(response);
    
    var title = response.items[0].snippet.title;
    var ytID = response.items[0].id.videoId;
    // var thumbnail = response.items[0].snippet.thumbnails.medium.url;

    // ytPlayer.getAttribute('title') ? player.loadVideoById(ytID) : youtubePlayer(ytID);

    titleField.textContent = title;
    // ytIDField.textContent = ytID;
    // thumbnailField.src = thumbnail;

    if ( document.querySelector('#player').getAttribute('title') ) {
      // console.log('title exists');
      player.loadVideoById(ytID)
    } else {
      // console.log('title doesnt exist');
      youtubePlayer(ytID);
    }


    // console.log(id);
}


// // 2. This code loads the IFrame Player API code asynchronously.
// var tag = document.createElement('script');

// tag.src = "https://www.youtube.com/iframe_api";
// var firstScriptTag = document.getElementsByTagName('script')[0];
// firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.

var player;

// function onYouTubeIframeAPIReady() {
//   player = new YT.Player('player', {
//     height: '390',
//     width: '640',
//     videoId: 'IutULT1kVMA',
//     events: {
//       'onReady': onPlayerReady
//       // 'onStateChange': onPlayerStateChange
//     }
//   });
// }

function youtubePlayer(ytID) {
  player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: ytID,
    events: {
      'onReady': onPlayerReady
      // 'onStateChange': onPlayerStateChange
    }
  });
}

// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
  event.target.playVideo();
}

// // 5. The API calls this function when the player's state changes.
// //    The function indicates that when playing a video (state=1),
// //    the player should play for six seconds and then stop.
// var done = false;
// function onPlayerStateChange(event) {
// if (event.data == YT.PlayerState.PLAYING && !done) {
//   setTimeout(stopVideo, 6000);
//   done = true;
// }
// }
// function stopVideo() {
// player.stopVideo();
// }