soundcloud / soundcloud-custom-player Goto Github PK

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 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'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

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:

Happy Talk

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

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'):

http://www.bugcompass.co.uk

Thanks

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.

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

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:

And has been removed from jQuery 1.9. Please update sc-player.js accordingly.

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.

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

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.

Is it possible to add a dynamic download link to the player depending on if the track is downloadable or not?

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.

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.

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?

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?

When using the scrub bar (seeking) on a paused track there is some strange behavior:

• WebKit (tested in Safari Desktop + Chrome) automatically resumes playing but does nut update the playing state (= adding a css class .playing to the player)
• Gecko (tested in FF 3.6 + 13) does not update .sc-played width after seek operation. When you resume playing, it starts at the position you seeked.
• IE 7 + 8 behave like Gecko
• IE 9 behaves like Webkit

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?

XYZ

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'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!

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

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

Perhaps I'm missing something but the examples seem pretty broken on Chrome 26 and Safari 6. Almost all of them are missing tracks or are rendering poorly.

See screenshots:

how can i stop the player from playing with javascript?

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

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: $(element).html() to get and $(element).html(setvalue) to set.

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.

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:

1. I can't skip within the track. If I click the buffer it'll skip about halfway through the song, but I can't skip back to the beginning, or past that one point to the end (or anywhere in between). Generally speaking there is only one spot on the song that I can skip to.

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.

2. Related to this, if someone clicks and skips into the middle of the song there is no way to stop the song and get it to return to the beginning. Is there a button I can implement that would return the song to the beginning?

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.

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

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

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:

Matas tracks

and this:

but this won't

Soulhack

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 ?

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:

1. http://www.theboombooms.ca/images/IMG_0647.PNG
2. http://www.theboombooms.ca/images/IMG_0648.PNG
3. http://www.theboombooms.ca/images/IMG_0649.PNG

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

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,

Does anyone know if it's possible to add a share button to this custom player?

Please let me know,
Matt

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

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?

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

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?

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?

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.

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:

$source = node && $(node),

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

How can i set a limit to say 5 tracks?

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?

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!