Xefir/nextcloud-app-radio
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

add fade-in/out volume when changing stations

Browse Source
This commit is contained in:
Jonas Heinrich 2019-05-09 23:09:19 +02:00
parent 9284be874b
commit 2af0acf591
3 changed files with 2548 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2498
js/howler-2.1.2.js Normal file
View File

File diff suppressed because it is too large Load Diff

99
js/player.js
View File

@ -2,17 +2,11 @@ var MODULE = (function (radio) {
var last_volume = 0;
// Player icon pause/stop
var vid = document.getElementById("player");
vid.onwaiting = function () {
$('#playbutton').attr("class", "buffering");
};
vid.onplaying = function () {
$('#playbutton').attr("class", "pause");
};
vid.onpause = function () {
$('#playbutton').attr("class", "play");
};
var sound = new Howl({
src: "https://blog.project-insanity.org/106fm",
html5: true,
volume: 0
});
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 (music.paused && $("#player").attr("src") != "") {
music.play();
if (typeof radio.sound !== "undefined") {
if (radio.sound.playing()) {
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);
$('#player').trigger('play');
radio.sound = new Howl({
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,
slide: function(e, ui) {
player.volume = ui.value;
step: .05,
change: function(e, ui) {
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) {
last_volume = player.volume;
player.volume = 0;
var current_volume = $('#volumeslider').slider('value');
if (current_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;

1
templates/main.php
View File

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