" Чтобы музыку послушать,
Плеер включи поскорей,
И ритм твоей жизни,
С ним будет бодрей! "

Категория: Открытый КОД Lамастер

Исходники SCRIPT-ов... Players

Выпадающее МЕНЮ для плеера.

Может пригодиться начинающим вебмастерам, для установки на своих вебресурсах.

Открытый КОД:

19/10/2025 21:42

Код скрипта :

Образец работы скрипта

см. выше.
( № 1)

 <HTML> <HEAD> </HEAD> <body> <center><h1>Выпадающее меню.</h1> <br> <div class="center"> <table border="0" cellspacing="0" cellpadding="2" width="120" center> <tr> <td width="120" align="center" valign="top" class="copy"> <script language="javascript"> function popupw(URL,w,h,uid,dp,id){ if(!w||w<100)w=100; if(!h||h<100)h=100; if(!id)id=''; var www;if(!uid) uid='';if(!dp) dp=''; www=window.open(URL+id,'aod'+uid,'width='+w+',height='+h+',top=0,toolbar=no,personalbar=no,location=no,directories=no,statusbar=no,menubar=no,status=no,resizable=no,left=60,screenX=60,top=100,screenY=60'+dp); return false; } function pppwnew(URL) {return popupw(URL, 290, 70, 'radioaudioplayer', false, '');} </script> <table border="0" cellspacing="0" cellpadding="2" width="120"> <form name="rad" target="_blank" style="margin-bottom:0px;" onsubmit="pppwnew(this.id.value); return false;"> <tr><td colspan="2"><select name="id" tabindex="3""> <option value="#" selected> Выбор радиостанции </option> <option value="https://rusradio.hostingradio.ru/rusradio96.aacp">"РУССКОЕ Радио "</option> <option value="https://dorognoe.hostingradio.ru/radio"> "Дорожное Радио"</option> <option value="https://stream.kalina.fm/kalina96.aacp">Радио "Калина Красная"</option> <option value="https://icecast-vgtrk.cdnvideo.ru/mayakfm_mp3_128kbps">Радио " MАЯК "</option> <option value="https://s.aplus.fm/aplus_relax_128">Радио "@Plus Релакс"</option> <option value="https://online.100i6fm.ru/city">Радио "Сity"</option> <option value="https://radiopotok2.online/http://radio.4duk.ru/4duk128.mp3">Радио "Чипльдук"</option> <option value="https://a3.radioheart.ru:9002/RH7347">Радио "Кальян FM"</option> <option value="https://live.relaxfm.lv/02">Радио "Relax FM "</option> <option value="https://chanson.hostingradio.ru:8041/chanson256.mp3">Радио "Шансон"</option> <option value="https://europaplus.hostingradio.ru:8014/europaplus320.mp3">Радио "Европа ПЛЮС"</option> </select></td></tr> <tr><td width="100" align="center"> <input tabindex="2" type="Submit" type=button value="Жми слушать!" onClick="javascript:formHandler(this)"=onClick="radio;return false;"> </td> </tr></form></table> </table> <br></div> </center> </body> </html>
22/10/2025 22:10

Код скрипта - "ПЛЕЕР"

Образец работы скрипта:

( № 0)

 <HTML> <HEAD> <STYLE type=text/css> BODY { scrollbar-face-color:#1b1b1b; scrollbar-highlight-color:#585657; scrollbar-3dlight-color:#1b1b1b; scrollbar-darkshadow-color:#1b1b1b; scrollbar-shadow-color:#585657; scrollbar-arrow-color:#FF0000; scrollbar-track-color:#1b1b1b; } </STYLE> <link href="https://ded96.strana.de/r/plr/bgaudioplayer.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="https://ded96.strana.de/r/plr/bgaudioplayer.js"> /*********************************************** * HTML5 background audio player (c) Dynamic Drive (www.dynamicdrive.com) * Please keep this notice intact * Visit http://www.dynamicdrive.com/ for this script and 100s more. ***********************************************/ </script> </HEAD> <body> <center> <center><table width="220" border="0" cellspacing="0" cellpadding="0" background="img/bg.png"> <tr> <td width="10" align="center" valign="top" class="a_block"> </td> <td align="left" valign="top" class="news"><br /><DIV align="center"><fieldset class="counter"><legend> <table style=filter:glow(color=yellow strength=5)><font face="Viner Hand ITC" color="gold"size="4"><b> Дядя Ваня на даче </b></font></table> </legend></br><center></center> <DIV align="left"><IMG alt="Powered by SgS" src="https://radiopotok.ru/f/station_webp/512/1743.webp"width=220 height=60 ></DIV> <DIV align="center"> <table center> <tr> <td width="140" align="center" valign="top" class="copy"> <audio id="mybgplayer"> <source src="https://ic1.radiosignal.one/vanya-mp3" type="audio/mpeg"> <source src="MarionHarris-IAintGotNobody.ogg" type="audio/ogg"> </audio>  <font color="#777777" size="4"></font> <div id="mybgplayerui" class="bgplayerui"> <img class="play" src="https://ded96.strana.de/r/plr/play.png" data-pausesrc="https://ded96.strana.de/r/plr/pause.png" /> <img class="rewind" src="https://ded96.strana.de/r/plr/restart.gif" style="position:relative; left:-4px" /> <div class="volume"></div> </div> <script> var playerinstance=bgaudioplayer({ audioid: 'mybgplayer', // id of audio element audiointerface: 'mybgplayerui', // id of corresponding UI div autoplay: true, // auto play music? persistTimeLine: true, // Persist player's current timeline/ volume when moving from page to page? volume: 0.1, // Default volume (0.0 to 1.0) volumelevels: 15 // # of volume bars to show in UI }) </script> </td> </tr> </table> </DIV> </b></fieldset></DIV=""></td> <td width="10" align="right" valign="top" class="a_block"> </td> </tr> </table> </center> <br> </center> </body> </HTML>

25/10/2025 15:50

Код скрипта - "ПЛЕЕР c MENU"

Образец работы скрипта:

Скачать скрипт ( ЗДЕСЬ)

 <HEAD> </HEAD> <body> <center>  <div id="rsgs_container" style=""> #rsgs_script_hash</div> <script type="text/javascript">var rad_backcolor="#9C765C"; var rad_backcolor2="#9C765C"; var rad_textcolor="#ffffff"; var rad_bordercolor="#ffffff"; var rad_volumecolor="#00ffff"; var rad_logo = "black"; var rad_width=208; var rad_type = "horizontal"; var rad_autoplay = false;var rad_stations =[['#',' М Е Н Ю '],['https://pub0301.101.ru:8443/stream/air/mp3/256/100','Авторадио'],['https://dorognoe.hostingradio.ru/radio','Дорожное Радио'],['https://dfm-disc90.hostingradio.ru/disc9096.aacp','Дискач 90х'],['https://c22.radioboss.fm:8144/GamePlay','GamePlay Radio'],['https://europaplus.hostingradio.ru:8014/europaplus320.mp3','Европа Плюс'],['https://a3.radioheart.ru:9002/RH7347','Радио Кальян-FM'],['https://stream.kalina.fm/kalina96.aacp','Kaлина Красная'],['https://chanson.hostingradio.ru:8041/chanson256.mp3','Радио Шансон'],['https://radio7.hostingradio.ru:8040/radio7256.mp3','Радио на 7 холмах'],['https://cdn.pifm.ru/mp3','Radio Pi FM'],['https://ru1.volna.top/RuWave48','Русская Волна'],['https://pub0202.101.ru:8443/stream/pro/aac/64/144','Радио СССР'],['https://radiorecord.hostingradio.ru/naft96.aacp','Нафталин FM '],['#',' ']];</script> <script type="text/javascript" src="https://ded98.strana.de/r/r2/4/pl4sgs.js" charset="UTF-8"></script> </div> </center> </body>

30/10/2025 21:50

Код скрипта - "ПЛЕЕР c ЛИСТОМ исполнителей"

Образец работы Плеера:

Скачать Плеер ( ЗДЕСЬ ZIP = 88kb)

 <HTML> <HEAD> <title>Radio Player</title> <script type="text/javascript" src="list.min.js"></script> <script type="text/javascript" src="jquery-1.10.1.js"></script> <link rel="stylesheet" href="1player.css" media="all"> <script src="player.js" async></script> </HEAD> <body> <center>   <div class="header"> <a href="#top"><button class="buttontop" type="button">⭱</button></a> </div> <br> <center> <div id='player'> <audio autoplay controls='' id='audio' preload='none' tabindex='0'> <source id="primarysrc" src='https://radiopotok2.online/http://radio.4duk.ru/4duk128.mp3' /></audio> </div> </center> <br> <div id="test"> <input class="customSearch search" type="search" placeholder="Artist ..." /> <ul id='playlist' class='list'> <h5> Oldies </h5> <li><a class='chlist' href='https://streamingp.shoutcast.com/JamendoLounge'>Swinging Radio England.UK</a></li> <li><a class='chlist' href='https://edge03.streamonkey.net/antthue-yesterhits/stream/mp3'>Antenne TH. YESTERHITS</a></li> <li><a class='chlist' href='https://1a-60er.radionetz.de/1a-60er.mp3'>60er Radio</a></li> <li><a class='chlist' href='http://1a-70er.radionetz.de:8000/1a-70er.mp3'>70er Radio</a></li> <li><a class='chlist' href='https://s2-webradio.antenne.de/oldie-antenne'>Antenne Bayern Oldies</a></li> <li><a class='chlist' href='https://rsa.streamabc.net/regc-rsasachsenoldies7771147-mp3-192-7903832'>R.SA Oldie-Club</a></li> <li><a class='chlist' href='https://edge19.streamonkey.net/landeswelle-yesterhits?aggregator=rewrite/mp3-192/web'>Landeswelle Thr Oldies</a></li> <li><a class='chlist' href='https://streaming.brol.tech/rtfmlounge'>British Sixties Radio</a></li> <li><a class='chlist' href='https://vintageradio.ice.infomaniak.ch/vintageradio-high.mp3'>Vintage Radio</a></li> <li><a class='chlist' href='http://listen.57fm.com/fgrock'>Feel Good Rock</a></li> <li><a class='chlist' href='https://ice1.somafm.com/seventies-128-mp3'>SomaFM: Left Coast 70s</a></li> </ul> </div> </center> </body> </html>

05/11/2025 22:50

Код скрипта - "ПЛЕЕР"

Образец работы скрипта:

Скачать скрипт ( ЗДЕСЬ)

 <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> html{display:block!important}div#container{width:502px;position:relative;margin-top:0;margin-left:auto;margin-right:auto;text-align:left}body{text-align:center;margin:0;background-color:#000;color:#FFF}a{color:red;outline:none;text-decoration:underline}a:visited{color:red}a:active{color:red}a:hover{color:red;text-decoration:underline}#Table1{border:1px #FFF solid;background-color:navy;border-spacing:1px}#Table1 td{padding:0}#Table2{border:1px #FFF solid;background-color:navy;border-spacing:1px}#Table2 td{padding:0}#Table4{border:1px #FFF solid;background-color:navy;border-spacing:1px}#Table4 td{padding:0}#Table3{border:0 silver solid;background-color:transparent;border-spacing:1px}#Table3 td{padding:0}#Table3 td div{white-space:nowrap}#Table5{border:1px #FFF solid;background-color:navy;border-spacing:1px}#Table5 td{padding:0}#Table6{border:1px #FFF solid;background-color:navy;border-spacing:1px}#Table6 td{padding:0}#Image1{border:0 #000 solid}#wb_Station{background-color:transparent;border:0 #000 solid;padding:0}#Image2{border:0 #000 solid}#wb_Stream_Data{background-color:transparent;border:0 #000 solid;padding:0}#wb_Extern_Player{background-color:transparent;border:0 #000 solid;padding:0}#wb_spain{background-color:transparent;border:0 #000 solid;padding:0}#wb_french{background-color:transparent;border:0 #000 solid;padding:0}#wb_website{background-color:transparent;border:0 #000 solid;padding:0}#wb_problem{background-color:transparent;border:0 #000 solid;padding:0}#Empfehlung{border:0 #FFF solid;border-spacing:0}#Empfehlung td{padding:0}#Empfehlung td div{white-space:nowrap}#Empfehlung1{border:0 #FFF solid;border-spacing:0}#Empfehlung1 td{padding:0}#Empfehlung1 td div{white-space:nowrap}#Empfehlung2{border:0 #FFF solid;border-spacing:0}#Empfehlung2 td{padding:0}#Empfehlung2 td div{white-space:nowrap}#Empfehlung4{border:0 #FFF solid;border-spacing:0}#Empfehlung4 td{padding:0}#Empfehlung4 td div{white-space:nowrap}#wb_Text1{background-color:transparent;border:0 #000 solid;padding:0}#wb_Text2{background-color:transparent;border:0 #000 solid;padding:0}h1{font-family:Arial;color:red;font-size:14px;font-weight:700;line-height:16px;margin-top:0;margin-bottom:0}h2{font-family:Arial;color:#FFF;font-size:12px;font-weight:400;margin-top:0;margin-bottom:0}h3{font-family:Arial;color:#FFF;font-size:12px;font-weight:400;margin-top:0;margin-bottom:0;} </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </HEAD> <body> <center>  <div id="container" style="left: 0px; top: 5px; width: 0px; height: 0px; position:relative; margin-left:auto;margin-right:auto"> </div> <div id="container2" style="left: 0px; top: 5px; width: 320px; height: 60px; position:relative; margin-left:auto;margin-right:auto"> <table style="position:absolute;left:0px; top:5px;width:320px;height:60px; z-index:1;background-color:#000080;border:1px #FFFFFF solid;" cellpadding="0" cellspacing="1" id="Table6"> <tr> <td style="background-color:transparent;text-align:left;vertical-align:top;height:60px; width: 320px;"> <div id="wb_Player" style="position:absolute;left:20px;top:5px;width:280px; height:40px; z-index:7;padding:0;"> <audio controls style="width: 280px;height: 40px;" ><source src="http://pub0302.101.ru:8000/stream/pro/aac/64/114?">Externer Player <a class="we10" href="boneyM-.html" ><img border="0" src="sp1.png" width="42" height="42" alt="höre Golden Collection ( Boney M )"></a></audio> </div> </td> </tr> </table> </div> <script async="async" type="text/javascript"> $(document).ready(function(){ refreshTable(); }); function refreshTable(){ $('#playlist1').load('#;', function(){ setTimeout(refreshTable, 30000); }); } </script> </center> </body>

20/12/2025 17:20

Код скрипта - "ПЛЕЕР c ЛИСТОМ радио потоков"

Образец работы Плеера прокручивается на ТЛФ:

Скопировать HTML и скачать Плеер ( ЗДЕСЬ ZIP = 140kb)

 <HTML> <HEAD> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="shortcut icon" href="s/favicon.ico"> <title>LaMasters 📻RADIO Player🎧2</title> <meta name="Generator" content="#"> <meta name="keywords" content="#"> <meta name="description" content="#"> <meta property="og:image" content="i/mlm.png"> <meta name="yandex-verification" content="#" /> <script> function myClock() { var siteTime = new Date(); var second = siteTime.getTime(); document.getElementsByTagName("body")[0].style.background = "linear-gradient(rgb(255 255 255 / 25%), rgb(255 255 255 / 45%), rgb(8 93 112 / 33%)), url(https://ded56.strana.de/r/bg/nj26.jpg?t=" + second + ") no-repeat fixed"; document.getElementsByTagName("body")[0].style.backgroundSize = "100% 100%"; } </script>  <script src="s/jquery.min.js"></script> <script type="text/javascript" src="s/jquery-1.7.2.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> <script src="#" crossorigin="anonymous"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn-slide").click(function(){ $("#panel").slideToggle("slow"); $(this).toggleClass("active"); return false; }); }); </script> <link rel="stylesheet" href="s/w3.css"> <link rel="stylesheet" href="s/style.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-thumb { background: #ccf; } </style> </head> <body class="w3-black"> <div class="page-wrapper"> <style> @media only screen and (max-width: 300px) { .m_fl a{ font-size:10px; color: #aaf !important } .m_fl { width: 10px; } } </style> <div class="w3-padding-large" id="main"> <center> <script> window.onload = function () { document.getElementById('myHeader').style.display = 'none'; var ir = 1; var timed = setInterval(function () { ir++; if (ir == 50) { document.getElementById('myHeader').style.display = 'block'; } if (ir == 150) { document.getElementById('myHeader').style.display = 'none'; clearInterval(timed); } }, 100) } </script> <br/> <div width="48%" style="background: #085d70;border: solid 1px #6adef1a6;border-radius: 15px;box-shadow: 0px 2px 6px 1px #7ba1f7a6;"><br/><br/> <img class="logo_img" id="logo_img" src="https://ded56.strana.de/r/i/logo.png" height="80" style="background: url(blue.jpg) center center repeat; border-radius: 50%; padding: 18px; width: 160px; height: 160px;"/><br/> <center> <table width="36%" class="w3-center w3-padding-16 w3-section" style="background: url(s/back.png);border: solid 1px #6adef1a6;border-radius: 5px;box-shadow: 0px 2px 6px 1px #7ba1f7;padding: 5px;"> <tr><td align="center"><div class="title"></div></td></tr> <tr><td align="center" style="padding: 5px;border: solid 1px #6adef1;border-radius: 5px;box-shadow: 0px 2px 6px 1px #7ba1f7;background:#fdfd2e;"><div class="timer">00:00</div></td></tr> <tr><td align="center" style="padding: 5px;"> <div class="btn-ctn"> <div class="btn-action first-btn" onclick="previous()"> <div id="btn-faws-back"> <i class='fa fa-backward' style="color: #000000;"></i> </div> </div> <div class="btn-action" onclick="toggleAudio()"> <div id="btn-faws-play-pause"> <i class='fa fa-play' style="color: #000000;" id="icon-play"></i> <i class='fa fa-pause' style="color: #000000;display: none" id="icon-pause"></i> </div> </div> <div class="btn-action" onclick="next()"> <div id="btn-faws-next"> <i class='fa fa-forward' style="color: #000000;"></i> </div> </div> <div class="btn-mute" id="toggleMute" onclick="toggleMute()"> <div id="btn-faws-volume"> <i id="icon-vol-up" class='fa fa-volume-up' style="color: #000000;"></i> <i id="icon-vol-mute" class='fa fa-volume-mute' style="color: #000000;display: none" >🔈</i> </div> </div> </div> <button class="vol" style="width:50px;background: #FDFD56d1;border-radius: 5px;border: solid 2px #9856ff;padding: 5px;" onclick="document.getElementById('myAudio').volume-=0.1"><img src="s/v-.png" height="14"></button> <button class="vol" style="width:50px;background: #FDFD56d1;border-radius: 5px;border: solid 2px #9856ff;padding: 5px;" onclick="document.getElementById('myAudio').volume+=0.1"><img src="s/v.png" height="14"></button> </td></tr> </table> </center><br/> <p class="addtext" text-align="right">Copyright © 2010-<script type="text/javascript">document.write(new Date().getFullYear())</script> «LaMaster»</p> <div id="panel"> <div class="playlist-ctn"></div> </div> <a href="#" class="btn-slide" style="color: #fff;text-shadow: 0px -2px 3px #062670;font-size:16px;padding: 10px;display: flow;"><div class="pls" style="color: #fff;">РАДИО потоки </div></a><br/> </div></div> <br/><br/><br/> <p class="addtext" text-align="right">Copyright © 2010-<script type="text/javascript">document.write(new Date().getFullYear())</script> «LaMaster»</p> <br/> <style> .top-nav2 { background: #444242e8; height: 80px; display: flex; justify-content: center; align-items: center; overflow: hidden; width: 100%; position: fixed; left: 0; bottom: 0; } </style> <script type="text/javascript"> var goo = ""; var gooz = ""; function clock(){ $.ajax({ url: "#", success: function( response ) { if (response.title !== "") { $('#tits').text(response.artist.name + " - " + response.title); } } }); $.ajax({ url: "#", success: function( responsez ) { if (responsez.title !== "") { $('#titsz').text(responsez.artist.name + " - " + responsez.title); } } }); } setInterval(clock, 700); clock(); setInterval(function() { var goodsItem = document.getElementById("tits").innerHTML; if(goo !== goodsItem) { setTimeout("document.getElementById('overlay').style.display='block'", 2000); setTimeout("document.getElementById('overlay').style.animation='fades 2s linear'", 11000); setTimeout("document.getElementById('overlay').style.display='none'", 13000); goo = goodsItem; } }, 1000); setInterval(function() { var goodsItemz = document.getElementById("titsz").innerHTML; if(gooz !== goodsItemz) { setTimeout("document.getElementById('overlayz').style.display='block'", 2000); setTimeout("document.getElementById('overlayz').style.animation='fades 2s linear'", 12000); setTimeout("document.getElementById('overlayz').style.display='none'", 14000); gooz = goodsItemz; } }, 1000); </script> <audio id="myAudio" ontimeupdate="onTimeUpdate()"> <source id="source-audio" src="" type="audio/mpeg"> Your browser does not support the audio element. </audio> <script> function createTrackItem(index,name,duration){ var trackItem = document.createElement('div'); trackItem.setAttribute("class", "playlist-track-ctn"); trackItem.setAttribute("id", "ptc-"+index); trackItem.setAttribute("data-index", index); document.querySelector(".playlist-ctn").appendChild(trackItem); var playBtnItem = document.createElement('div'); playBtnItem.setAttribute("class", "playlist-btn-play"); playBtnItem.setAttribute("id", "pbp-"+index); document.querySelector("#ptc-"+index).appendChild(playBtnItem); var btnImg = document.createElement('i'); btnImg.setAttribute("class", "fas fa-play"); btnImg.setAttribute("height", "20"); btnImg.setAttribute("width", "20"); btnImg.setAttribute("id", "p-img-"+index); document.querySelector("#pbp-"+index).appendChild(btnImg); var trackInfoItem = document.createElement('div'); trackInfoItem.setAttribute("class", "playlist-info-track"); trackInfoItem.innerHTML = name document.querySelector("#ptc-"+index).appendChild(trackInfoItem); var trackDurationItem = document.createElement('div'); trackDurationItem.setAttribute("class", "playlist-duration"); trackDurationItem.innerHTML = duration; document.querySelector("#ptc-"+index).appendChild(trackDurationItem); } var listAudio = [ { name:"Радио Адам ", file:"https://hls-01-radioadam.hostingradio.ru/radioadam/playlist.m3u8?format=aac", duration:"LIVE", img:"https://ded56.strana.de/r/pl/img/ru/top/adam.jpg" }, { name:" БИМ Радио", file:"https://bimradio.hostingradio.ru/bimradio128.mp3", duration:"LIVE", img:"https://ded56.strana.de/r/pl/img/ru/top/bim.jpg" }, { name:"Радио дядя ВАНЯ на ДАЧЕ ", file:"https://ic1.radiosignal.one/vanya-mp3", duration:"LIVE", img:"https://ded56.strana.de/r/pl/img/ru/top/djdjvanya.jpg" }, { name:" Авторадио ", file:"https://pub0301.101.ru:8443/stream/air/mp3/256/100", duration:"LIVE", img:"https://ded56.strana.de/r/pl/img/ru/pop/avtoradio.jpg" }, { name:" Радио Родных Дорог ", file:"https://stream1.radiord.ru:8000/s0_64", duration:"LIVE", img:"https://ded56.strana.de/r/pl/img/ru/top/rrd.jpg" }, { name:" Такси FM - Москва ", file:"https://microit.n340.com:8443/VgMv0WV17ZVx1uuo_13_taxi_64", duration:"LIVE ", img:"https://ded56.strana.de/r/pl/img/ru/top/taxifm.jpg" }, { name:" Дорожное Радио ", file:"https://dorognoe.hostingradio.ru/radio", duration:"LIVE", img:"https://ded56.strana.de/r/pl/img/ru/pop/dorojnoe.jpg" }, { name:"Радио GamePlay ", file:"https://c22.radioboss.fm:8144/GamePlay", duration:"LIVE", img:"https://ded56.strana.de/r/pl/img/ru/pop/gameplay.jpg" }, { name:" Радио ДАЧА ", file:"https://vdfm.ru:8000/dacha?type=.aac", duration:"LIVE", img:"https://ded56.strana.de/r/pl/img/ru/pop/dacha.jpg" }, { name:" Радио Energy ", file:"https://pub0301.101.ru:8443/stream/air/mp3/256/99", duration:"LIVE ", img:"https://ded56.strana.de/r/pl/img/ru/pop/energy.jpg" }, { name:" Радио Европа Плюс ", file:"https://europaplus.hostingradio.ru:8014/europaplus320.mp3", duration:"LIVE ", img:"https://ded56.strana.de/r/pl/img/ru/pop/europa.jpg" }, { name:"Радио Жара FM ", file:"https://zharafm.hostingradio.ru/zharafm32.aacp", duration:"LIVE", img:"https://ded56.strana.de/r/pl/img/ru/top/zhara.jpg" }, { name:" Радио Звуки Природы ", file:"https://zvuki.amgradio.ru/Zvuki", duration:"LIVE", img:"https://ded56.strana.de/r/pl/img/ru/top/zvukinatur.jpg" }, { name:" Радио ИСКАТЕЛЬ ", file:"https://iskatel.hostingradio.ru:8015/iskatel-320.aac", duration:"LIVE", img:"https://ded56.strana.de/r/pl/img/ru/top/iskatel.jpg" }, { name:" Радио KAZAK fm ", file:"https://radio.kazak.fm/kazak_fm.mp3", duration:"LIVE ", img:"https://ded56.strana.de/r/pl/img/ru/top/kazak.jpg" }, { name:" Радио Маруся FM ", file:"https://cdn.radio-holding.ru/marusya_default", duration:"LIVE ", img:"https://ded56.strana.de/r/pl/img/ru/top/marusya.jpg" }, { name:"УМНОЕ Радио ", file:"https://radio.sarov.info/radio/8010/clever-radio/", duration:"LIVE", img:"https://ded56.strana.de/r/pl/img/ru/top/umnoe.jpg" }, { name:" Радио МАКС fm ", file:"https://maksfm.hostingradio.ru/maksfm128.mp3", duration:"LIVE", img:"https://ded56.strana.de/r/pl/img/ru/top/maxfm.jpg" }, { name:" НАШЕ Радио ", file:"https://nashe1.hostingradio.ru/nashe-128.mp3", duration:"LIVE", img:"https://ded56.strana.de/r/pl/img/ru/top/nasheradio.jpg" }, { name:" Радио Орфей ", file:"https://orfeyfm.hostingradio.ru:8034/orfeyfm192.mp3", duration:"LIVE ", img:"https://ded56.strana.de/r/pl/img/ru/top/orfey.jpg" }, { name:" Радио СОНЯ ", file:"https://rr-sonya.hostingradio.ru/sonya96.aacp", duration:"LIVE ", img:"https://ded56.strana.de/r/pl/img/ru/top/radiosonya.jpg" }, { name:"ABBA ", file:"https://2.mystreaming.net/er/abba/icecast.audio", duration:"LIVE", img:"https://ded56.strana.de/r/https://kibik.strana.de/r/oldies/abba.jpg" }, { name:"Boney M ", file:"https://pub0302.101.ru:8000/stream/pro/aac/64/114?", duration:"LIVE", img:"https://kibik.strana.de/r/oldies/boneym.jpg" }, { name:"Black Sabbath ", file:"https://2.mystreaming.net/er/blacksabbath/icecast.audio", duration:"LIVE", img:"https://kibik.strana.de/r/oldies/blacksabbath.jpg" }, { name:"Summer Dance ", file:"https://radiorecord.hostingradio.ru/summerparty96.aacp", duration:"LIVE", img:"https://ded56.strana.de/r/pl/img/ru/top/summerdance.jpg" }, { name:"Donna Summer ", file:"https://2.mystreaming.net/er/donnasummer/icecast.audio", duration:"LIVE", img:"https://kibik.strana.de/r/oldies/donna.jpg" }] for (var i = 0; i < listAudio.length; i++) { createTrackItem(i,listAudio[i].name,listAudio[i].duration); } var indexAudio = 0; function loadNewTrack(index){ var player = document.querySelector('#source-audio') player.src = listAudio[index].file document.querySelector('.title').innerHTML = listAudio[index].name; document.querySelector('.logo_img').src = listAudio[index].img; this.currentAudio = document.getElementById("myAudio"); this.currentAudio.load() this.toggleAudio() this.updateStylePlaylist(this.indexAudio,index) this.indexAudio = index; } var playListItems = document.querySelectorAll(".playlist-track-ctn"); for (let i = 0; i < playListItems.length; i++){ playListItems[i].addEventListener("click", getClickedElement.bind(this)); } function getClickedElement(event) { for (let i = 0; i < playListItems.length; i++){ if(playListItems[i] == event.target){ var clickedIndex = event.target.getAttribute("data-index") if (clickedIndex == this.indexAudio ) { // alert('Same audio'); this.toggleAudio() $.ajax({ url: "#", cache: false, success: function(html){ $("#content").html(html); } }); }else{ loadNewTrack(clickedIndex); } } } } document.querySelector('#source-audio').src = listAudio[indexAudio].file document.querySelector('.title').innerHTML = listAudio[indexAudio].name var currentAudio = document.getElementById("myAudio"); currentAudio.load() currentAudio.onloadedmetadata = function() { document.getElementsByClassName('duration')[0].innerHTML = this.getMinutes(this.currentAudio.duration) }.bind(this); var interval1; function toggleAudio() { if (this.currentAudio.paused) { document.querySelector('#icon-play').style.display = 'none'; document.querySelector('#icon-pause').style.display = 'block'; document.querySelector('#ptc-'+this.indexAudio).classList.add("active-track"); this.playToPause(this.indexAudio) this.currentAudio.play(); $('#player-css').css('background', 'url("https://ded56.strana.de/r/bg/nj26.jpg") repeat center center'); $('#player-css').css('background-size', '100% 100%'); $('#logo_img').css('background', 'url("https://ded56.strana.de/r/s/661.gif") repeat center center'); }else{ document.querySelector('#icon-play').style.display = 'block'; document.querySelector('#icon-pause').style.display = 'none'; this.pauseToPlay(this.indexAudio) this.currentAudio.pause(); $('#player-css').css('background', 'url("s/back.png") repeat center center'); $('#logo_img').css('background', 'url("s/back.png") repeat center center'); } } function pauseAudio() { this.currentAudio.pause(); clearInterval(interval1); } var timer = document.getElementsByClassName('timer')[0] var barProgress = document.getElementById("myBar"); var width = 0; function onTimeUpdate() { var t = this.currentAudio.currentTime timer.innerHTML = this.getMinutes(t); this.setBarProgress(); if (this.currentAudio.ended) { document.querySelector('#icon-play').style.display = 'block'; document.querySelector('#icon-pause').style.display = 'none'; this.pauseToPlay(this.indexAudio) if (this.indexAudio < listAudio.length-1) { var index = parseInt(this.indexAudio)+1 this.loadNewTrack(index) } } } function setBarProgress(){ var progress = (this.currentAudio.currentTime/this.currentAudio.duration)*100; document.getElementById("myBar").style.width = progress + "%"; } function getMinutes(t){ var min = parseInt(parseInt(t)/60); var sec = parseInt(t%60); if (sec < 10) { sec = "0"+sec } if (min < 10) { min = "0"+min } return min+":"+sec } var progressbar = document.querySelector('#myProgress') progressbar.addEventListener("click", seek.bind(this)); function seek(event) { var percent = event.offsetX / progressbar.offsetWidth; this.currentAudio.currentTime = percent * this.currentAudio.duration; barProgress.style.width = percent*100 + "%"; } function forward(){ this.currentAudio.currentTime = this.currentAudio.currentTime + 5 this.setBarProgress(); } function rewind(){ this.currentAudio.currentTime = this.currentAudio.currentTime - 5 this.setBarProgress(); } function next(){ if (this.indexAudio <listAudio.length-1) { var oldIndex = this.indexAudio this.indexAudio++; updateStylePlaylist(oldIndex,this.indexAudio) this.loadNewTrack(this.indexAudio); } } function previous(){ if (this.indexAudio>0) { var oldIndex = this.indexAudio this.indexAudio--; updateStylePlaylist(oldIndex,this.indexAudio) this.loadNewTrack(this.indexAudio); } } function updateStylePlaylist(oldIndex,newIndex){ document.querySelector('#ptc-'+oldIndex).classList.remove("active-track"); this.pauseToPlay(oldIndex); document.querySelector('#ptc-'+newIndex).classList.add("active-track"); this.playToPause(newIndex) } function playToPause(index){ var ele = document.querySelector('#p-img-'+index) ele.classList.remove("fa-play"); ele.classList.add("fa-pause"); } function pauseToPlay(index){ var ele = document.querySelector('#p-img-'+index) ele.classList.remove("fa-pause"); ele.classList.add("fa-play"); } function toggleMute(){ var btnMute = document.querySelector('#toggleMute'); var volUp = document.querySelector('#icon-vol-up'); var volMute = document.querySelector('#icon-vol-mute'); if (this.currentAudio.muted == false) { this.currentAudio.muted = true volUp.style.display = "none" volMute.style.display = "block" }else{ this.currentAudio.muted = false volMute.style.display = "none" volUp.style.display = "block" } } </script> </center> </body></html>

Все скрипты предоставлены исключительно для ознакомления.

Прекрасно работают в Mozilla FireFox и Google Chrom

Lаmaster

Дата: /

Выпадающее МЕНЮ для плеера.

Открытый КОД:

Код скрипта :

Код скрипта - "ПЛЕЕР"

Код скрипта - "ПЛЕЕР c MENU"

Код скрипта - "ПЛЕЕР c ЛИСТОМ исполнителей"

Код скрипта - "ПЛЕЕР"

Код скрипта - "ПЛЕЕР c ЛИСТОМ радио потоков"

Все скрипты предоставлены исключительно для ознакомления.

Прекрасно работают в Mozilla FireFox и Google Chrom