added fancy audio player with volume slide

css/main.css

@@ -1,3 +1,22 @@
+#playbutton{
+	height:60px;
+	width: 60px;
+	margin: 15px;
+	border: none;
+	background-size: 100%;
+	background-position: center;
+	display: inline;;
+}
+#volumeslider{
+	width: 120px;
+	display: inline-block;
+	margin-top: 0px;
+	margin-left: 10px;
+}
+.play{background: url('../img/play.png') no-repeat;}
+.pause{background: url('../img/pause.png') no-repeat;}
+
+
 /* SETTINGS */
 #files-setting-showhidden {
 	padding-bottom: 8px;

js/main.js

@@ -2,11 +2,13 @@ $(function(){
 
   searchTimeout = null;
 
-  /*$('body').on('click', 'tr', function() {
+  /* Click on a radio station (table entry) and play it */
+  $('body').on('click', 'tr', function() {
     var stationid = $(this).attr('data-id');
     play_station(stationid);
-  }); */
+  });
 
+/*
   $('body').on('click', 'tr .icon', function() {
     alert('test');
   });
@@ -14,16 +16,18 @@ $(function(){
   $('.icon-star').click(function (){
     alert('test');
   });
+  */
 
   function play_station(stationid){
       $.ajax({
         method: "GET",
-        url: "http://www.radio-browser.info/webservice/v2/json/url/"+stationid,
+        url: "https://www.radio-browser.info/webservice/v2/json/url/"+stationid,
         dataType: 'json',
         success: function(data){
           var sourceUrl = data['url'];
           $("#player").attr("src", sourceUrl);
           $('#player').trigger('play');
+          $('#playbutton').attr("class", "pause");
           return true;
         }
       });
@@ -146,5 +150,31 @@ $(function(){
       }
   });
 
+  $('#playbutton').click(function() {
+    var music = document.getElementById('player');
+    if (music.paused && $("#player").attr("src") != "") {
+      music.play();
+      playbutton.className = "";
+      playbutton.className = "pause";
+    } else {
+      music.pause();
+      playbutton.className = "";
+      playbutton.className = "play";
+    }
+  });
+
+  $('#volumeslider').slider({
+    orientation: "horizontal",
+    value: player.volume,
+    min: 0,
+    max: 1,
+    range: 'min',
+    animate: true,
+    step: .1,
+    slide: function(e, ui) {
+      player.volume = ui.value;
+    }
+  });
+
   switch_menu(0);
 });

templates/main.php

@@ -24,7 +24,9 @@
                 </li>
             </ul>
             <div id="app-settings">
-                <audio id="player" src="" controls></audio>
+                <audio id="player" src=""></audio>
+                <button id="playbutton" class="play"></button>
+                <div id="volumeslider"></div>
             </div>
         </div>
     <div id="app-content">