<style type="text/css">
    #form-audio {background: url(https://forumstatic.ru/files/0017/d8/50/90072.png) no-repeat 50% 5px;}
     
    @font-face {
      font-family: 'Material Icons';
      font-style: normal;
      font-weight: 400;
      src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v17/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'),
    url('https://forumstatic.ru/files/0017/d8/50/55034.woff') format('woff'),
    url('https://forumstatic.ru/files/0017/d8/50/69630.ttf') format('truetype');
    }
     
    .material-icons {
      font-family: 'Material Icons';
      font-weight: normal;
      font-style: normal;
      font-size: 24px;
      line-height: 1;
      letter-spacing: normal;
      text-transform: none;
      display: inline-block;
      white-space: nowrap;
      word-wrap: normal;
      direction: ltr;
      -webkit-font-feature-settings: 'liga';
      -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }
     
    div[id^="r-"] {
      background-color: #9f9f9f; 
      border: 2px solid #59add4; 
      background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
      background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
      background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
      background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
      background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
     -moz-border-radius: 4px;border-radius: 4px;khtml-border-radius:4px;-webkit-border-radius:4px;
     -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
     -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
      box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
    margin:3px;z-index:200;overflow:hidden;width:430px;opacity: 0.9;
    text-shadow: 0 1px 0 rgba(255,255,255,.4);font-weight: bold;padding: 10px;
    }
     
    #play {background: transparent url(https://forumstatic.ru/files/0012/72/15/89476.png) no-repeat scroll 0 -22px;
    border: 0 none;cursor: pointer;display: block;float: left;height: 31px;left: 13px;margin: 7px;vertical-align: super;width: 31px;}
    #prev,#next {border: 0 none;cursor: pointer;height: 10px;margin-left: 9px;width: 21px; vertical-align: middle;}
    #prev {background: transparent url(https://forumstatic.ru/files/0012/72/15/89476.png) no-repeat scroll 0 0;}
    #next {background: transparent url(https://forumstatic.ru/files/0012/72/15/89476.png) no-repeat scroll 0 -11px;}
    #volume{-webkit-appearance:none;border-radius:4px;box-shadow:inset 0 0 1px#333;
    background-color:#999;cursor: pointer;height:4px;left: 40px;position: absolute;top: 9px;vertical-align: bottom;width:70px;}
    input[type='range']::-moz-range-progress {background:url(//papercraft.su/plate/img/plate_progress.png) repeat-x scroll 0 -45px;}
    input[type='range']::-moz-range-track{-moz-appearance:none;border-radius:4px;box-shadow:inset 0 0 1px#333;height:4px;}
    input[type='range']::-moz-range-thumb{-webkit-appearance:none !important;
    background: url(https://forumstatic.ru/files/0012/b1/41/89973.png) no-repeat scroll 0 0; 
    border: 0; 
    height: 19px;
    width:19px;
    cursor: pointer;
    filter: drop-shadow(3px 3px 7px slategrey);
    }
    input[type='range']::-webkit-slider-thumb{-webkit-appearance:none !important;
    background: url(https://forumstatic.ru/files/0012/b1/41/89973.png) no-repeat scroll 0 0;
    border:0;height:19px;width:19px;cursor: pointer;-webkit-filter: drop-shadow(3px 3px 7px slategrey);
    }
    #seekbar { -webkit-appearance:none !important;background: #999;border-radius:4px; box-shadow:inset 0 0 1px#333;height:4px;width: 160px; vertical-align: super;}
    .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;}
    button:focus, input:focus {outline:none;}
    #duration, #end {font-size: 0.8em; vertical-align: super;}
    #timebox {margin: 2px;}
    #track { font-size: 0.8em;overflow: hidden;padding: 5px; text-align: left;width: 420px;}
    #track li{cursor: pointer;}
    #track li:nth-child(odd) {background: #dadada;}
    #track li:nth-child(even) {background:#cdcdcd;}
    #track li.active {background:#bddeee;}
    .spin {-webkit-animation: spin 1.8s infinite linear;-moz-animation: spin 1.8s infinite linear;-o-animation: spin 1.8s infinite linear;animation: spin 1.8s infinite linear;}
    @-moz-keyframes spin {
    0% {-moz-transform: rotate(0deg);}
    100% {-moz-transform: rotate(359deg);}
    }
    @-webkit-keyframes spin {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(359deg);}
    }
    @-o-keyframes spin {
    0% {-o-transform: rotate(0deg);}
    100% {-o-transform: rotate(359deg);}
    }
    @keyframes spin {
    0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
    100% {-webkit-transform: rotate(359deg);transform: rotate(359deg);}
    }
    #action {color: #fffff0;display: inline-block;float: right;font-size: 15px;overflow: hidden;text-shadow: 0px 3px 2px rgba(150, 150, 150, 1);width: 250px;animation: marquee 15s linear infinite;}
    #action:hover {animation-play-state: paused}
     
    @-moz-keyframes marquee {
    0% {-moz-transform: translate(0, 0);}
    100% {-moz-transform: translate(-30%, 0);}
    }
    @-webkit-keyframes marquee {
    0% {-webkit-transform: translate(0, 0);}
    100% {-webkit-transform: translate(-30%, 0);}
    }
    @keyframes marquee {
    0%{ transform: translate(0, 0); }
    100% { transform: translate(-30%, 0); }
    }
     
    .adinput {display: table;}
    .adinput::before {color: #888;content: attr(data-i) ". ";}
    span[data-i="1"] #deltrack {display: none !important;}
    #addtrack {
    color: #009900;
    background: linear-gradient(#009900, #006600); 
    background: -webkit-linear-gradient(#009900, #006600);
    background: -o-linear-gradient(#009900, #006600);
    background: -ms-linear-gradient(#009900, #006600);
    }
    #deltrack {
    color: #cc0000;
    background: linear-gradient(#cc0000, #990000); 
    background: -webkit-linear-gradient(#cc0000, #990000);
    background: -o-linear-gradient(#cc0000, #990000);
    background: -ms-linear-gradient(#cc0000, #990000);
    }
    #addtrack,#deltrack {
    cursor: pointer;
    font-size: 20px;
    vertical-align: sub;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
     
    input[name="n"]::-moz-placeholder {background:#f0fdf0;font-size: 11px;}
    input[name="n"]::-webkit-input-placeholder {background:#f0fdf0;font-size: 11px;}
    input[name="n"]:-ms-input-placeholder {background:#f0fdf0;font-size: 11px;}
    input[name="u"]::-moz-placeholder {background:#ffffe0;font-size: 11px;}
    input[name="u"]::-webkit-input-placeholder {background:#ffffe0;font-size: 11px;}
    input[name="u"]:-ms-input-placeholder {background:#ffffe0;font-size: 11px;}
    input[name="c"]::-moz-placeholder {font-size: 11px;}
    input[name="c"]::-webkit-input-placeholder {font-size: 11px;}
    input[name="c"]:-ms-input-placeholder {font-size: 11px;}
     
    form#tr-list {max-height:600px;position: fixed;right: 30%;bottom: 15%;margin: 0 auto;overflow-y:auto;z-index: 9;}
    </style>
     
    <script type="text/javascript">
    $('#form-buttons tr').append('<td id="form-audio" title="Музыка"><img src="/i/blank.gif"></td>');var fr='<form id="tr-list" class="container" autocomplete="off" style="display:none;min-width:40%;"><h1>Плейлист для плеера <i style="cursor: pointer;float: right;" class="material-icons" onclick="changeVisibility(\'tr-list\')" title="Закрыть">clear</i></h1><div class="a-box" style="text-align: center;"><p class="adsubmit"style="text-align: left;"><span data-i="1" class="adinput"><input type="text"maxlength="100" size="30" placeholder="Название трека (исполнитель)" name="n" required> <input type="url" pattern="https?://.+" required maxlength="100"size="30" placeholder="http://Ссылка на аудиофайл" name="u">&nbsp;<input type="url" pattern="https?://.+" maxlength="100" size="38" placeholder="http://Ссылка на изображение (неважно)" name="c" title="необязательно"><i class="material-icons" id="addtrack" title="добавить ещё один трек">add_circle_outline</i>&nbsp;<i class="material-icons" id="deltrack" title="удалить трек" onclick="var d=this.parentNode; d.parentNode.removeChild(d);">highlight_off</i></span></p><br><input type="submit" id="fin" value=" Готово " class="button" onclick="gotovo()"></div></form>';$('form#post').before(fr);$('#form-audio').on('click',function(){changeVisibility('tr-list');});var j=2;$('#addtrack').live('click',function(e){e.preventDefault();$(this).parents('.adinput').clone().attr('data-i',j++).appendTo('.adsubmit');});window.gotovo=function(){$('#tr-list').submit(function(e){e.preventDefault();});var ss,ee=[];$('[name="u"]').each(function(i){ee[i]=$(this).val();if(ee[i].length<=13){return;}else{ss=$('#tr-list').serializeArray();}});s=JSON.stringify(ss);var emp=$('[name="u"]');s=s.replace(/\{"name":"n","value":"(.*?)"},{"name":"u","value":"(.*?)"},{"name":"c","value":"(.*?)"\}/g,'{n:"$1",u:"$2",c:"$3"}');s=s.replace(/\}\,/g,"},\n");insert('[player]'+s+'[/player]');changeVisibility('tr-list');}
    $('div[id$="-content"] p:contains("[/player]")').map(function(){var ud=$(this).parent('.post-content').attr('id').split('-')[0];var txt=$(this).html();txt=txt.replace(/\[player\](\[\{n\:\".*?\"\,u\:\".*?\"\}\])\[\/player\]/gm,'<div id="r-'+ud+'"><div id="cover"><img height="86"width="86"align="left"src="https://forumstatic.ru/files/0012/72/15/53582.png"style="overflow: hidden; left: 0px; top: 0px; margin: 0px; max-width: none; max-height: none; border: medium none; line-height: 1; background-color: transparent; backface-visibility: hidden; width: 86px; height: 86px;filter: drop-shadow(0px 1px 3px DimGrey); -webkit-filter: drop-shadow(0px 1px 3px DimGrey); opacity: 1;"></div><button id="play"title="play/stop"></button><button id="prev"title="предыдущий"></button>&nbsp;<button id="next"title="следующий"></button><span class="volume"style="padding-right: 5px;"><input id="volume" min="0" max="10" value="5" type="range"step="1" title="громкость"></span><div id="timebox"><span id="duration">0.0</span>&nbsp;<input type="range" step="any" id="seekbar" value="0" max="">&nbsp;<span id="end"></span><i id="plist"class="material-icons"style="cursor: pointer;margin-left: 5px;vertical-align: sub;"title="показать/скрыть плейлист">list</i></div><div id="action"></div><div id="track"></div><audio id="audio-'+ud+'"></audio><div id="pl" style="display:none">$1</div></div>');$(this).html(txt);var pt=$('#r-'+ud+' #pl').text();var audio=new Audio();var i=0;var playlist=(new Function('return '+pt+';')());if(!playlist){return;};audio.src=playlist[0].u;var t='<ul>';
    for(var i=0,max=playlist.length;i<max;i++){var nm=playlist[i].n;var ur=playlist[i].u;var cov=playlist[i].c;i<9?t+='<li data-audio-url="'+ur+'" data-cover-src="'+cov+'">0'+(i+1)+'. <img src="'+cov+'" height="16"width="16"> '+nm+'</li>':t+='<li data-audio-url="'+ur+'" data-cover-src="'+cov+'">'+(i+1)+'. <img src="'+cov+'" height="16"width="16"> '+nm+'</li>';}t+='</ul>';$('#r-'+ud+' #track').append(t);audio.volume=0.5;$('#r-'+ud+' #volume').live('change keyup input',function(){audio.volume=parseFloat(this.value/10);if(this.value<=2){$('#r-'+ud+' .volume').css('background-position','0 0');}
    else if(this.value<=4){$('#r-'+ud+' .volume').css('background-position','0 -25px');}else if(this.value<=6){$('#r-'+ud+' .volume').css('background-position','0 -50px');}
    else{$('#r-'+ud+' .volume').css('background-position','0 -75px');};return false;});if(!sessionStorage['act']){sessionStorage['act']='stop';};function playAct(){sessionStorage['act']!='stop'?audio.play():audio.pause()};function listAct(){$('#r-'+ud+' #track li').each(function(){var a=$(this).data('audio-url');var b=audio.src;var ti=$(this).text();if(a.indexOf(b)!=-1){$(this).addClass('active').siblings('li').removeClass('active');$('#r-'+ud+' #action').text(ti);}});}
    function vinil(){var c=$('#r-'+ud+' li.active').data('cover-src');if(c=='undefined'||c==''){$('#r-'+ud+' #cover img').attr('src','https://forumstatic.ru/files/0012/72/15/53582.png').addClass('spin');}else{$('#r-'+ud+' #cover img').attr('src',c).removeClass('spin');}}
    $('#r-'+ud+' #play').live('click',function(){if(audio.paused){err();audio.play();sessionStorage['act']='play';listAct();vinil();$(this).css({'background-position':'0 -53px','filter':'drop-shadow(0px 1px 2px deepskyblue)','-webkit-filter':'drop-shadow(0px 1px 2px deepskyblue)'});}else{audio.pause();sessionStorage['act']='stop';$(this).css({'background-position':'0 -22px','filter':'none','-webkit-filter':'none'});$('#r-'+ud+' #cover img').removeClass('spin');$('#r-'+ud+' #action').text('');}});var seekbar=$('#r-'+ud+' #seekbar')[0];function setupSeekbar(){seekbar.max=audio.duration;var min=parseInt(audio.duration/60,10);var sec=parseInt(audio.duration%60);var endTime=min+'.'+sec;if(seekbar.max=='Infinity'){endTime='<i class="material-icons" style="font-size: 1.4em;vertical-align: sub;">all_inclusive</i>'};$('#r-'+ud+' #end').html(endTime);}
    audio.ondurationchange=setupSeekbar;audio.addEventListener('durationchange',setupSeekbar);audio.addEventListener('timeupdate',function(){var s=parseInt(audio.currentTime%60);var m=parseInt((audio.currentTime/60)%60);$('#r-'+ud+' #duration').html(m+'.'+s);$('#r-'+ud+' #seekbar').attr('max',audio.duration);$('#r-'+ud+' #seekbar').val(audio.currentTime);var p=Math.ceil((audio.currentTime/audio.duration)*100);$('#r-'+ud+' #seekbar').css({'height':'4px','background-image':'-webkit-linear-gradient(left, #6ac3d4 '+p+'%, #999 '+p+'%)','background-image':'linear-gradient(to right, #6ac3d4 '+p+'%, #999 '+p+'%)'});return false;});$('#r-'+ud+' #seekbar').live('change',function(){audio.currentTime=$(this).val();});$('#r-'+ud+' #next').live('click',function(){i=$('#r-'+ud+' #track').find('li.active').index();i=++i<playlist.length?i:0;audio.src=playlist[i].u;listAct();vinil();audio.currentTime=0;playAct();});$('#r-'+ud+' #prev').live('click',function(){i=$('#r-'+ud+' #track').find('li.active').index();i=--i>-1?i:playlist.length-1;audio.src=playlist[i].u;listAct();vinil();audio.currentTime=0;playAct();});$(audio).live('ended',function(){$('#r-'+ud+' #next').trigger('click');});$('#r-'+ud+' #track li').live('click',function(){audio.src=$(this).data('audio-url');listAct();playAct();$('#r-'+ud+' #play').trigger('click');});function err(){audio.addEventListener('error',function failed(e){switch(e.target.error.code){case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:$.jGrowl('Утраченная ссылка на аудио. Или неподдерживаемый этим браузером формат');break;}},true);}
    $('#r-'+ud+' #plist').live('click',function(){$('#r-'+ud+' #track ul').slideToggle('slow');});});
    </script>