Актуальная на дынный момент версия - Мультитрековый плеер v2
Предыдущие версии с подробными инструкциями актуальными до сих пор:
Мультитрековый плеер в постах (плеер с плейлистом) v1.0
Мультитрековый плеер в постах (плеер с плейлистом) v1.1
Музыка в постах
Сообщений 641 страница 660 из 765
Поделиться1Пн, 3 Авг 2009 18:09:27
Поделиться641Ср, 30 Ноя 2016 19:27:29
Ни наю.. выдает ошибку 503, даж не открывается
А что за браузер и антивирус? Может антивир блочит? Еще у одного человека с ним проблемы, но к сожалению аналогов других по выпрямлению ссылки с облака не нашел..
Поделиться642Ср, 30 Ноя 2016 19:36:38
kolobdur74
Ну сейчас он у мну открылся, минут 40 назад пробовал - не открывался, мон сделать предположение, что сервис нестабильный и временами падает
Поделиться643Чт, 1 Дек 2016 09:23:20
Вот же ж
Действительно сегодня уже не работает музыка, ни из ВК ни из Яндекс-музыка.
Короче плеер мега, надо его финализировать так сказать и пользоваться этой красотой. Видимо его надо заливать себе на сайт, в файлы js?
Надо только наверное отдельную тему под него и несколько штук вариантов.
-Мне лично нужен будет вариант для вставки на свои страницы и без фото, только пластинка.
-И точно такой же вариант для форума как здесь выложен с фото исполнителей, но если есть такая возможность, то только для админов. (Тут можно по идее привести только вид кода для поста, так как сам стиль останется тот же, а код просто вставлять в разные посты меняя ссылки на песни).
Поделиться644Чт, 1 Дек 2016 09:41:20
kleo3333
Я же выложил вам вариант без фото, вы не заметили? И выложил вариант для отдельных страниц, тот что просили под Объявление
Поделиться645Чт, 1 Дек 2016 12:57:08
Заметил конечно. Но мню нужно без фото для объявления (на страницы). А вы дали для форума видимо
Ещё такая штука, вставляя ссылку с яндекс-диска, музыка не проигрывается. Но когда нажимаешь редактировать и вставляешь ту же ссылку (она отображается уже вся и очень длинная), то песня играет.
Добавлено спустя 1 час 12 минут 21 секунду:
Ещё один неприятный (но легко исправляемый) момент. Я добавлял сейчас ссылки в плеер, это получается альбом исполнителя. Так вот вставить можно 16 треков. Далее меню для вставки уходит вниз за границу монитора и нажать кнопку Готово не представляется возможным. Приходится ещё пару треков удалить, кнопка появляется тогда.
Добавлено спустя 1 час 41 минуту 56 секунд:
И ещё просьба для обновы. Можно сделать нумерацию треков не с 1,2,3.... а с 01, 02, 03. Так как когда треков больше 9 уже не так красиво смотрится плейлист.
Отредактировано kleo3333 (Чт, 1 Дек 2016 14:39:04)
Поделиться646Чт, 1 Дек 2016 13:57:36
Доброго времени суток,подскажите, пожалуйста, наиболее удобный, небольшой плеер для музыки в постах, который остается активно используемым и по сей день. В каталоге есть множество вариантов, но как я успела заметить, некоторые сайты с аудио переехали/закрылись и скрипт под них больше не работает.
Нужен небольшой плеер, буквально строчка.
Воспользовались данным скриптом:
<!--audio в одном v.2.4--> <script type="text/javascript"> var player; $(function(){ $('td#button-code').before('<td style=\'background-image:url("http://uploads.ru/i/W/Q/P/WQPBO.gif")\' onclick="tag_play()"><img src="/i/blank.gif" title="Загрузить музыку"></td>'); $('div.post-content p').map(function () { text = $(this).html(); if(text.indexOf("pleer.com") != -1) { player = /\[audio\](.*?)\/tracks\/(.*?)\[\/audio\]/gi $(this).html(text.replace(player, "<br /><embed src='http://embed.pleer.com/track?id=$2' type='application/x-shockwave-flash' wmode='transparent' width='550' height='42'></embed>")); } if(text.indexOf(".mp3") != -1) { player = /\[audio\](.*?)\[\/audio\]/gi $(this).html(text.replace(player, "<br /><embed src='http://www.demo-music.ru/pleer/pleer4.swf' type='application/x-shockwave-flash' allowscriptaccess='always' wmode='transparent' flashvars='comment=demo-music.ru&st=http://www.demo-music.ru/pleer/style_pleer.txt&file=$1' width='470' height='33'>")); } }); }); function tag_play() {var FoundErrors = ''; var enterURL = prompt("Введите ссылку на на музыку с pleer.com или прямую ссылку формата .mp3 ", "http://"); if (!enterURL) {FoundErrors += " " + error_no_url;} if (FoundErrors) {alert("Ошибка!" + FoundErrors); return;} insert("[audio]" + enterURL + "[/audio]");} </script>
Но, к сожалению, он не сработал, несмотря на то, что сделали все как нужно.
Использовали эту ссылку в посте:
[audio]http://vozmimp3.com/s1/down3/6-3v4-p7-d6bebcce13255b/Splin__Proch_Iz_Noej_Golovy.mp3[/audio]
Подскажите, пожалуйста, в чем проблема?
С уважением, Nordpolarmeer
Отредактировано Nordpolarmeer (Чт, 1 Дек 2016 14:36:38)
Поделиться647Чт, 1 Дек 2016 14:41:49
Возьмите этот
<!--audio в одном v.2.5.1--> <script type="text/javascript"> var player; $(function(){ $('td#button-code').before('<td style=\'background-image:url("http://uploads.ru/i/W/Q/P/WQPBO.gif");background-position:center center;\' onclick="tag_play()"><img src="/i/blank.gif" title="Загрузить музыку"></td>'); $('div.post-content p').map(function () { text = $(this).html(); if(text.indexOf("zippyshare.com") != -1) { player = /\[audio\]http:\/\/www(\d+)\.zippyshare\.com\/v\/(.*?)\/file\.html\[\/audio\]/gi $(this).html(text.replace(player, "<br /><embed type='application/x-shockwave-flash' src='http://api.zippyshare.com/api/mediaplayer/mediaplayer.swf' flashvars='height=20&width=400&file=http://www$1.zippyshare.com/downloadMusic%3Fkey%3D$2%26&volume=80&autostart=false&frontcolor=0x000000&backcolor=0xffffff&lightcolor=0x000000&type=flv' quality='high' menu='false' wmode='transparent' allowscriptaccess='always' height='20' width='400' name='mp3player' border='0' style='margin-bottom: 6px;'/>"));} if(text.indexOf("promodj.com") != -1) { player = /\[audio\](.*?)promodj\.com\/(.*?)\/(\d+)\/(.*?)\[\/audio\]/gim $(this).html(text.replace(player, "<br /><iframe src='http://promodj.com/embed/$3/big' width='100%' height='70' style='min-width: 450px; max-width: 900px' frameborder='0' allowfullscreen></iframe>")); } if(text.indexOf("prostopleer.com") != -1) { player = /\[audio\](.*?)\/tracks\/(.*?)\[\/audio\]/gi $(this).html(text.replace(player, "<br /><embed src='http://embed.prostopleer.com/track?id=$2' type='application/x-shockwave-flash' wmode='transparent' width='411' height='28'></embed>")); } if(text.indexOf("soundcloud.com") != -1) { player = /\[audio\]<iframe width=\"100%\" height=\"166\" scrolling=\"no\" frameborder=\"no\" src=\"(.*?)soundcloud\.com(.*?)\"><\/iframe>\[\/audio\]/gim $(this).html(text.replace(player, "<br /><iframe width='100%' height='166' scrolling='no' frameborder='no' src='$1soundcloud.com$2'></iframe>")); } if(text.indexOf(".mp3") != -1) { player = /\[audio\](http:\/\/[^\s<"]+?.mp3)\[\/audio\]/gi $(this).html(text.replace(player, "<br /><embed src='http://www.demo-music.ru/pleer/pleer4.swf' type='application/x-shockwave-flash' allowscriptaccess='always' wmode='transparent' flashvars='comment=demo-music.ru&st=http://www.demo-music.ru/pleer/style_pleer.txt&file=$1' width='470' height='33'>")); } }); }); function tag_play() {var FoundErrors = ''; var enterURL = prompt("Введите ссылку на на музыку с promodj.com, zippyshare.com, prostopleer.com, soundcloud.com или прямую ссылку формата .mp3 ", "http://"); if (!enterURL) {FoundErrors += " " + error_no_url;} if (FoundErrors) {alert("Ошибка!" + FoundErrors); return;} insert("[audio]" + enterURL + "[/audio]");} </script>
Мне оч. нравится. Конечно надо понимать, что ссылки быстро умирают и трек уже не будет играть...
Поделиться648Чт, 1 Дек 2016 23:03:42
maxlength="100"size="30" placeholder="http://Ссылка на аудиофайл"
увеличил
Ещё один неприятный (но легко исправляемый) момент. Я добавлял сейчас ссылки в плеер, это получается альбом исполнителя. Так вот вставить можно 16 треков. Далее меню для вставки уходит вниз за границу монитора и нажать кнопку Готово не представляется возможным. Приходится ещё пару треков удалить, кнопка появляется тогда.
исправлено
И ещё просьба для обновы. Можно сделать нумерацию треков не с 1,2,3.... а с 01, 02, 03. Так как когда треков больше 9 уже не так красиво смотрится плейлист.
добавлено
все правки включены в первую версию - Музыка в постах
Но мню нужно без фото для объявления (на страницы).
с формой для составления плейлиста или вручную треки добавлять будете как я описывал в посте №658 ?
Поделиться649Чт, 1 Дек 2016 23:21:31
А с облака мейл или яндекса считывать медиафайл есть варианты? Бо как все таки критично людям самим заливать и выкладывать, а вариантов куда залить почти не осталось..
кажется я нашёл способ выпрямления ссылок с Dropbox, у меня там хранится несколько в аудио файлов, протестировал их через вот этот выпрямитель
нас интересует ссылка на скачивание
Поделиться650Пт, 2 Дек 2016 01:27:42
кажется я нашёл способ выпрямления ссылок с Dropbox
Ну, значит есть выпрямители для Dropbox, мейла и яндекса.. Если бы еще был более стабильным выпрямитель https://rocld.com/ , то больше считай и ничего и не надо..
Поделиться651Пт, 2 Дек 2016 06:43:19
с формой для составления плейлиста или вручную треки добавлять будете как я описывал в посте №658 ?
вручную, там же все легко и понятно.
Поделиться652Сб, 3 Дек 2016 02:00:06
вручную, там же все легко и понятно.
kleo3333
испытайте такой вариант без фото для отдельных страниц
<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('//forumstatic.ru/files/0017/d8/50/55034.woff') format('woff'), url('//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(//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(//forumstatic.ru/files/0012/72/15/89476.png) no-repeat scroll 0 0;} #next {background: transparent url(//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(//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"}, {n:"The Black Queen - The End Where We Start (2016 live version)",u:"http://cdndl.zaycev.net/834698/3963010/The+Black+Queen_-_The+End+Where+We+Start.mp3"}, {n:"The Black Queen - Distanced (2016 live version)",u:"http://rorg.zf.fm/3/8a/the_black_queen_-_distanced_(zv.fm).mp3?download=force"}, {n:"The Black Queen - Secret Scream (2016 live version)",u:"http://cdndl.zaycev.net/834698/3963007/The+Black+Queen_-_Secret+Scream.mp3"}, {n:"The Black Queen - Maybe We Should Non-Consent",u:"http://cdndl.zaycev.net/834698/3963003/The+Black+Queen_-_Maybe+We+Should+%2F+Non-Consent.mp3"}, {n:"The Black Queen - Ice To Never (2016 live version)",u:"http://cdndl.zaycev.net/834698/3963011/The+Black+Queen_-_Ice+to+Never.mp3"}, {n:"The Black Queen – Apocalypse Morning",u:"http://rorg.zf.fm/e/4c/the_black_queen_-_apocalypse_morning_(zf.fm).mp3?download=force"}, {n:"The Black Queen — That Death Cannot Touch",u:"http://rorg.zf.fm/0/f6/the_black_queen_-_that_death_cannot_touch_(zv.fm).mp3?download=force"} ]; 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;i<9?t+='<li data-audio-url="'+ur+'">0'+(i+1)+'. '+nm+'</li>':t+='<li data-audio-url="'+ur+'">'+(i+1)+'. '+nm+'</li>';}t+='</ul>';$('#track').append(t);audio.volume=0.5;$('#volume').live('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(){$('#cover img').addClass('spin');}$('#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'});$('#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').live('change',function(){audio.currentTime=$(this).val();});$('#next').live('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').live('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').live('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').live('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> <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> <input type="range" step="any" id="seekbar" value="0" max=""> <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>
Поделиться653Пн, 5 Дек 2016 08:17:38
[quote="Romych"]<style type="text/css"> #form-audio {background: url(//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('//forumstatic.ru/files/0017/d8/50/55034.woff') format('woff'), url('//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(//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(//forumstatic.ru/files/0012/72/15/89476.png) no-repeat scroll 0 0;} #next {background: transparent url(//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(//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(//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(//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"> <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> <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="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> <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> <input type="range" step="any" id="seekbar" value="0" max=""> <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','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>[/quote]
Вот он долгожданный аудиоплеер!!! Выражаю огромную БЛАГОДАРНОСТЬ автору!!! проделана колоссальная работа, которая заслуживает только одного: БРАВО!!! Ну. и соответственно самый жирный ПЛЮС!!!
Отредактировано Вдумчивый (Пн, 5 Дек 2016 08:32:37)
Поделиться654Пн, 5 Дек 2016 09:14:04
Здравствуйте ребята . Да давно ждали что то подобное . Но у меня ничего не получается помогите.
у меня на раб. столе лежит песня в мп3 как её вставить в этот плеер ???? я не понимаю
Поделиться655Пн, 5 Дек 2016 11:33:18
у меня на раб. столе лежит песня в мп3
Начать нужно с того, что песня не должа лежать на рабочем столе а быть доступна по онлайн ссылке.
Если это ваша песня (записанный вами трек), рекомендую хостинг realmusic.ru, он сделан для музыкантов, ссылки вставляются оттуда ок, статичные и никогда не меняются.
Если это коммерческий продукт (пиратская копия), то ищите ее аналог на тех же zaycev.net и копируйте ссылку оттуда (в инструкции к скрипту все это есть).
Поделиться656Пн, 5 Дек 2016 12:05:36
t3945
Здравствуйте . Я попробую Вам пояснить . Я знаю прекрасно где и что должно лежать .
Вы не внимательно прочитали то.что я написал. Я обратился за помощью .а не за нравоучениями .
Об этом плеере давно шёл разговор и я писал и просил его сделать . Щас я хотел узнать можно ли вставить туда ссылку вот эту например залитую на яндекс диск . https://yadi.sk/d/04G_vdsu32FrKU
и как оформить этот плеер .
Поделиться657Пн, 5 Дек 2016 12:42:26
я писал и просил его сделать
И не только Вы. Первая заявка была от меня.
Поделиться658Пн, 5 Дек 2016 13:49:53
t3945
Здравствуйте . Я попробую Вам пояснить . Я знаю прекрасно где и что должно лежать .
Вы не внимательно прочитали то.что я написал. Я обратился за помощью .а не за нравоучениями .
Об этом плеере давно шёл разговор и я писал и просил его сделать . Щас я хотел узнать можно ли вставить туда ссылку вот эту например залитую на яндекс диск . https://yadi.sk/d/04G_vdsu32FrKU
и как оформить этот плеер .
Выкать мне не надо.
Как было написано, так и пояснил, дыши ровнее.
Поделиться659Пн, 5 Дек 2016 14:34:05
Щас я хотел узнать можно ли вставить туда ссылку вот эту например залитую на яндекс диск . https://yadi.sk/d/04G_vdsu32FrKU
Выпрямить ссылку с яндекса и мейла можно через этот сокращатель ссылок: https://rocld.com/ - с его ссылками данный плеер работает нормально, но сам сокращатель работает не стабильно, на данный момент он опять лежит. Других вариантов с яндекса и мейла пока не найдено.
Поделиться660Пн, 5 Дек 2016 15:25:05
Я проверял ссылки с яндекс-диска и яндекс-музыка, soundcloud
Песни играют 1 день или чуть дольше... Так что их не стоит даже обсуждать