I read all sorts of complaints about the Music player on Ning networks, so I ran across something which may be interesting to you if you have been looking for an alternative way to display and play music on your network.
NOTE: This may require you to create a soundcloud channel and import the music from your site, but it looks clean and works awesome!
First let me make it clear that I do not have the music feature on my network, this is just in response to so many complaints about the Ning music player. It is quite apparent from the feedback I read on this network that Ning might be dropping the ball (and a hand full of cash) by not keeping their music player in sync with technology and current web standards. With a better music player, Ning would shut the entire game down.
SoundCloud is an awesome application with a huge music library and it has multiple ways for integrating any selected tracks to websites.
Stratus, a free-to-use and jQuery-powered widget, offers an alternative and tight integration with a player that can sit in the bottom or top of web pages.
The widget accepts any number of tracks, sets, users or groups to play, can be set to auto-play and has an optional animation on initial load.
There are controls for volume, sharing, commenting/favoriting and a pop-up player link exists so that users changing pages won’t lose the tracks.
Besides mentioning the tracks/sets as a list, adding a custom class to any SoundCloud link also works (handy for websites with lots of SoundCloud links) and the player can be skinned with CSS.
Installation Looks Simple Enough:
Include the javascript library by adding this to the custom code box
<script type="text/javascript" src="http://stratus.sc/stratus.js"></script>
followed by this plugin:
Customization
You can customize Stratus by passing the appropriate options to the stratus function.
For example, the code below will cause the player to auto play a random QOTSA track and hide the download button.
| 1 2 3 4 5 6 7 8 9 10 |
<script type="text/javascript">
$(document).ready(function(){
$stratus({
auto_play: true,
download: false,
links: 'http://soundcloud.com/qotsa',
random: true
});
});
</script>
|
Replies
thanks bro..lemme know how it turns out!
I tried it too and got nothing. I think we may have the script correct but dont we need some other piece of code to actually call the script?
LloydT and Armani,
Answering this due to a private email. I don't know much about this. But, I tried adding JFarrow's base code to my test site. It worked beautifully, loads the player at bottom of site to far left. HOWEVER, for me, it covers my chatbar completely. I added a little CSS to take care of that issue. Add all to your Custom Code Box.
<style>
#stratus {padding-bottom:22px;background:#e6e6e6!important;position:fixed;z-index:2!important;}
</style>
<script type="text/javascript" src="http://stratus.sc/stratus.js"></script>
<script type="text/javascript">
x$(document).ready(function(){
x$.stratus({
links: 'http://soundcloud.com/foofighters/sets/wasting-light'
});
});
</script>
Good luck,
Jen
OMG! Seriously I knew you were the one to go to for help...you're awesome!!!
just got into Tampa..i'll hit you back soon bro!
One more tiny question: How can I move this bar to the top of the page?
BTW: I tried using align: 'top' but it didn't work.
did you try position:absolute ?
Yes I tried that but then the bar started moving with the page as it scrolled