soundcloud / soundcloud-custom-player Goto Github PK
View Code? Open in Web Editor NEWThe SoundCloud custom javascript based player
Home Page: http://soundcloud.com
The SoundCloud custom javascript based player
Home Page: http://soundcloud.com
SoundCloud Custom Player as a jQuery plugin This plugin allows you to create easily customizable, HTML/CSS/JS based audio players. It uses the official SoundCloud Flash widget for the audio streaming and widget API for it's control or native HTML5 streaming. Supports iPad, iPhone OS4, Palm Pre etc. Getting started The player setup is relatively easy: Download the CSS and JS files for the sc-player here: http://github.com/soundcloud/soundcloud-custom-player/archives/master First, add the player css files in the 'head' tag of your page source: <link rel="stylesheet" href="../css/sc-player-standard.css" type="text/css"> <link rel="stylesheet" href="../css/sc-player.css" type="text/css"> Then add the script tags at the end of your 'body' tag (in case you're already using jQuery on your site, skip the first script tag): <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript" src="../js/soundcloud.player.api.js"></script> <script type="text/javascript" src="../js/sc-player.js"></script> And now let's create a player! Put this into you HTML code: <a href="http://soundcloud.com/matas/hobnotropic" class="sc-player">My new dub track</a> Now reload your page, and instead of the link you should see a cool new widget. Note: when you're doing the test, please make sure you're running it on the local or remote web-server (http://localhost, 127.0.0.1/testpage, yoursite.com, etc.) Only so you can be sure that the Flash component will be initialized correctly and the track will actually play. If you're still experiencing problems, verify that the links to JS files are correct. Also make sure you're using an url of an existing track :) Per default the player works in 'zero-config' mode. It means, you don't need to change or write any JavaScript to get a working player on your site. More advanced techniques are described in the documentation: http://wiki.github.com/soundcloud/soundcloud-custom-player The project is published under an MIT license: Copyright (c) 2010 SoundCloud Ltd. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
http://github.com/soundcloud/soundcloud-custom-player/archives/master resolves to the download page saying "There aren’t any uploads for this repository."
Since this is referenced in the README, it either work or be removed.
Hey.
The volume bar does not seem to work in Chrome or Safari. Works in firefox! There is a JS error in the console:
sc-player.js:161 - Uncaught ReferenceError: a is not defined
Ideas?
Alex
And has been removed from jQuery 1.9. Please update sc-player.js accordingly.
Following this conversation: http://groups.google.com/group/soundcloudapi/browse_thread/thread/c56f9d521e4ca0dd/9f0c4ca7d98cbdb1#9f0c4ca7d98cbdb1, I would like to ask to create a feature that would allow to add tracks to an already created custom player.
ideally it would be something similar to the logic used by the jPlayer playlist system
http://jplayer.org/latest/demo-02-jPlayerPlaylist/
cheers
In Chrome I get a console error: Failed to load resource: the server responded with a status of 401 http://api.soundcloud.com/resolve?url=[…URL of my test site…]
Tracks don't play at all.
In Firefox I don't get the same error, but tracks don't play neither. Did I miss something?
I'm really sorry to be such a noob, but before I try to make sense of this tool, which seems great, I'd like a confirmation that I can use the SoundCloud player with my own music files, uploaded directly on my website, and not trough theirs?
If not, is their a way to do so?
Thanks a lot!
I've got a custom player working
http://www.anomalouspress.org/dev2/sc/sc_dev.html
The secret track (first one) does not load on my iphone 4 but the second one does. I notice the same behavior with the example
http://www.anomalouspress.org/dev2/sc/examples/sc-player-minimal.html
The track on the bottom is secret and doesn't load on my iphone.
-Matt
Sorry, another one...
I am using JQuery to hide and show divs, rather than having separate pages. The sc_player is on its own html page, but viewed through an iframe.
Using an adapted version of the minimal skin, if the player is playing when you hide the div that contains the iframe, the audio stops (great - that's what I need), however when you reveal the div again the player starts playing the first track on the page automatically, while the play/pause button is in the same state it was in before hiding the div.
This means that when 'returning' to the div/page that has the player it will be playing track 1 while visually indicating that another track is playing.
Is there a way to use the link that shows/hides the div to tell the player to stop, and set all the buttons to reflect that?
See the page here (sc_player is on the media 'page'):
Thanks
I love this player, it seems to do exactly what I need and it was easy to install and skin. Thank you for publishing.
I'm not able to get iPad or iPhone devices to play. After my installation failing on iOS, I verified that the examples in this repository are also not operating.
I was interested in using this library to build a player within my app and was referred
by http://soundcloud.com/help/widgets-players which states that this is the best tool for HTML5/iOS compatibility.
However none of the examples listed on https://github.com/soundcloud/soundcloud-custom-player/wiki
seem to work for me on the iPhone.
Any Ideas as to why?
Thanks,
Brent
I'm trying to customize the soundcloud-custom-player-artwork to suit my website's needs--basically changing the colors/look (no problems there), but also trying to have three rows of images and only one player at the bottom. I've got a mock-up going using the links from the provided custom artwork player (nice music btw!), and I'm close, but for some reason, only the first five images are loading, while the others are hidden. I've searched through all the code to try to see if there is some preloading or something I'm missing, but can't find anything, here' the mock-up page (again, not my music, just my initial mock-up):
http://www.ryan-hughes.net/rhm-sc-player-artwork-3rows.html
any help would be huge, thanks!
Hello,
Does anyone know if it's possible to add a share button to this custom player?
Please let me know,
Matt
I've been able to get my player precisely to look exactly how I want it to work, but there are two issues with function:
A strange part about this is that I designed the player as a standalone player (100% width) and then migrated it into my layout. On the standalone it works fine re skipping, but when I moved it it scaled down to fit perfectly, but I'm getting this issue.
This has helped me isolate the problem:
When my stylesheet has this:
.sc-player { width:100%; }
The skipping works fine
When my stylesheet has this:
.sc-player { width:650px; }
Skipping stops working. And it doesn't matter if I hardcore 650px in there or keep it at 100% and it gets resized because it's inside another div. Once the entire sc-player div is resized it stops working properly.
Another clue is that if I click in the same physical place in my browser window it will always skip to the same place in the song. For example, if the player size is 100% of the browser and I click approx 25% into the song it'll skip to let's say 2:00 in the song (which is where my mouse is -- 8:00 song). But if the player size is decreased to 50% and I click approx 25% into the song it'll still skip to 2:00, which is not where my mouse is. It seems as if the div that controls this function is staying at 100%, but I can only click it if I'm inside the player, so if the player is 50% browser width and I click at 75% (outside of the player) it doesn't work.
It definitely has to do with this (inside sc-player.js):
// seeking in the loaded track buffer
$('.sc-time-span')
.live('click', function(event) {
scrub(this, event.pageX);
return false;
})
event.pageX returns the x-position of the mouse from the left of the page. I think if I change that to the x-position of the mouse from the left of the sc-player element that might fix it. jQuery experts, how can I do this?
Sorry for the very long post, but I figure the more clues you have the more chances we have of figuring out the problem.
An added bonus would be if I could allow the user to skip to any part on the song with a line that displays over the buffer at the mouse displaying the time it would skip to. The default player on SC has this feature, it'd be great if I could add this as well.
Thanks, besides these two issues custom player works great.
On a HTTPS page, the soundcloud player loads its data via HTTP.
Some browsers, like Chrome, don't like this. They tell the user that the site is insecure.
Is there any workaround or a way to fix this problem?
Hello,
I am relatively new to soundcloud and fairly new to JS.
I am trying to add a download link (for active song) to my soundcloud player.
My homepage is http://beta.thibaultrivrain.com. I put the download button on the player top left side, but do not understand how to code the link...
After a 5-hour search I could not find any step by step guide except this here #21 of a year ago with dead link and this https://groups.google.com/forum/?fromgroups=#!topic/soundcloudapi/scvdmAZPZPA/discussion, but I could not figure how to make the latter work properly. I keep getting a blank instead of the player and I do not quite understand how to use API key also...
All this is way too advanced for me but I do want a proper dynamic download button. :)
Here is the unfinished bit of code around line 500 of sf-player.js:
// adding controls to the player
$player
.find('.sc-controls')
.append('<a href="#play" class="sc-play">Play</a> <a href="#pause" class="sc-pause hidden">Pause</a>')
.end()
.append('<a href="download" class="sc-download">Download song</a>')
//.append('<a href="#info" class="sc-info-toggle">Info</a>')
.append('<div class="sc-scrubber"></div>')
.find('.sc-scrubber')
.append('<div class="sc-volume-slider"><span class="sc-volume-status" style="width:' + soundVolume +'%"></span></div>')
.append('<div class="sc-time-span"><div class="sc-waveform-container"></div><div class="sc-buffer"></div><div class="sc-played"></div></div>')
.append('<div class="sc-time-indicators"><span class="sc-position"></span> | <span class="sc-duration"></span></div>');
Can anybody help/advice/point to helpful link ?
Many thanks in advance,
Thibault
Hi
The player cannot seek beyond 3:22:00 in the long tracks It just stops playing. But if you don't seek; the player can play that section. You can check it with this track
http://soundcloud.com/mr-scruff/mr-scruff-floating-points-plastic-people
This custom player is genius. I'd really like to know how exactly it pulls a user's soundcloud favorites. My goal is to be able to incorporate that methodology into the official soundcloud embedded player code:
how can i stop the player from playing with javascript?
Really love this. Im looking for a way on the minimal player to remove the song name the waveform to just leave the black round button..
is this possible?
Kind Regards
Paul
I've come across a problem with the soundcloud custom player in Safari IOS 5 in that the Play Bar Indicator, Track Buffer Bar Indicator and Seek function stops working correctly.
To recreate the problem, use the included example red skin, and keep selecting between two tracks. Eventually the buffer indicator will not reset to the beginning and the player indicator will either not show or get stuck in one position. Because of this the track seek function just keeps restarting the track as it's based on the indicators position values.
I have traced the problem down to the onMediabuffering event returning a value of NaN rather than a percentage (line 479 sc-player.js) But do not know what is causing this? Or how to fix it.
This problem does not occur in Safari IOS 4 or any Desktop browsers.
I'm having a bit of a nightmare with a bug that I can't solve.
In Chrome for Windows and Safari whenever I try to play a set straight through it skips every second song.
So at the end of track 1 it jumps to track 3 then track 5 etc.
To make sure it wasn't my code I uploaded the example source code and I get the same issue in the bottom player:
http://wmuk-apache.co.uk/soundcloudtest/examples/sc-player-standard.html
IE and Firefox play the full set just fine.
I haven't edited a single line of code in the above example, I just uploaded the package that I got off github.
This is a disaster for a project I'm working on - any ideas to help me solve it?
Hi we have been using the custom players with great success to provide audio delivery for our record labels websites. Today, without any modification to the code, the players started to act up.
When a 'set', 'group' or user is loaded it works fine (as it always has), but when a single song is loaded it loads the correct audio but displays the wrong; artist, title, length and artwork. It literally seems to be picking random tracks from soundcloud every time i refresh.
I immediately updated the javascript to the latest version but still no luck. Any help with this would be great as we are running two professional labels and shall have to replace the players if the problem persists.
Thanks
Chris
I've been playing with your custom player to skin a friend's tunes on soundcloud for his website and came across a bug that is causing Safari to crash.
The bug occurs when I hit your unmodified Red Player example page both locally and at
http://static.soundcloud.com/demos/soundcloud-custom-player/examples/sc-player-red.html.
What I did:
Impatiently clicked back and forth between tracks while they were playing and was consistently able to reproduce the crash.
What happened:
Safari went boom at anywhere between 2 to 12+ impatient song changing clicks.
I'm running
Safari Version 5.0.3 (6533.19.4)
Mac OS X 10.6.5 (10H574)
MacBookPro5,1
I deal mainly in slinging html and css, but I had my husband who deals with the hardcore stuff look at the error log. He says it looks like a problem deep down in the innards of the Apple javascript engine and probably not the code, but it'd be worth letting you know about the issue. I've saved a copy of the error report if you'd like to see it. I wasn't sure about the etiquette for posting that much info.
What you've done is really cool. Hopefully Apple will notice the error reports.
Thanks,
Krista
Hello,
Is it correct that multiple players on 1 page isn't working?
I'm creating sets using:
`
I have a page that shows a category view of our single releases and from there you can click to view 1 release (item view).
The player works fine in the single item view, but in the category view it does not.
Only 1 player starts playing and all others do not work.
-- edit --
Ok I see now that all tracks are loaded into 1 trackslist element instead of loading into each player's trackslist...
I guess the sc-player.js needs some additional tweeks so each player instance is considered unique?
When using the scrub bar (seeking) on a paused track there is some strange behavior:
This page:
http://developers.soundcloud.com/docs/custom-player#initialization
describers creating a player on the fly using this snippet:
$('div.your-container-class').scPlayer({
links: [{url: "http://soundcloud.com/matas/hobnotropic", title: "http://soundcloud.com/matas/hobnotropic"}]
});
However the code (sc-player.js, June 14, 2011) seems to expect a node (the link to replace with the sc widget)
$.scPlayer = function(options, node) {
and without the node argument it throws an exception on this line 467 of sc-player.js:
When a page has multiple players, clicking on the wav form of any player that isn't the "active" player seeks / restarts the active players track, rather than starts the track / seeks in the player that was clicked.
This can be seen in the example: sc-player-standard.html
How can i set a limit to say 5 tracks?
I installed the player here: http://qw.quakephil.com/nit-grit/player.php but it seems to have trouble playing in Chrome... Sometimes it plays sometimes it doesn't... At first I thought it was a case of issue #5, but clicking on the song doesn't start it either in Chrome, when it doesn't load up
When I play it in MSIE, it works pretty well
This may be an issue in the way I installed it? But I just untared it and copied the example standard sc player html. I set autoplay and randomize to true by default in the javascript.
XYZ
Hello,
I'm trying to use the custom player inside joomla.
When testing a simple integration using just a link with the class (<a class="sc-player" ) it loads fine in latest Chrome, Safari and IE9 but in IE8/7 and latest FF it won't render.
FF and both IE8 and 7 give a 'soundcloud is undefined' javascript error in console.
soundcloud is not defined soundcloud.addEventListener('onPlayerReady', function(flashId, data) { sc-player.js (line 189)
Joomla uses Mootools but I am using the JQuery noConflict() as well and so far works find with other tools that use JQuery (like bootstrap from twitter js)
Any advice where I should look for a solution? I read the blog about the
tags but after stripping these it didn't solve anything.
I have adapted the minimal player and can't get the font color for the title of the track to change. All other font attributes change, but the font colour always remains black:
.sc-player {
font-family: Century Gothic, sans-serif;
color: grey;
font-size: 12px;
line-height: 1.6em;
font-weight: none;
text-transform: lowercase;
}
How do I change the color attribute?
Hi!
I had issue with some versions of IE if I remember correctly and code lines using innerHTML e.g.:
updates.position.innerHTML = timecode(0);
...
updates.position.innerHTML = timecode(position);
...
$('.sc-duration', $player)[0].innerHTML = timecode(tracks[0].duration);
$('.sc-position', $player)[0].innerHTML = timecode(0);
Easy fix is to use jQuery equivalents:
$(updates.position).html(timecode(0));
...
$(updates.position).html(timecode(position));
...
$('.sc-duration', $player).html(timecode(tracks[0].duration));
$('.sc-position', $player).html(timecode(0));
So pretty please, do not use innerHTML when jQuery provides a framework for doing it:
Downloaded Zip from GitHub.
Copied sc-player-minimal.css file (plus folder entitled "sc-player-minimal") into appropriate folder on site.
Instructions say to add
to Head section of page.but CSS files did not contain "sc-player.css" file.
Am I missing something???
Javascript instructions seem to match files in zip.
Any guidance will be appreciated.
Thanks,
jason
Is it possible to add a dynamic download link to the player depending on if the track is downloadable or not?
Firebug throws an error on this anonymous script:
function () {
try {
gaGlobal;
} catch (e) {
gaGlobal = {};
}
}
My only clue as to where this is located is firebug says it's in '/event/seq/2/'
The issue here is that if gaGlobal has never been created before, it will indeed throw an error and firebug will stop. Instead of using a try/catch block, I would recommend that this non-error-throwing code snippet be used instead:
if(typeof gaGlobal === 'undefined') gaGlobal = {};
This will accomplish the same effect, avoid the usage of a try/catch, and Firebug won't be so unhappy.
Looks like your css is changing the nature of my doc
Demo here:
http://taboca.github.com/TagVisor/
Remove your css line and you can see it displays different
Hi, I'm using the soundcloud-custom-player, it's really wonderful. I've customized it all, and it works fine integrated into my page. However, I'm worried with Googles' recomendation to implement a low number of web page requests, and I tried to apply the minify method in the four javascript files and merge then into one, but unsuccessfully. There's a way to do it?
The error is not accrued consisting.
I can see the error in the console.
The request isn't accept in your's API.
It's accrue when the script is building the URL in the following script: return resolver + url + '&' + params; (line 69,sc-player.js).
the request URL is: http://api.soundcloud.com/resolve?url=http://stagee/t/erel/tracks&{} and your script generating it.
A single track using the player works fine for me on the Android Browser, but when I create a playlist of tracks it doesn't work. Works fine on my laptop browser. Haven't check iOS yet. Any known issue with playlists on Android?
Thanks.
Apparently this sc-player no longer works if it is linked to someone's set on soundcloud. It works for individual tracks, and for profile.
So, this will work:
and this:
but this won't
It gets redirected to random set on soundcloud. And I don't know where is the problem. Did soundcloud ban sets from being shared through this ?
Got the following code working in all browsers except ie9
// on player paused remove pause from tracks
$(document).bind('onPlayerPause.scPlayer', function(event){
$('p.pause').removeClass('pause').addClass('playReady');
});
// on play being clicked
$(document).bind('onPlayerPlay.scPlayer', function(event){
//console.log('Started playing');
$('p.nextPlay').removeClass('nextPlay');
$('p.playReady').addClass('pause').removeClass('playReady');
// mark next track to play
$('p.pause').parent().parent().parent().nextAll('li.track:first').find('p.play').addClass('nextPlay');
});
// on track finish play next track
$(document).bind('soundcloud:onMediaEnd', function(player, data) {
//console.log('Finish play even happened');
$('p.nextPlay').click();
});
All event fire except soundcloud:onMediaEnd, this works in all other browsers.
Jules
I've set up a player that uses the standard horizontal css in green (not that this should matter). Autostart is not turned on.
After loading, the songs will start playing if I select one from the list. If I hit play instead, nothing happens. If I hit play and then try selecting something from the list, still nothing happens. I must first select something from the list.
I can share a link with you privately.
I'm having this weird issue where 1/2 the websites i make with this customer player will manage to launch the quick time player as a fallback method for Safari not supporting the HTML5 Audio on earlier versions (iOS 3.x). The only difference between the different sites is that the skinning was different, but all modified from the "artwork player" as base.
Furthermore, when it does manage to load the quicktime player as a fallback, all the pages where the javascript is included will display this weird grey bar along the top left of the screen. I took some screenshots to show you what i mean.
Is there any way to hide this bar?
if you have an older iPhone you can try testing it out yourself here: http://www.theboombooms.ca/music
Please help, I'm at the end of my wits here, I'm willing to pay for your time if it needs to come to that.
Screenshots:
I've got issues regarding a site that we're doing that had an SSL certificate from Verisign. If we use the regular Flash based Soundcloud widget, it displays with no SSL issues. As long as we use https://www.soundcloud.com/ in our references. Of course, that doesn't work on iOS, so we're trying to use the Custom Player. When we used it on an non-SSL, non-HTTPS site, the player works just fine. However, once we switch to HTTPS and in turn, make the reference HTTPS as follows:
The player displays but without the album image or the playlist. So basically, it's blank. Is there a solution to this or plans for one, so it can display on a secure site?
Hello All
I love this thing, so cool looks so good. I have made this for my site
http://liamquinn.com/soundcloudtest/examples/sc-player-artwork.html
which is looking good and working pretty well.
The only problem is the third track on the top row. when you click on it the first two on the next row move down a full row down and the third one moves up and touches the bottom of the other. I cannot seem to figure it out, I am fairly new to jquery but have fairly good understanding of css and html. I think it looks like a css issue but it is really bugging me now!
Any help would be awesome.
Thanks
Liam
great custom players, thanks! I'm close to dialing in my artwork player (still in mock-up mode using your links/music--great stuff), and the last thing I'm hoping to do but can't get to work is to display the active/playing song's title just below the waveform (in line with the footer below the player on the right side), here's a link:
http://www.ryan-hughes.net/rhm-sc-player-artwork-3rows.html
I know it's a bit redundant, but I'd like to have the song title overlaid on the artwork (like the above), and be displayed as text below the waveform--any ideas?
I I think your product is great and have been customizing the player for my site.
One question I wanted to ask, I was wondering if it would be possible to always display the waveform, not just on hover but always.?
Thanks for any help you can provide!
-Mike
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.