add fade-in/out volume when changing stations

js/player.js

@@ -2,17 +2,11 @@ var MODULE = (function (radio) {
 
   var last_volume = 0;
 
-  // Player icon pause/stop
+  var sound = new Howl({
-  var vid = document.getElementById("player");
+    src: "https://blog.project-insanity.org/106fm",
-  vid.onwaiting = function () {
+    html5: true,
-      $('#playbutton').attr("class", "buffering");
+    volume: 0
-  };
+  });
-   vid.onplaying = function () {
-      $('#playbutton').attr("class", "pause");
-  };
-  vid.onpause = function () {
-     $('#playbutton').attr("class", "play");
-  };
 
   radio.isElementOverflowing = function(element) {
   	var overflowX = element.offsetWidth < element.scrollWidth,
@@ -32,23 +26,50 @@ var MODULE = (function (radio) {
 
   /* Playbutton click */
   $('#playbutton').click(function() {
-    var music = document.getElementById('player');
+    if (typeof radio.sound !== "undefined") {
-    if (music.paused && $("#player").attr("src") != "") {
+      if (radio.sound.playing()) {
-      music.play();
+        radio.sound.pause();
       } else {
-      music.pause();
+        radio.sound.play();
       }
+    };
   });
 
   radio.action_play = function(stationid){
+    if (typeof radio.sound !== "undefined") {
+        var volume_state = $('#volumeslider').slider('value');
+        radio.sound.fade(volume_state, 0, 500);
+    };
     $.ajax({
       method: "GET",
       url: "https://www.radio-browser.info/webservice/v2/json/url/"+stationid,
       dataType: 'json',
       success: function(data){
         var streamurl = data['url'];
-        $("#player").attr("src", streamurl);
+        radio.sound = new Howl({
-        $('#player').trigger('play');
+          src: streamurl,
+          html5: true,
+          volume: 0,
+          onfade: function() {
+            if (this.volume() == 0) {
+              this.unload();
+            }
+          },
+          onplay: function() {
+            $('#playbutton').attr("class", "pause");
+          },
+          onpause: function() {
+            $('#playbutton').attr("class", "play");
+          },
+          onload: function() {
+            $('#playbutton').attr("class", "buffering");
+          }
+        });
+        sound_id = radio.sound.play();
+        radio.sound.once('play', function() {
+          var volume_state = $('#volumeslider').slider('value');
+          radio.sound.fade(0, volume_state, 1000);
+        });
       }
     });
   };
@@ -72,14 +93,16 @@ var MODULE = (function (radio) {
   // Volume slider
   $('#volumeslider').slider({
     orientation: "horizontal",
-    value: player.volume,
+    value: 0.5,
     min: 0,
     max: 1,
     range: 'min',
     animate: true,
-    step: .1,
+    step: .05,
-    slide: function(e, ui) {
+    change: function(e, ui) {
-      player.volume = ui.value;
+      if (typeof radio.sound !== "undefined") {
+        radio.sound.volume(ui.value);
+      }
       if (ui.value < 0.1) {
         $("#volumeicon").removeClass();
         $("#volumeicon").attr("class","silent");
@@ -101,34 +124,20 @@ var MODULE = (function (radio) {
   );
 
   $("#volumeicon").on("click", function(e) {
-    if (player.volume > 0) {
+    var current_volume = $('#volumeslider').slider('value');
-      last_volume = player.volume;
+    if (current_volume > 0) {
-      player.volume = 0;
+      last_volume = current_volume;
       $('#volumeslider').slider('value',0);
       radio.save_volume_state(0);
     } else {
       if (!last_volume == 0) {
-        player.volume = last_volume;
         $('#volumeslider').slider('value',last_volume);
         radio.save_volume_state(last_volume);
       } else {
-        player.volume = 1;
         $('#volumeslider').slider('value',1);
         radio.save_volume_state(1);
       }
     }
-    if (player.volume < 0.1) {
-      $("#volumeicon").removeClass();
-      $("#volumeicon").attr("class","silent");
-    }
-    if (player.volume > 0.5) {
-      $("#volumeicon").removeClass();
-      $("#volumeicon").attr("class","full");
-    }
-    if (player.volume <= 0.5 && player.volume >= 0.1) {
-      $("#volumeicon").removeClass();
-      $("#volumeicon").attr("class","mid");
-    }
   });
 
   radio.load_volume_state = function(){
@@ -138,25 +147,11 @@ var MODULE = (function (radio) {
       if ("volume_state" in data) {
         volume_state = data["volume_state"];
         if (volume_state == "") {
-          player.volume = 1;
           last_volume = 1;
           $('#volumeslider').slider('value',1);
         } else {
           last_volume = volume_state;
-          player.volume = Number(volume_state);
           $('#volumeslider').slider('value',Number(volume_state));
-          if (volume_state < 0.1) {
-            $("#volumeicon").removeClass();
-            $("#volumeicon").attr("class","silent");
-          }
-          if (volume_state > 0.5) {
-            $("#volumeicon").removeClass();
-            $("#volumeicon").attr("class","full");
-          }
-          if (volume_state <= 0.5 && volume_state >= 0.1) {
-            $("#volumeicon").removeClass();
-            $("#volumeicon").attr("class","mid");
-          }
         }
       }
       return true;

templates/main.php

@@ -2,6 +2,7 @@
   style('radio', 'main');
   script('radio', 'main');
   script('radio', 'navigation');
+  script('radio', 'howler-2.1.2');
   script('radio', 'player');
 ?>