How I added an audio player with playlist to the site for Ning 3.0 and 2.0

[Alex - Rosas † Negras]

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

 

[Alex - Rosas † Negras]