Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Единый форум поддержки » Новые возможности форумов » Музыка в постах


Музыка в постах

Сообщений 601 страница 620 из 732

601

Mirra Bell
Наверно этот - Дополнительные медиахостинги v2(.2)

0

602

Alex_63
Поставила его на тест, но у меня даже кнопки никакой не появилось http://almarein.mybb.ru/

0

603

Mirra Bell
Скрипт работает по кнопке Видео, там появляется вкладка "Второй список"

0

604

Какой из скриптов работает на музыку в постах?

Дополнительные медиахостинги v2(.2) - этот?

Поставила. Но не понятно как работать со вторым списком. Ни одна ссылка в него поставленная не срабатывает. Кнопка "вставить" не отвечает. Просто ничего не происходит.

Отредактировано Reina_Avart (Сб, 17 Сен 2016 23:08:15)

0

605

Reina_Avart
Ссылку на форум с проблемой, и дайте пример ссылки, которую пытаетесь вставлять

0

606

Мультитрековый плеер в постах (плеер с плейлистом) v1.0

http://sg.uploads.ru/tFc1X.gif
ДЕМО

Плеер построен на технологии HTML5 и не требует наличия flash плагина для браузера, поэтому плеер без проблем работает и в мобильных версиях

Поддержка форматов браузерами:

Плеер мультиформатный, воспроизводит аудио файлы в форматах: mp3, ogg, m4a (aac), wav
поддержка браузерами:
mp3 формата - http://caniuse.com/#feat=mp3
ogg формата - http://caniuse.com/#search=ogg
wav формата - http://caniuse.com/#search=wav
aac формата - http://caniuse.com/#search=aac
как видим mp3 и aac поддерживаются всеми современными браузерами, кроме Оперы мини, так что пользователей-любителей этого браузера просьба не беспокоить вопросами и претензиями

Где брать ссылки на аудио?
прежде всего проверенные, надёжные сайты
1.zf.fm
ссылки на аудио приходится выуживать топорным способом, зато они статичные и практически не меняются
топорный метод узнать ссылку на mp3 это посмотреть её в браузере после скачивания

вот так

http://s6.uploads.ru/flWe8.gif

2. zaycev.net (ссылки для скачивания и являются прямыми ссылками на mp3 для работы с плеером)
ссылки на аудио достать проще, но иногда они становятся "битыми", то ли по просьбе правообладателей что-то удаляется, то ли ещё по каким причинам

как брать ссылку с zaycev.net

http://s3.uploads.ru/VO4XM.gif

3.jango.com (много интересной зарубежной музыки в форматах mp3 и m4a (aac))
редкие записи, + разные форматы

4.archive.org/details/freemusicarchive (много интересной зарубежной музыки в форматах mp3 и ogg)
здесь вся найденная музыка хранится (дублируется) в двух форматах mp3 и ogg
найти можно огромное количество нераскрученных исполнителей и коллективов, я например нашёл записи своей группы (в которой играю), которые я размещал на jamendo в 2009 году

как выуживать ссылки на сайтах, если нет ссылки для скачивания?
для этого есть вспомогательные дополнения (расширения) для браузеров:
1. для хрома и opera 41 - Video Downloader Pro
выдаёт в своём меню ссылку на mp3, mp4, m4a и т.д. при воспроизведении мультимедиа контента на сайте
2 для мозиллы и opera 41 - Audio Downloader Prime

как добавлять/удалять треки в плейлисте?

тыц

http://s3.uploads.ru/NZLDe.gif

строка песни в трек листе формируется из составляющих:
n - это имя, название (name)
u - это ссылка на аудио (url)
c - это обложка альбома, фото артиста группы (cover)
помещается всё что относится к одной песне в фигурные скобки {...} и перечисляется через запятую, кроме последней строки

{n:"Название песни 1", u:"Ссылка на mp3", c:"ссылка на обложку альбома (фото артиста, группы)"},
{n:"Песня 2", u:"http://mp3.stream.tb-group.fm/trb.mp3?/;.mp3", c:"http://www.webdesign-flash.ro/p/rap/content/thumbnails/small21.jpg"}

в html-верх

Код:
<style type="text/css">
#form-audio {background: url(http://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('http://forumstatic.ru/files/0017/d8/50/55034.woff') format('woff'),
url('http://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(http://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(http://forumstatic.ru/files/0012/72/15/89476.png) no-repeat scroll 0 0;}
#next {background: transparent url(http://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(http://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(http://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(http://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" pattern=".{2,}" required> <input type="url" pattern="https?://(.+){12,}" required maxlength="200"size="30" placeholder="http://Ссылка на аудиофайл" name="u">&nbsp;<input type="url" maxlength="200" 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"></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');});$('#tr-list').submit(function(e){e.preventDefault();var ss=$('#tr-list').serializeArray(),s=JSON.stringify(ss);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="http://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><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;var k=i+1;i<9?k='0'+k:k=k;t+='<li data-audio-url="'+ur+'" data-cover-src="'+cov+'">'+k+'. <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','http://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>

Где хранить своё аудио:
проверенный способ это хранение в Dropbox, ссылки вставлять в плеер только после выпрямление через этот выпрямитель
нас интересует ссылка на скачивание

http://s4.uploads.ru/vaHxt.png

+16

607

Romych
:cool: Ну вообще фича крутая.. Только бы коды свернуть в подгружаемые файлы, а то код в объеме больше 10кб, займет много места в HTML низ (там лимит 64кб)

+1

608

Alex_63
а как свернуть в файл?

0

609

Lidia-Lada
Ну самый простой способ - отдельно сохранить код скрипта (то что внутри <script>...</script> ) и стиля(то что в тегах <style>) в файлы в Блокноте соответственно с расширением .js и .css, далее залить в Админку - Файлы и вставить

<link rel="stylesheet" type="text/css" href="ссылка на файл стиля" />
<script type="text/javascript" src="ссылка на файл скрипта"></script>

+1

610

Romych
А можно плеер из "Мультитрекового плеера в постах" как-то вставить в объявление с уже заготовленым списком треков?

Отредактировано Lidia-Lada (Сб, 26 Ноя 2016 17:15:39)

0

611

Lidia-Lada
Ни наю, с этим - ждите Ромыча, он автор скрипта, возможно он переделает код под вставку плеера в Объявление

0

612

Lidia-Lada написал(а):

Romych
А можно плеер из "Мультитрекового плеера в постах" как-то вставить в объявление с уже заготовленым списком треков?

если не принципиально чтоб он выглядел так же как в постах, то ничего особо не переделывая можно вставить в  Объявление радио плеер из темы - Радио на форум (HTML5)
они идентичны по свойствам, оба плеера работают с одинаковыми форматами, только в радиоплеере надо немного подправить стиль в последней части кода, то что жёлтым удалить

<div id="radio" style="position:fixed;left:22px;bottom:70px;z-index:20000;overflow-x:visible;width:171px;opacity: 0.9;text-align: center;"><div id="layer" style="position:absolute;height:100px;top:-2px;opacity: 0.6;width:170px;"></div><button id="pred" title="Предыдущая станция"> </button><button id="stop" title="Вкл/Выкл"></button><button id="sled" title="Следующая станция"></button><br>
<input id="zvyk" min="0" max="10" value="" type="range" step="1" title="Громкость"><br>
<button id="trk-list" title="Показать список станций"></button>
<div class="eq"><div class="b1">&nbsp;</div><div class="b2">&nbsp;</div><div class="b3">&nbsp;</div></div><div id="tracks"></div></div>

строка песни в трек листе формируется из составляющих:
n - это имя, название (name)
u - это ссылка на аудио (url)
c - это обложка альбома, фото артиста группы (cover)
помещается всё что относится к одной песне в фигурные скобки {...} и перечисляется через запятую, кроме последней строки

{n:'Название песни 1', u:'Ссылка на mp3', c:'ссылка на обложку альбома (фото артиста, группы)'},
{n:'Песня 2', u:'http://mp3.stream.tb-group.fm/trb.mp3?/;.mp3', c:'http://www.webdesign-flash.ro/p/rap/content/thumbnails/small21.jpg'}

0

613

Alex_63 написал(а):

Только бы коды свернуть в подгружаемые файлы, а то код в объеме больше 10кб, займет много места в HTML низ (там лимит 64кб)

учту, только боюсь сейчас будет несколько индивидуальных запросов на переделку внешнего вида плеера,
чтоб не править под каждый частный случай залитый файл подожду замечаний, пожеланий и рекомендаций от протестировавших

+1

614

Romych
завтра протестирую. В объявлении. Хотя внешний вид именно из плеера в постах понравился)
Вообще классная вещь! Респект!

0

615

Romych написал(а):

чтоб не править под каждый частный случай залитый файл подожду замечаний, пожеланий и рекомендаций от протестировавших

Ну кмк, скрипт в файле править проще и удобней... Ибо обновляется сразу у всех, а ведь может обнаружиться какой-нить трабл(или недочет) - не все сразу заменят скрипт на правленный.. (Ну а добавки - пожелания мон сделать отдельным кодом - дополнением, к примеру я так часто делаю)

0

616

Все работает.Спасибо)

Отредактировано Armavel (Сб, 26 Ноя 2016 21:46:04)

0

617

Romych написал(а):

олько боюсь сейчас будет несколько индивидуальных запросов на переделку внешнего вида плеера

А варианты интерфейса плеера будут представлены публике?
Хотелось бы поменьше/поуже, пластинку, скажем, раза в два меньше, но если такие будут, классно было бы потом посмотреть.

За труд спасибо!

0

618

там в стилях копалась. По идее такие вещи, как пластинка, ширины и высоты можно круутить как душе угодно)

и все же, можно в объявление запихнуть именно плеер из сприпта "Плеер в плейлистом"? Вещь очень класная со списком. Удобно.

0

619

Lidia-Lada написал(а):

и все же, можно в объявление запихнуть именно плеер из сприпта "Плеер в плейлистом"?

да, можно в Объявление, можно на отдельной странице, как составлять плейлист я описал выше (пост №612)

Код:
<style type="text/css"> 
@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('http://forumstatic.ru/files/0017/d8/50/55034.woff') format('woff'),
url('http://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;
}
 
#rad {
  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(http://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(http://forumstatic.ru/files/0012/72/15/89476.png) no-repeat scroll 0 0;}
#next {background: transparent url(http://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(http://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(http://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(http://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); }
}
</style>
 
<script type="text/javascript">
$(function() {
var playlist = [
{n:'Nigger rap', u:'http://kolber.github.io/audiojs/demos/mp3/01-dead-wrong-intro.mp3'},
{n:'Radio 2', u:'http://ic3.101.ru:8000/v13_1?userid=0&setst=c90sm1ju2r53vof0v6q7cf8g75}'},
{n:'Soundgarden - My wave', u:'http://cdndl.zaycev.net/93892/1894598/soundgarden_-_my_wave.mp3', c:'http://www.guitaristka.ru/imagegallery/albums/userpics/10001/thumb_Soundgarden_003.jpg'},
{n:'Диcкач', u:'http://mp3.stream.tb-group.fm/trb.mp3?/;.mp3', c:'http://www.webdesign-flash.ro/p/rap/content/thumbnails/small21.jpg'}
];

var audio=new Audio();var i=0;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;t+='<li data-audio-url="'+ur+'" data-cover-src="'+cov+'">'+(i+1)+'. <img src="'+cov+'" height="16"width="16"> '+nm+'</li>';}
t+='</ul>';$('#track').append(t);audio.volume=0.5;$('#volume').on('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');};return false;});if(!sessionStorage['act']){sessionStorage['act']='stop';};function playAct(){sessionStorage['act']!='stop'?audio.play():audio.pause()};function listAct(){$('#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');$('#action').text(ti);}});}
function vinil(){var c=$('li.active').data('cover-src');if(c=='undefined'||c==''){$('#cover img').attr('src','http://forumstatic.ru/files/0012/72/15/53582.png').addClass('spin');}else{$('#cover img').attr('src',c).removeClass('spin');}}
$('#play').on('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'});$('#cover img').removeClass('spin');$('#action').text('');}});var seekbar=$('#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>'};$('#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);$('#duration').html(m+'.'+s);$('#seekbar').attr('max',audio.duration);$('#seekbar').val(audio.currentTime);var p=Math.ceil((audio.currentTime/audio.duration)*100);$('#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;});$('#seekbar').on('change',function(){audio.currentTime=$(this).val();});$('#next').on('click',function(){i=$('#track').find('li.active').index();i=++i<playlist.length?i:0;audio.src=playlist[i].u;listAct();vinil();audio.currentTime=0;playAct();});$('#prev').on('click',function(){i=$('#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(){$('#next').trigger('click');});$('#track li').on('click',function(){audio.src=$(this).data('audio-url');listAct();playAct();$('#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);}
$('#plist').on('click',function(){$('#track ul').slideToggle('slow');});
});
</script>

<div id="rad">
<div id="cover">
<img height="86" width="86" align="left" src="http://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></div>
t3945 написал(а):

Хотелось бы поменьше/поуже, пластинку, скажем, раза в два меньше, но если такие будут, классно было бы потом посмотреть.

можно конечно, только если уменьшить размер пластинки, размер обложек соответственно тоже уменьшится,
если такой вариант устраивает, то могу сделать более компактный вариант стиля, впрочем вы и сами можете экспериментировать, никто вас в этом не ограничивает

+1

620

Romych написал(а):

Где брать ссылки на аудио

А с облака мейл или яндекса считывать медиафайл есть варианты? Бо как все таки критично людям самим заливать и выкладывать, а вариантов куда залить почти не осталось..

0


Вы здесь » Единый форум поддержки » Новые возможности форумов » Музыка в постах