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 Ana Massien's discussion
Emoji work in module headers and newsfeed
"anywhere except for inside the HTML itself."
8 hours ago
⚡JFarrow⌁ replied to Ana Massien's discussion
Front end edits
"Most likely not"
8 hours ago
⚡JFarrow⌁ updated their profile photo
8 hours ago
Ana Massien replied to Ana Massien's discussion
Possibly Ning 2 or Ning 1.5
"Dood we have not even spoke in this thread since June 2020. I don't see why you came to bump it…"
10 hours ago
Ana Massien replied to Ana Massien's discussion
Possibly Ning 2 or Ning 1.5
"My name is Ana, not Ann. Ning's earlier days, before the 2.0. Some the elgg layouts correspond to…"
10 hours ago
Rosas † Negras replied to Ana Massien's discussion
Possibly Ning 2 or Ning 1.5
"De nada"
yesterday
Ana Massien posted a discussion
  You can add emoji from a browser extension or emojipedia.com (and copy and paste it) into module…
Monday
Ana Massien posted a discussion
For mods and admins, will 3.0 ever be able to have the front end edit buttons like ning 2.0…
Monday
Ana Massien updated their profile
Monday
Lea Bouillet updated their profile
Sunday
Rosas † Negras replied to Rosas † Negras's discussion
Style your View all buttons by touch by changing two colors
"Bizz 
these are the points impossible to reach without these codes"
Saturday
Rosas † Negras replied to Rosas † Negras's discussion
Style your View all buttons by touch by changing two colors
""
Saturday
More…

Meanwhile, you can check our social media channels