Commit f8709da5 authored by onny's avatar onny

added fancy audio player with volume slide

parent 1ad95f67
#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;
......
......@@ -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);
});
......@@ -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">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment