Ning Network Tips - Archived Tips

462 members

Description

This Group contains archived Ning Tips. To add a new tip, please go here: Add Ning Tips & Tricks

To view new Ning Tips go here: Ning Tips & Tricks Forum.

Comments Entries Members

Mp3 player for Ning 3.0 - created by me

by Themes - Rosas Negras

Mar 20, 2021

// AGGIUNGI QUESTI CODICI IN GLOBAL CSS //

/ * Aspetto del player audio * /
#player {position: relative}
#playlist, #player {
max-width: 500px;
imbottitura: 20px;
margine: 0 auto;
blocco di visualizzazione;
larghezza: 100%;
}
#playlist {
margin: 0 auto 20px auto;
blocco di visualizzazione;
text-align: center;
dimensione del carattere: 15px; / * Dimensione caratteri * /
font-family: 'Trebuchet MS', Trabuchet, Verdana, sans-serif;
spessore del carattere: normale;
}
#player {
/ * Immagine di sfondo del primo contenitore * /
background: url ( https: //storage.ning.com/topology/rest/1.0/file/get/7983770066? prof ... );
dimensione dello sfondo: 100%;
imbottitura: 138px 7px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border: 5px ridge # 800000! important;
}
#audio {
larghezza: 100%;
margine: 0 auto;
display: blocco in linea;
posizione: assoluta;
larghezza massima: 300 px;
in basso: 0;
sinistra: 0;
destra: 0;
}
#player: after {
/ * Immagine animata * /
content: url (nonperora);
padding-left: 10px;
}
#playlist {
background: # 000000; / * Sfondo del secondo contenitore * /
border-top: 2px ridge # 800000;
text-align: sinistra;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
bordo: 5px riquadro # 800000! important;
}
#playlist li, #playlist ul li {
background-image: none;
tipo di stile elenco: nessuno;
imbottitura: 4px;
margine: 3px;
bordo: 3px inserto # 800000! important;
}
#playlist li a {
color: #CCC; / * Colore del brano musicale * /
background: # 000; / * Sfondo del brano musicale * /
padding: 7px 5px;
blocco di visualizzazione;
padding-left: 10px;
decorazione del testo: nessuna;
}
#playlist li a: hover {
background: # 800000; / * Colore dello sfondo al passare del mouse * /
text-decoration: none;
}
#playlist .active a {
color: # eed255; / * Colore del brano attivo * /
font-style: italic;
spessore del carattere: grassetto;
decorazione del testo: nessuna;
}
#playlist .active a: before {
/ * Icona prima del brano attivo * /
content: "\ 25B6";
colore: #CCC;
stile del carattere: normale;
padding-right: 8px;
}
#playlist .active a: hover {
color: #CCC; / * Colore del brano attivo al passaggio del mouse * /
}
#vplaylist, #vplayer {
width: 400px; / * Larghezza del contenitore * /
padding: 20px;
margine: 0 auto;
blocco di visualizzazione;
text-align: center;
}
#vplayer {
padding: 10px 20px;
sfondo: # 000; / * Colore di sfondo del primo contenitore * /
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
video {
larghezza: 400 px; / * Larghezza del player * /
padding-top: 10px;
margine: 0 auto;
display: inline-block
}
#vplaylist {
margin: 0 auto 20px auto;
blocco di visualizzazione;
sfondo: # 424242; / * Colore di sfondo del secondo contenitore * /
border-top: 5px solid # 9F111B;
border-bottom-left-right-radius: 10px;
border-bottom-right-radius: 10px;
text-align: sinistra;
dimensione del carattere: 12px;
famiglia di caratteri: "Trebuchet MS", Trabucco, Verdana, sans-serif;
spessore del carattere: normale;
}
#vplaylist li, #vplaylist ul li {
immagine di sfondo: nessuna;
tipo di stile elenco: nessuno;
imbottitura: 0;
margine: 0;
}
#vplaylist li a: hover {
background: # 9F111B; / * Colore di sfondo al passaggio del mouse * /
text-decoration: none;
}
#vplaylist .active a {
color: # B11623; / * Colore del video attivo * /
font-style: italic;
decorazione del testo: nessuna;
}
#vplaylist .active a: before {
/ * Icona prima del video attivo * /
content: "\ 25B6";
colore: #CCC;
stile del carattere: normale;
padding-right: 8px;
}
#vplaylist .active a: hover {
color: # 222; / * Colore del video attivo al passaggio del mouse * /
}
#playlist {max-height: 400px; overflow-y: auto; }
#player {position: relative}

// AGGIUNGI QUESTI CODICI SOCIAL SITE MANAGER REPARTO CODICI PERSONALIZZATI NELLA TESTA //

<!-- Audio player JS code start -->

<script>
document.addEventListener('DOMContentLoaded', lifeGiver)
function lifeGiver() {
var audio;var playlist;var tracks;var current;
initaudio();
function initaudio(){
current=0;
audio=x$('audio');
playlist=x$('#playlist');
tracks=playlist.find('li a');
len=tracks.length-1;
audio[0].volume=1;
playlist.find('a').click(function(e){e.preventDefault();
link=x$(this);
current=link.parent().index();
runaudio(link,audio[0])});
audio[0].addEventListener('ended',function(e){current++;if(current>len){current=0;link=playlist.find('a')[0]}else{link=playlist.find('a')[current]}runaudio(x$(link),audio[0])})}function runaudio(link,player){player.src=link.attr('href');
par=link.parent();
par.addClass('active').siblings().removeClass('active');
audio[0].load();
audio[0].play()}
}

</script>

<!-- Audio player JS code end -->

//THESE ARE THE CODES TO INSERT IN HTML IN ANY PAGE YOU WANT AND WHEN CHANGING THE SONGS, REMEMBER THAT THE FIRST SONG GOES TO ADD TWICE//

<div id = "player"> <br />
<audio id = "audio" tabindex = "0" preload = "auto" controls = "controls"> <br />
<source src = "https: // storage. ning.com/topology/rest/1.0/file/get/8268959071?profile=original "type =" audio / mp3 "/> <br />
Il tuo browser non supporta HTML5. <br />
</audio> </ div>
<ul id = "playlist">
<li class = "active"> <a href="https://storage.ning.com/topology/rest/1.0/file/get/8268959071?profile=original"> 1) The Agonist- Thank You Pain </a> </li>
<li> <a href = "https://storage.ning.com/topology/rest/1.0/file/get/8268964062?profile=original" > 2) Arch Enemy - No Gods No Masters </ a> </li>
<li> <a href="https://storage.ning.com/topology/rest/1.0/file/get/7975682464?profile=original"> 3) Bullet for My Valentine - Tears Non cadere </a> </li>
<li> <a href="https://storage.ning.com/topology/rest/1.0/file/get/8268919298?profile=original"> 4) Deal Death - Fortifed </a> </li>
< li> <a href="https://storage.ning.com/topology/rest/1.0/file/get/7983332660?profile=original"> 5) Dark Flood - Never Free Never Yours </a> </ li >
<li> <a href="https://storage.ning.com/topology/rest/1.0/file/get/7996926262?profile=original"> 6) The last Hangmen - The Hypocrite </a> </ li>
<li> <a href="https://storage.ning.com/topology/rest/1.0/file/get/7996651675?profile=original"> 7) GIUDICATORE - Let There Be Nothing </a> < / li>
<li> <a href="https://storage.ning.com/topology/rest/1.0/file/get/7983353071?profile=original">8) Cadacross - Impara l'oscurità </a> </li>
<li> <a href="https://storage.ning.com/topology/rest/1.0/file/get/7996896701?profile=original"> 9) insomnium one for sorrow </a> </li>
< li> <a href="https://storage.ning.com/topology/rest/1.0/file/get/7983474464?profile=original"> 10) SILENT HAVOC - Poseidon - Tides </a> </li>
<li> <a href="https://storage.ning.com/topology/rest/1.0/file/get/7977009065?profile=original"> 11) Marea-El perro verde </a> </li>
<li> <a href="https://storage.ning.com/topology/rest/1.0/file/get/7983634698?profile=original"> 12) Midnattsol - A Predator's Prey </a> </li>
<li> <a href="https://storage.ning.com/topology/rest/1.0/file/get/7983638453?profile=original">13) Megadeth - Never Dead </a> </li>
<li> <a href="https://storage.ning.com/topology/rest/1.0/file/get/7983563300?profile=original"> 14) Akrea - Meteor </a> </li>
<li > <a href="https://storage.ning.com/topology/rest/1.0/file/get/7977073864?profile=original"> 15) Iron Maiden - Como Estais Amigos </a> </li>
< li> <a href="https://storage.ning.com/topology/rest/1.0/file/get/8268879876?profile=original"> 16) Gorod scolpito nel vento </a> </li>
<li> <a href="https://storage.ning.com/topology/rest/1.0/file/get/7983688476?profile=original"> 17) The Ocean - She Was The Universe </a> </ li>
<li> <a href="https://storage.ning.com/topology/rest/1.0/file/get/7983708665?profile=original">18) Guerra millenaria: tiranni e uomini </a> </li>
<li> <a href="https://storage.ning.com/topology/rest/1.0/file/get/8268866270?profile=original"> 19) Dark Eternity - Aeon </a> </li>
< li> <a href="https://storage.ning.com/topology/rest/1.0/file/get/7983462855?profile=original"> 20) Wayne-The Choice </a> </li>
<li > <a href="https://storage.ning.com/topology/rest/1.0/file/get/7976889901?profile=original"> 21) Black Label Society - Suicide Messiah </a> </li>
< li> <a href="https://storage.ning.com/topology/rest/1.0/file/get/7975711665?profile=original"> 22) Mot & ouml; rhead - Asso di picche </a> </ li >
<li> <a href="https://storage.ning.com/topology/rest/1.0/file/get/7996932865?profile=original">23) Foghat - My Babe </a> </li>
<li><a href="https://storage.ning.com/topology/rest/1.0/file/get/7996986457?profile=original">24) Windir - Dance of Mortal Lust</a></li>
<li><a href="https://storage.ning.com/topology/rest/1.0/file/get/7996994265?profile=original">25) Nightwish - Dead Boy's Poem</a></li>
<li><a href="https://storage.ning.com/topology/rest/1.0/file/get/7996996267?profile=original">26) Six Magics - No time to grieve</a></li>
<li><a href="https://storage.ning.com/topology/rest/1.0/file/get/7997036859?profile=original">27) Rotting Christ - Demonon Vrosis</a></li>
<li><a href="https://storage.ning.com/topology/rest/1.0/file/get/7997038097?profile=original">28) Serpent - Devil In A Dream</a></li>
<li><a href="https://storage.ning.com/topology/rest/1.0/file/get/7997070888?profile=original">29) Archaios - The Distant</a></li>
<li><a href="https://st5.ning.com/topology/rest/1.0/file/get/7952722052?profile=original">30) Tears of The Dragon - Bruce Dickinson </a></li>
<li><a href="https://st2.ning.com/topology/rest/1.0/file/get/7135732853?profile=original">31) Sirenia - El Enigma De La Vida </a></li>
<li><a href="https://st5.ning.com/topology/rest/1.0/file/get/7623405082?profile=original">32) Les Grenouilles - Seth - Akroma </a></li>
<li><a href="https://st6.ning.com/topology/rest/1.0/file/get/7959097282?profile=original">32) Green Day - 21 Guns </a></li>
<li><a href="https://st5.ning.com/topology/rest/1.0/file/get/7178270089?profile=original">33) ERADICATOR - Madness Is My Name </a></li>
<li class="active"><a href="https://storage.ning.com/topology/rest/1.0/file/get/7996574879?profile=original">34) Red Moon Architect - Rise</a></li>
<li><a href="https://storage.ning.com/topology/rest/1.0/file/get/7983505479?profile=original">35) We are the Damned - Diogo Alves 1841</a></li>
<li><a href="https://storage.ning.com/topology/rest/1.0/file/get/7960146465?profile=original">35) Malinconia - Innocent Story</a></li>
<li><a href="https://storage.ning.com/topology/rest/1.0/file/get/7983345299?profile=original">36) Maleficium Arunquilta - Север </a></li>
<li> <a href="https://storage.ning.com/topology/rest/1.0/file/get/7983373700?profile=original"> 37) Cradle Of Filth - Adest Rosa Secreta Eros </a> < / li>
<li> <a href="https://st5.ning.com/topology/rest/1.0/file/get/7996574879?profile=original"> 38) Red Moon Architect - Rise </a> < / li>
</ul>