Current status of the Ning Platform is always available on the Ning Status Blog.

First we add some css to our design studio custom css

/* Aspetto del player audio */
#player{ position: relative }
#playlist, #player {
max-width: 500px;
padding: 20px;
margin: 0 auto;
display: block;
width: 100%;
}
#playlist {
margin: 0 auto 20px auto;
display: block;
text-align: center;
font-size: 15px; /* Dimensione caratteri */
font-family: 'Trebuchet MS', Trebuchet, Verdana, sans-serif;
font-weight: normal;
}
#player {
/* Immagine di sfondo del primo contenitore */
background: url(ADD PHOTOS FOR HEAD Dimensions: 1060x600);
background-size: 100%;
padding: 138px 7px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border:5px ridge #800000!important;
}
#audio {
width: 100%;
margin: 0 auto;
display: inline-block;
position: absolute;
max-width: 300px;
bottom: 0;
left: 0;
right: 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: left;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border:5px inset #800000!important;
}
#playlist li, #playlist ul li {
background-image: none;
list-style-type: none;
padding: 4px;
margin: 3px;
border:3px inset #eed255!important;
}
#playlist li a {
color: #CCC; /* Colore del brano musicale */
background: #000; /* Sfondo del brano musicale */
padding: 7px 5px;
display: block;
padding-left: 10px;
text-decoration: none;
}
#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;
font-weight:bold;
text-decoration: none;
}
#playlist .active a:before {
/* Icona prima del brano attivo */
content: "\25B6";
color: #CCC;
font-style: normal;
padding-right: 8px;
}
#playlist .active a:hover {
color: #222; /* Colore del brano attivo al passaggio del mouse */
}
#vplaylist, #vplayer {
width: 400px; /* Larghezza del contenitore */
padding: 20px;
margin: 0 auto;
display: block;
text-align: center;
}
#vplayer {
padding: 10px 20px;
background: #000; /* Colore di sfondo del primo contenitore */
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
video {
width:400px; /* Larghezza del player */
padding-top: 10px;
margin:0 auto;
display: inline-block
}
#vplaylist {
margin: 0 auto 20px auto;
display: block;
background: #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: left;
font-size: 12px;
font-family: 'Trebuchet MS', Trebuchet, Verdana, sans-serif;
font-weight: normal;
}
#vplaylist li, #vplaylist ul li {
background-image: none;
list-style-type: none;
padding: 0;
margin: 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;
text-decoration: none;
}
#vplaylist .active a:before {
/* Icona prima del video attivo */
content: "\25B6";
color: #CCC;
font-style: normal;
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 }

 

Next we need to add some custom code which goes in your Social Site Builder > Custom Code > <Head> Of Page section

<!-- 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 -->

 

 
Now add the codes in the html box on the pages where you want 

<div id="player"><br />
<audio id="audio" tabindex="0" preload="auto" controls="controls"><br />
<source src="ADD SONG IN HTML" /><br />
Il tuo browser non supporta HTML5.<br />
</audio></div>
<ul id="playlist">
<li class="active"><ADD SONG IN HTML">1) S</a></li>
<li><a href="ADD SONG IN HTML">2) C -</a></li>

 
to add new songs just insert this code each time under the html you see above

<li><a href="
ADD SONG IN HTML">ADD SONG NUMBER)ADD NAME OF THE SONG </a></li>



remember that the first song is added twice as in the photo below

I APOLOGIZE THE SONG MUST BE UPLOADED IN HTML AND NOT AUTOMATICALLY ... I HOPE ONE DAY ALL THIS WILL BE SOLVED NOW THIS IS THE EXAMPLE OF MY MP3 PLAYER ON ROSAS

 

8126920899?profile=RESIZE_710x

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Votes: 0
Email me when people reply –

Replies

This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
Tip: Build a Directory and Import It Into Your Community
"Opposite Trick/ Tip"
1 hour ago
⚡JFarrow⌁ posted a discussion
If you ever wondered what your community looks like in the mirror, here you go: :oƃ noʎ ǝɹǝɥ…
1 hour ago
Steve C replied to Steve C's discussion
Is there ANY way to export a Ning 2 Site?
"Exactly!"
1 hour ago
⚡JFarrow⌁ replied to Steve C's discussion
Is there ANY way to export a Ning 2 Site?
"if your N2 is migrated to a N3, one would think a backup could be made for you...no?"
1 hour ago
⚡JFarrow⌁ posted a discussion
Over the years, many Ning Creators have asked me the best way to build a directory for their…
5 hours ago
Roland Rupp updated their profile
Thursday
Gavin Brown and ⚡JFarrow⌁ are now friends
NC for Hire
Thursday
Rosas † Negras left a comment on Creatori NING Italiani
"La grafica è elementare e le attività nulle,sarebbe da lavorarci un Po,sono da oltre 15 su ning…"
Wednesday
Rosas † Negras replied to Steve C's discussion
Is there ANY way to export a Ning 2 Site?
"if you check this has been said there is a discussion, all for free and they think of everything"
Tuesday
Rosas † Negras replied to Steve C's discussion
Is there ANY way to export a Ning 2 Site?
"Yes,absolutely must be free as has been said, I have been on ning for 15 years and we have always…"
Tuesday
Steve C replied to Steve C's discussion
Is there ANY way to export a Ning 2 Site?
"Oh, you meant that NING should do it for free! You are 100% right!
They Ning could easily develop a…"
Tuesday
Rosas † Negras replied to Steve C's discussion
Is there ANY way to export a Ning 2 Site?
"dear my lord, it should be a free ning service, i'm happy that my dear friend earns or else i just…"
Tuesday
More…

Meanwhile, you can check our social media channels