тут пользователь с ником eremon дал код радиоплеера с просьбой, мол надо чтоб запоминал состояние вкл/выкл при переходе по страницам форума
я сделал плеер, который запоминает состояние вкл/выкл и уровень громкости
выкладываю сюда, потому что может быть кому-то ещё понадобится, и делаю отдельной темой, поскольку чувствую будут вопросы по этой теме,
а может быть кто-то выложит свои модификации и варианты оформления
итак
Радио плеер на форум с памятью состояния ON/OFF
Код:
<style type="text/css">
#play{display:none;}
[for="play"]{position:relative;display:block;font-weight:bold;width:40px;height:1px;padding:10px;border-radius:50px;line-height:1px;color:#31b3ff;text-shadow:1px 1px 0px rgba(255,255,255,.15);background:rgb(91,91,91);box-shadow:0 1px 0 rgba(255,255,255,.2),inset 0 0 0 3px rgb(71,71,71),inset 0 6px 6px rgba(0,0,0,.5),inset 0-6px 1px rgba(255,255,255,.2);cursor:pointer;}
[for="play"]:before{content:'I I';font-weight:bold;position:absolute;right:10px;color:#000;}
[for="play"]:after{content:url("https://forumstatic.ru/files/0012/72/15/78984.png");position:absolute;left:1px;display:block;width:18px;height:18px;transition:.5s;top:-2px;}#play:checked~[for="play"]:after{left:35px;}
input[type='range']{-webkit-appearance:none;border-radius:4px;box-shadow:inset 0 0 4px#333;background-color:#999;height:4px;vertical-align:top;width:70px;}
input[type='range']::-moz-range-track{-moz-appearance:none;border-radius:4px;box-shadow:inset 0 0 1px#333;background-color:#999;height:4px;}
input[type='range']::-webkit-slider-thumb{-webkit-appearance:none!important;border-radius:12px;background-color:#FFF;box-shadow:inset 0 0 10px rgba(000,000,000,0.5);border:1px solid#999;height:12px;width:12px;}
input[type='range']::-webkit-slider-thumb{-webkit-appearance:none!important;border-radius:12px;background-color:#FFF;box-shadow:inset 0 0 10px rgba(000,000,000,0.5);border:1px solid#999;height:12px;width:12px;}
.volume{background:url("https://forumstatic.ru/files/0012/72/15/67036.png")no-repeat scroll 0-75px rgba(0,0,0,0);content:"";display:inline-block;height:25px;margin-top:0;position:relative;right:-5px;vertical-align:middle;width:25px;}
</style>
<script type="text/javascript" src="http://jquery.page2page.ru/ui/jquery.cookie.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var checkbox = $('#radio').find(':checkbox'), checkName='checkbox-state';
checkbox.each(function () {
$(this).attr('checked', $.cookie(checkName));
});
$(function() {
$('#rangeval, #volume').val($.cookie('volume_value'));
});
var audio = new Audio('http://81.25.32.234:8050/wgfm');
$('#volume').bind('change keyup input', function(){
audio.volume = parseFloat(this.value / 10);
if(this.value <= 2) {
$('.volume').css('background-position', '0 0');
}
else if (this.value <= 4) {
$('.volume').css('background-position', '0 -25px');
}
else if (this.value <= 6) {
$('.volume').css('background-position', '0 -50px');
}
else {
$('.volume').css('background-position', '0 -75px');
};
$.cookie('volume_value', this.value);
return false;
})
$('#play').bind('change', function() {
if($(this).is(':checked')) {
audio.play();
$.cookie(checkName, $(this).is(':checked'));
} else {
audio.pause();
$.cookie(checkName, null);
$('#rangeval, #volume').val(5);
audio.volume = parseFloat($('#volume').val() / 10);
$.cookie('volume_value', null);
}
})
audio.addEventListener("timeupdate", function() {
var s = parseInt(audio.currentTime % 60);
var m = parseInt((audio.currentTime / 60) % 60);
$('#duration').html(m + '.' + s + ' сек');
return false;
})
if($('#play').is(':checked')) {
audio.play();
}
audio.volume = parseFloat($('#volume').val() / 10);
});
</script>
<div id="radio" style="position:fixed;left:22px;bottom:70px;z-index:20000;overflow-x:visible;width:171px;opacity: 0.9;">
<input id="play" type="checkbox"><label for="play" title="play/stop">►</label>
<span id="duration" style="font-size: 0.8em;">0.0 сек</span>
<span class="volume" style="padding-right: 5px;"></span><output id="rangeval" for="volume">5</output></br>
<input id="volume" min="0" max="10" value="5" type="range" step="1" oninput="rangeval.value=value">
</div>в строке
var audio = new Audio('http://81.25.32.234:8050/wgfm');
ссылка на радиоканал, можно сюда вставить свой вариант, например http://s5.radioboss.fm:8119/stream ( или даже mp3 файл)
)) 
!
У меня вопрос: нельзя ли прикрепить кнопку плеера к правому (или левому) верхнему углу форума - чтобы она стояла там и не двигалась? 