add http-stream support, URL is hardcoded for now

htdocs/css/mpd.css

@@ -15,6 +15,14 @@ body {
   margin-bottom: 0;
 }
 
+#localvolumeslider {
+  width: 150px;
+}
+
+#localvolumeslider .progress {
+  margin-bottom: 0;
+}
+
 #volume-icon {
   float: left;
   margin-right: 10px;

htdocs/css/mpd.min.css

@@ -1 +1 @@
-body{padding-top:50px;padding-bottom:50px}.starter-template{padding:40px 15px}#volumeslider{width:150px}#volumeslider .progress{margin-bottom:0}#volume-icon{float:left;margin-right:10px;margin-top:2px}#counter{font-size:24px;margin-top:-6px;margin-left:10px;min-width:50px}#search{margin-right:-10px}.btn-group-hover{opacity:20%}.btn:active,.btn.active{background-image:none;outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);color:#428bca;background-color:#fdfdfd;border-color:#adadad}@media(max-width:1199px){#btn-responsive-block>.btn{padding:6px 12px;font-size:14px;border-radius:4px}}#salamisandwich td:nth-child(3),th:nth-child(3){text-align:right}tbody{cursor:pointer}td:last-child,td:first-child{width:30px}.notifications{position:fixed;z-index:9999}.notifications.top-right{right:10px;top:60px}.notifications>div{position:relative;z-index:9999;margin:5px 0}
+body{padding-top:50px;padding-bottom:50px}.starter-template{padding:40px 15px}#volumeslider{width:150px}#volumeslider .progress{margin-bottom:0}#volume-icon{float:left;margin-right:10px;margin-top:2px}#localvolumeslider{width:150px}#localvolumeslider .progress{margin-bottom:0}#volume-icon{float:left;margin-right:10px;margin-top:2px}#counter{font-size:24px;margin-top:-6px;margin-left:10px;min-width:50px}#search{margin-right:-10px}.btn-group-hover{opacity:20%}.btn:active,.btn.active{background-image:none;outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);color:#428bca;background-color:#fdfdfd;border-color:#adadad}@media(max-width:1199px){#btn-responsive-block>.btn{padding:6px 12px;font-size:14px;border-radius:4px}}#salamisandwich td:nth-child(3),th:nth-child(3){text-align:right}tbody{cursor:pointer}td:last-child,td:first-child{width:30px}.notifications{position:fixed;z-index:9999}.notifications.top-right{right:10px;top:60px}.notifications>div{position:relative;z-index:9999;margin:5px 0}

htdocs/index.html

@@ -43,6 +43,11 @@
           <li><a href="#" data-toggle="modal" data-target="#settings" onclick="getHost();">Settings</a></li>
         </ul>
 
+        <form id="search" class="navbar-form navbar-right" role="search">
+          <div class="form-group">
+            <input type="text" class="form-control" placeholder="Search">
+         </div>
+        </form>
         <div class="btn-toolbar navbar-btn navbar-right" role="toolbar">
           <div class="btn-group">
             <button type="button" class="btn btn-default" onclick="socket.send('MPD_API_SET_PREV');">
@@ -58,6 +63,21 @@
               <span class="glyphicon glyphicon-forward"></span>
             </button>
           </div>
+          <audio id="player" preload="none" src="http://mpd:8000/mpd.ogg" autoplay="false"></audio>
+          <div class="btn-group">
+            <button type="button" class="btn btn-default" onclick="clickLocalStop()">
+              <span id="stop-icon" class="glyphicon glyphicon-stop"></span>
+            </button>
+            <button type="button" class="btn btn-default" onclick="clickLocalPlay()">
+              <span id="play-icon" class="glyphicon glyphicon-play"></span>
+            </button>
+          </div>
+          <div class="btn-group">
+            <div class="btn btn-toolbar btn-default">
+              <span id="volume-icon" class="glyphicon glyphicon-volume-up"></span>
+              <div id="localvolumeslider"></div>
+            </div>
+          </div>
           <div class="btn-group">
             <div class="btn btn-toolbar btn-default">
               <span id="volume-icon" class="glyphicon glyphicon-volume-up"></span>
@@ -65,11 +85,6 @@
             </div>
           </div>
         </div>
-        <form id="search" class="navbar-form navbar-right" role="search">
-          <div class="form-group">
-            <input type="text" class="form-control" placeholder="Search">
-          </div>
-        </form>
       </div><!--/.nav-collapse -->
     </div>
   </div>

htdocs/js/mpd.js

@@ -98,6 +98,10 @@ $(document).ready(function(){
     $("#volumeslider").on('slider.newValue', function(evt,data){
         socket.send("MPD_API_SET_VOLUME,"+data.val);
     });
+    $("#localvolumeslider").slider(0);
+    $("#localvolumeslider").on('slider.newValue', function(evt,data){
+        document.getElementById("player").volume=data.val/100;
+    });
     $('#progressbar').slider(0);
     $("#progressbar").on('slider.newValue', function(evt,data){
         if(current_song && current_song.currentSongId >= 0) {
@@ -299,6 +303,7 @@ function webSocketConnect() {
                     var elapsed_seconds = obj.data.elapsedTime - elapsed_minutes * 60;
 
                     $('#volumeslider').slider(obj.data.volume);
+                    $('#localvolumeslider').slider(document.getElementById("player").volume*100);
                     var progress = Math.floor(100*obj.data.elapsedTime/obj.data.totalTime);
                     $('#progressbar').slider(progress);
 
@@ -473,6 +478,20 @@ function clickPlay() {
         socket.send('MPD_API_SET_PAUSE');
 }
 
+function clickLocalPlay() {
+    var player = document.getElementById('player');
+    player.src='http://mpd:8000/mpd.ogg';
+    player.play();
+    $("#localvolumeslider").slider(player.volume*100);
+}
+
+function clickLocalStop() {
+    var player = document.getElementById('player');
+    player.pause();
+    player.src='';
+    player.removeAttribute("src");
+}
+
 function basename(path) {
     return path.split('/').reverse()[0];
 }