added mute and audio detect just in case

www/app/app.js

@@ -5,13 +5,31 @@ var delete_audio = new Audio('media/snap.mp3');
 var new_audio = new Audio('media/throw.mp3');
 
 app.controller('tasksController', function($scope, $http, $mdDialog) {
+	$scope.muted = false;
+	$scope.has_audio = false;
+
+	var audio_controller = {
+		"audios": {}
+		,"play": function(sound_name) {
+			if ( ! $scope.muted && sound_name in audio_controller.audios ) {
+				audio_controller.audios[sound_name].play();
+			}
+		}	
+	};
+	if ( Modernizr.audio ) {
+		$scope.has_audio = true;
+		audio_controller.audios = {
+			"complete": new Audio('media/slap.mp3')
+			,"delete": new Audio('media/snap.mp3')
+			,"new": new Audio('media/throw.mp3')
+		};
+	}
 
 	get_tasks();
 
 	function get_tasks(){
 		$http.get('task').then(function(response){
-			$scope.tasks = response.data;
-			console.log(response);
+			$scope.tasks = response.data;
 		},handle_response_error);
 	};
 	function show_alert(text) {
@@ -44,7 +62,7 @@ app.controller('tasksController', function($scope, $http, $mdDialog) {
 
 	$scope.add_task = function() {
 		$http.post('task/',{"name": $scope.taskNewName}).then(function(response){
-			new_audio.play();
+			audio_controller.play('new');
 			get_tasks();
 			$scope.taskNewName = '';
 		},handle_response_error);
@@ -53,7 +71,7 @@ app.controller('tasksController', function($scope, $http, $mdDialog) {
 	$scope.delete_task = function(id) {
 		show_yesno('Are you sure to delete this task?',function(){
 			$http.delete('task/'+ id).then(function(data){
-				delete_audio.play();
+				audio_controller.play('delete');
 				get_tasks();
 			},handle_response_error);
 		});
@@ -67,9 +85,9 @@ app.controller('tasksController', function($scope, $http, $mdDialog) {
 		}
 		$http.post('task/'+ id,{ "is_complete": is_complete }).then(function(response){
 			if ( is_complete ) {
-				complete_audio.play();
+				audio_controller.play('complete');
 			} else {
-				new_audio.play();
+				audio_controller.play('new');
 			}
 			get_tasks();
 		},handle_response_error);

www/app/views/app.html

@@ -14,7 +14,9 @@
 	<header>
 		<img src="img/ninja.png" alt="">
 		TaskLee
-		<span class="credit"><a href="http://seldomshort.com/">Michael Vandenberghe <i class="fa fa-external-link"></i></a></span>
+		<span class="right">
+			<a href="http://seldomshort.com/">Michael Vandenberghe <i class="fa fa-external-link"></i></a>
+		</span>
 	</header>
 
     <section>
@@ -27,12 +29,16 @@
     	</div>
     </section>
     <section class="add_task">
+    	<span class="right" ng-show="has_audio">
+    		<a ng-class="{sound_control: true,'muted': muted}" ng-click="muted = (muted ? false : true )"><i ng-class="{fa: true,'fa-volume-up': ! muted,'fa-volume-off': muted}"></i> sound fx</a>
+    	</span>
     	<form ng-submit="add_task()">
 	    	<input type="text" placeholder="Task Name" ng-model="taskNewName">
 	    	<button type="submit"><i class="fa fa-plus"></i> Add Task</button>
 	    </form>
     </section>
 
+	<script src="js/modernizr.js"></script>
 	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
 	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
 	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>

www/css/styles.css

@@ -8,7 +8,7 @@ html,body {
 
 a {
 	text-decoration: none;
-	color: #000 !important;
+	color: #000 !important;/*important to override material css*/
 }
 a:hover {
 	opacity: 0.6;
@@ -28,7 +28,7 @@ header img {
 	width: 40px;
 }
 
-header .credit {
+.right {
 	float: right;
 	font-size: 12px;
 }
@@ -64,6 +64,15 @@ section {
 	margin-left: 4px;
 }
 
+.sound_control {
+	display: inline-block;
+	margin-left: 10px;
+	color: #4D642D !important;
+}
+.sound_control.muted {
+	color: #FA2A00 !important;
+}
+
 .add_task input, button {
 	font-size: 0.7em;
 	line-height: 1;