Tip: How I added Music To A Page

[Bizz]

As there is no Add Content for the music to be added into a module on a page we can do so by iframing a page into a html module on a page.

You can see I added one here : https://jr-images.ning.com/

First we add some css to our design studio custom css

/** MUSIC PLAYER ON HOME PAGE **/
.musicApp iframe{width:100%; height:100vh; max-height:530px;}
.musicApp-block{ padding:5px }
.musicApp-block .module-header{margin: 10px; padding:0px }
.musicApp-block .module-name{ font-size: 1.4rem }
@media only screen and (min-width:480px){
.audioPage-player {
position:relative!important}
}

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

NOTE: ADD THE URL FOR YOUR MUSIC PAGE IN THE PART WHICH SAYS YOUR URL GOES HERE

<script>
x$(document).ready(function(){
x$('.musicApp-page').closest('.section-html').addClass('musicApp-block');
x$('<div class="musicApp-content"></div>').appendTo('.musicApp-page').hide();
x$('<div class="musicApp"><iframe src=" YOUR URL GOES HERE " frameborder="0" marginwidth="0" marginheight="0" scrolling="yes"></iframe></div>').appendTo('.musicApp-content');
x$(".musicApp iframe").load(function (){
x$('.musicApp iframe').contents().find("head").append(x$("<style type='text/css'> .before-content{display:none;} .content-header{display:none;} .site-headerFrame{display:none} .site-footerFrame{display:none} .ningbar{display:none} .banner-frame{display:none} .site-bodyFrame{padding-left:0px} .site-body{padding:0px} .content-body{padding:10px} .column-narrow{display:none} body::before{display:none!important} .central-content{min-width:100px} .audioPage{padding:10px} .audioPage{margin-top:0px} body{margin:0px} .central-content{padding-bottom:0px} .audioPage .module-header{padding:4px} .audioPage .module-header{margin: 0px 0 10px 0} .audioPage-player{position:relative!important}</style>"));
x$('.musicApp-content').show();
});
});
</script>

 

Now to add the music to a page we use the add content and select the html option. Give it a name then in the small toolbar click on the html button a copy this line into it and click save at the bottom. You can add music to any page using this method

<div class="musicApp-page"></div>

And here is how it looks on my homepage

[Bizz]

Thanks Tavolo, glad you found it useful

[Bizz]

Thanks Tavolo, glad you found it useful

[Charles Brickhouse]

this is a great add on, I was wondering is there a way to track plays and or views with this?

[Bizz]

Thanks Charles, no unfortunatly not it just a way to get the music page onto a page

 

[Bizz]

By the way you can also use this to add the music to a members profile page so they can listen to music while in thier profile.At the moment it will show all the music as so far there is not a way to filter by member

You can see it working here: https://jr-images.ning.com/members/bizz