anakaiti/annyang.html

## annyang.html
<!DOCTYPE html>
<html>
	<head>
		<title>Annyang testing</title>
	</head>
	<body>
		<script src="Https://cdnjs.cloudflare.com/ajax/libs/annyang/2.6.0/annyang.min.js"></script>
	<p id='p1'></p1>
		<script>
			window.onload = function(){
				var audio = new Audio();
				function searchTracks(query) {
					$.ajax({
					    url: 'https://api.spotify.com/v1/search',
					    data: {
						q: query,
						type: 'track'
					    },
					    success: function (response) {
						if (response.tracks.items.length) {
						    var track = response.tracks.items[0];
						    audio.src = track.preview_url;
						    console.log(audio.src);
						    audio.play();
						    communicateAction('<div>Playing ' + track.name + ' by ' + track.artists[0].name + '</div><img width="150" src="' + track.album.images[1].url + '">');
						}
					    }
					});
				   }

				function playSong(songName,artistName){
					console.log("on playsong");
					var query = songName;
					if(artistName){
						query += ' artist:' + artistName;
					}
					searchTracks(query);
				}

				if (annyang) {
					alert('berhasil');
					var commands = {
						'play *song': function(song) {
							console.log("command recognized");
 							playSong(song);
						},
						'play song *song': function(song){
console.log("command recognized");
							playSong(song);
						},
						'play *song by *artist':function(song,artist){
console.log("command recognized");
							playSong(song,artist);
						}
						':nomatch': function(){
console.log("command recognized\nCommand Error!~");
							//document.getElementbyId('p1').innerHTML = "i cannot understand your command';
						}
					};

					annyang.addCommands(commands);
					annyang.debug();
					annyang.start();
				}
				else{
					alert('annyang failed to be loaded!');
				}
			}
		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Annyang testing</title>
	</head>
	<body>
	<script src="Https://cdnjs.cloudflare.com/ajax/libs/annyang/2.6.0/annyang.min.js"></script>
	<p id='p1'></p1>
	<script>
	window.onload = function(){
	var audio = new Audio();
	function searchTracks(query) {
	$.ajax({
	url: 'https://api.spotify.com/v1/search',
	data: {
	q: query,
	type: 'track'
	},
	success: function (response) {
	if (response.tracks.items.length) {
	var track = response.tracks.items[0];
	audio.src = track.preview_url;
	console.log(audio.src);
	audio.play();
	communicateAction('<div>Playing ' + track.name + ' by ' + track.artists[0].name + '</div><img width="150" src="' + track.album.images[1].url + '">');
	}
	}
	});
	}

	function playSong(songName,artistName){
	console.log("on playsong");
	var query = songName;
	if(artistName){
	query += ' artist:' + artistName;
	}
	searchTracks(query);
	}

	if (annyang) {
	alert('berhasil');
	var commands = {
	'play *song': function(song) {
	console.log("command recognized");
	playSong(song);
	},
	'play song *song': function(song){
	console.log("command recognized");
	playSong(song);
	},
	'play song by artist':function(song,artist){
	console.log("command recognized");
	playSong(song,artist);
	}
	':nomatch': function(){
	console.log("command recognized\nCommand Error!~");
	//document.getElementbyId('p1').innerHTML = "i cannot understand your command';
	}
	};

	annyang.addCommands(commands);
	annyang.debug();
	annyang.start();
	}
	else{
	alert('annyang failed to be loaded!');
	}
	}
	</script>
	</body>
	</html>