mvark/AphoneticWords.html

## AphoneticWords.html
<!DOCTYPE html>
<html>
<head>
<title>Aphonetic Words</title>
</head>
<body>
<style>
body { margin: 2px; font-size: 40px; }
.cell { margin: 5px; }
audio { width:45px; height:25px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script>
    //currently works only in Chrome
	var myApp = angular.module("myApp", []);

	myApp.service('myservice', ['$http', '$q', function ($http, $q) {
		var entries = [];

		function getData(){
			var wordList = [];
var wordFeed = "https://spreadsheets.google.com/feeds/list/insert_your_spreadsheet_key_here/od6/public/values?alt=json&callback=JSON_CALLBACK";


			$http.jsonp(wordFeed)
			.success(function(data){
				angular.forEach(data.feed.entry, function(entryX){
					wordList.push(entryX);
				});
				angular.copy(wordList, entries);
			})
			.error(function (data) {
				$scope.data = "Request failed";
			});
		}

		return {
			getData: getData,
			entries: entries
		};

	}]);

	myApp.controller('words', function ($scope, myservice) {
		$scope.message = "";
		$scope.entries = myservice.entries;
		myservice.getData();
	});
</script>

<div ng-app="myApp">
<div id="container" ng-controller="words">
<div ng-repeat="entry in entries">
<div class="cell">
<b>{{entry.gsx$word.$t}}</b> : {{entry.gsx$pronunciation.$t}}
<audio ng-src="http://ssl.gstatic.com/dictionary/static/sounds/de/0/{{entry.gsx$word.$t}}.mp3" audio player controls preload="none">
Your browser does not support the audio element.
</audio>
</div>
</div>
</div>
</div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Aphonetic Words</title>
	</head>
	<body>
	<style>
	body { margin: 2px; font-size: 40px; }
	.cell { margin: 5px; }
	audio { width:45px; height:25px;}
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
	<script>
	//currently works only in Chrome
	var myApp = angular.module("myApp", []);

	myApp.service('myservice', ['$http', '$q', function ($http, $q) {
	var entries = [];

	function getData(){
	var wordList = [];
	var wordFeed = "https://spreadsheets.google.com/feeds/list/insert_your_spreadsheet_key_here/od6/public/values?alt=json&callback=JSON_CALLBACK";


	$http.jsonp(wordFeed)
	.success(function(data){
	angular.forEach(data.feed.entry, function(entryX){
	wordList.push(entryX);
	});
	angular.copy(wordList, entries);
	})
	.error(function (data) {
	$scope.data = "Request failed";
	});
	}

	return {
	getData: getData,
	entries: entries
	};

	}]);

	myApp.controller('words', function ($scope, myservice) {
	$scope.message = "";
	$scope.entries = myservice.entries;
	myservice.getData();
	});
	</script>

	<div ng-app="myApp">
	<div id="container" ng-controller="words">
	<div ng-repeat="entry in entries">
	<div class="cell">
	<b>{{entry.gsx$word.$t}}</b> : {{entry.gsx$pronunciation.$t}}
	<audio ng-src="http://ssl.gstatic.com/dictionary/static/sounds/de/0/{{entry.gsx$word.$t}}.mp3" audio player controls preload="none">
	Your browser does not support the audio element.
	</audio>
	</div>
	</div>
	</div>
	</div>
	</body>
	</html>