#380 ✓ staged
Henrik Moltke

Soundcloud support

Reported by Henrik Moltke | March 2nd, 2011 @ 07:43 PM | in 0.5

It would be extremely exciting to support Soundcloud. This jQuery plugin https://github.com/soundcloud/soundcloud-custom-player might provide a starting point; not sure about the tech challenges here: can we link events to their timeline-based comments and use that for quotation, chapters, search etc?

API: https://github.com/soundcloud/api / http://soundcloud.com/developers.

Comments, ideas?

PS In case you're not familiar with Soundcloud it is the Flickr of audio, and a rapidly growing community, mostly for music afficionados, but also journalist and teachers etc use Soundcloud to share audio. I really like it's core functionality; they have their shit together and are - cautiously - experimenting with and events in various mashups, such as the Kore IMS20 iPad app, which allows for sharing both audio and session/midi using Soundcloud.

Comments and changes to this ticket

  • Henrik Moltke

    Henrik Moltke March 12th, 2011 @ 11:23 AM

    (is this sufficient or should I file a second bug one requesting spatial / visual representations of events on a horizontal bar?)

  • David Humphrey

    David Humphrey March 12th, 2011 @ 11:23 AM

    • Tag set to plugin
    • State changed from “new” to “assigned”
    • Milestone set to 0.5
    • Assigned user set to “Steven W”
    • Milestone order changed from “40” to “0”

    I think the way to do this is to create a player-plugin, once that stuff lands next week in 0.4. Steven, can I get you to tackle this next, please?

  • David Humphrey

    David Humphrey March 12th, 2011 @ 11:25 AM

    Henrik, why don't you do some work here to describe the visual side of this (Steven, this player plugin will provide its own UI--a canvas that spatially represents duration as a horizontal canvas with indicators of various events at certain times). I think we can do it all in this bug.

  • Steven W

    Steven W March 12th, 2011 @ 06:33 PM

    Sure thing David, I can tackle it.

    Henrik, Soundcloud looks really cool. I'm a little familiar with the service, but there's no such thing as too much explanation about the visuals. Let me know what you have in mind.

  • Steven W

    Steven W April 1st, 2011 @ 02:09 PM

    Just checking in and updating on my progress.
    A preliminary working version with the basic play/pause/seek is wrapping up. Still to work on are adding a few positional attributes to the player (top, left, getBoundingClientRect(), etc), tests, and, and ensuring popcorn.trigger() will properly trigger UI events (play, pause, etc.) on the player.

    I've hosted a demo here: http://matrix.senecac.on.ca/~sweerdenburg/Projects/popcorn/Soundclo...
    Source, of course, is on github: https://github.com/stevenaw/popcorn-js/commits/t380

    Beyond that, linking timeline-based comments and testing multitrack support is still to be implemented.

  • David Humphrey

    David Humphrey April 1st, 2011 @ 04:02 PM

    This is coming along nicely, amazing work! Can't wait to see this land.

  • Steven W

    Steven W April 8th, 2011 @ 02:09 PM

    Just another update. Aside from one minor issue to resolve (play event is fired twice when you pause during the play event), this player is done.
    I've updated the repo and the demo.

    The demo now includes fetching Soundcloud comments for display in-page. Time offset and "x days/months/etc. ago" formatting for the comments is similar to that of the Soundcloud Flash player.

  • Henrik Moltke

    Henrik Moltke April 12th, 2011 @ 02:17 PM

    Just FYI: we're moving ahead with Radiolab / soundcloud demo. The deadline is April 19th..

    There will be some hacking required over the next days. Excited to see this taking shape!

  • Steven W

    Steven W April 12th, 2011 @ 04:46 PM

    • State changed from “assigned” to “peer-review-requested”
    • Assigned user changed from “Steven W” to “Scott Downe”

    Awesome, hack away.
    Soundcloud player ready for peer review. Tested on Win7: Firefox 3.6, Firefox 4, and Chrome 10 :)

  • Mark Boas

    Mark Boas April 13th, 2011 @ 04:49 PM

    Hi All,

    I'm becoming increasingly involved in the Popcorn project and am now looking at creating a demo that uses Popcorn and the Soundcloud API (with Henrik).

    Steven, kudos on creating the Soundcloud plugin. I've been checking out your demo : http://matrix.senecac.on.ca/~sweerdenburg/Projects/popcorn/Soundclo... - it's very cool.

    I like the idea of as you put it "...making the flash audio player masquerade as HTML 5 media element." We do the same thing with jPlayer, it means that developers can use the same audio API and support both HTML5 audio and non-HTML5 audio, with the same code.

    One thing was puzzling me though, in your demo you mention :

    Soundcloud does not support their player to be chromeless (hidden controls), but custom controls have been developed and tied into their player for demo purposes.

    Does this mean that we are constrained to use Flash for the interface?

    I notice that the Soundcloud site itself uses HTML5 audio (at least on iOS) and no visual Flash so I'm guessing somehow it is possible. It would be great to be able to do this with the plugin.

    Cheers

    Mark

  • Steven W

    Steven W April 13th, 2011 @ 06:42 PM

    Thanks for all the feedback Mark.
    Henrik, I've updated the branch to include this and changes caused by #475 (relevant for if subtitle or lowerthird plugins are to be used).
    Demo has been updated as well.

    https://github.com/stevenaw/popcorn-js/commits/t380
    http://matrix.senecac.on.ca/~sweerdenburg/Projects/popcorn/Soundclo...

  • Henrik Moltke

    Henrik Moltke April 14th, 2011 @ 10:19 AM

    From Paul Rouget - not all relevant to the ticket, but HTML5 Player w Ogg is pretty sweet.

    Building the HTML5 player:

    1. Let's imagine I want to build a player for this: http://soundcloud.com/paulrouget/test-paul
    2. I need an mp3 and an ogg source
    3. SoundCloud only support mp3
    4. A work around is to upload an ogg file. The API allows us to use the uploaded file
    5. You need an API key: http://soundcloud.com/you/apps
    6. From this, you'll have a "Client ID": let's say FOO
    7. go there: http://api.soundcloud.com/resolve?client_id=FOO&url=http://soun...
    8. You should have an XML, look at the id. Let's say BAR
    9. The OGG source of your audio is http://api.soundcloud.com/tracks/BAR/download?client_id=FOO
    10. The MP3 source of your audio is http://api.soundcloud.com/tracks/BAR/stream?client_id=FOO
    11. You can get the wave image from http://api.soundcloud.com/tracks/BAR.json?client_id=FOO (look at the json, the waveform_url property)
      So you can basically rebuild the Flash SoundCloud just in HTML5.

    Also, I've been experimenting with the words timeline, here is an idea:
    http://paulrouget.com/2big/henrik/wave/index.html
    Look at the source code, it's pretty clear. Please hack it, make it pretty and smooth :)
    I imagine this "word river" in the background of the demo.

    About pulling the content from soundcloud, nothing special, everything is
    already in the SoundClound/PopCorn connector.

    Also, about drawing a "Wave Form", à la: http://audioscene.org/scene-files/humph/lifes-things/two.html
    we can't use the Audio Data API (different domain, so "permission
    denied"), but we could imagine using the waveform image to draw a temporal spectrum.
    The image is on another domain as well, but a simple server side proxy should
    fix the problem.

  • Rick

    Rick April 14th, 2011 @ 12:28 PM

    • State changed from “peer-review-requested” to “review-needs-work”
    • Assigned user changed from “Scott Downe” to “Steven W”

    This is tremendous work!

    Tested with Soundcloud Player Test Suite: a handful are timing out sporadically - tidy this up and its all good.

    Again, great work!!

    Next up (different ticket) explore the information provided by Henrik Moltke

  • Steven W

    Steven W April 14th, 2011 @ 01:23 PM

    Thanks Henrik and Rick.
    I'll tweak the Soundcloud player so it passes tests without timeouts, then create a second ticket to tackle porting this to HTML.
    Henrik and Mark, we may have to communicate more later on the HTML front, as I start to get my feet wet with it.

  • Brett Gaylor

    Brett Gaylor April 14th, 2011 @ 02:24 PM

    Just in case u haven't seen this Steven, although I'm sure you have.
    http://developers.soundcloud.com/docs/custom-player

  • Steven W

    Steven W April 15th, 2011 @ 12:10 AM

    • State changed from “review-needs-work” to “peer-review-requested”
    • Assigned user changed from “Steven W” to “Rick”

    Thanks Brett, that will be a great resource. There's some HTML magic done in there that is exactly what we're looking to do.
    Rick, I've increased the timeouts in the last three tests to 5, 20, and 100 seconds (from 1, 10, and 50 respectively). They seem to run alright for me now from a clean cache on FF 4.0, 3.5.18 and Chrome 10.

    Would you mind PR'ing again so I'm sure it's fixed for you too?

  • Rick

    Rick April 20th, 2011 @ 10:16 AM

    • State changed from “peer-review-requested” to “review-needs-work”
    • Assigned user changed from “Rick” to “Steven W”

    I'm still getting a timeout on the Events & Player Control test, the last test apepars to be late

    Also, something I noticed:

    
    Popcorn( Popcorn.vimeo( "player_1", "http://vimeo.com/11127501" ) );
    
    
    Popcorn( Popcorn.youtube( "video2", "http://www.youtube.com/watch?v=9oar9glUCL0" ) );
    
    
    Popcorn.soundcloud( "player_1", { src: "http://soundcloud.com/forss/flickermood" } );
    

    Can you change the API of the soundcloud player to match the other players? All players should have identical API signatures.

  • Steven W

    Steven W April 20th, 2011 @ 01:22 PM

    • State changed from “review-needs-work” to “peer-review-requested”
    • Assigned user changed from “Steven W” to “Rick”

    Hi Rick,

    As part of #422, the Vimeo and Youtube APIs are changing to the style Soundcloud is in now.
    You bring up a good point about consistent APIs though, so I've tweaked it a bit to match the API of a plugin (everything through an "options" object).
    Vimeo and Youtube will be the same once #422 lands.

    Updated the branch to include this. Also updated out of date documentation and increased the timeout on the last test

  • Rick

    Rick April 20th, 2011 @ 01:31 PM

    • Assigned user changed from “Rick” to “Steven W”

    Why are they changing? I hope you realize that you absolutely must support the previous signature, as it has already been released.

  • Scott Downe

    Scott Downe April 20th, 2011 @ 02:01 PM

    Rick, I agree you have to support previous signatures, but only after the 1.0 mark. Before the 1.0, we're in an expected volatile state. That being said, I think any changes to the API before 1.0 should still be a serious decision, and considered and agreed upon by all, but not impossible.

  • Rick

    Rick April 20th, 2011 @ 02:08 PM

    I strongly disagree, mostly because I don't particularly like the fact that we're making the signature more complicated.

  • Scott Downe

    Scott Downe April 20th, 2011 @ 02:33 PM

    plus plus to not liking complex signatures.

  • Scott Downe

    Scott Downe April 20th, 2011 @ 02:36 PM

    I kinda liked this method most:

    Popcorn( Popcorn.youtube( "video2", "http://www.youtube.com/watch?v=9oar9glUCL0" ) );
    
  • Rick

    Rick April 20th, 2011 @ 03:18 PM

    I second that Scott.

    If the reasoning as to provide some kind of width/height then I move to veto. Visual styles should be applied with CSS by the end dev

  • Scott Downe

    Scott Downe April 20th, 2011 @ 03:27 PM

    • State changed from “peer-review-requested” to “review-needs-work”

    Yeah, I am going to r- this for these reasons:

    I don't like the new way of creating the object, but what's more important, I don't know why we made the change.

    Might be something I am missing, I will admit that, but I am going to r- this for further discussion/speccing with Steven.

    I encourage anyone else with opinions or advice regarding this!

    Finally, I don't think we need to hold up 0.5 for this. It's one thing to hold up a release because of a bug or white space issue, it's something else to rush speccing and making major API changes just to hit a release. That makes me nervous.

    Thoughts?

  • Scott Downe

    Scott Downe April 20th, 2011 @ 04:12 PM

    So the reasoning behind the change is this:

    There are other variables, like an api key that is optional, but there may be other future optional attributes needed in the future, so by opening up this options object, we make it easier to allow future players to be able to change based on their unique needs, without changing the API anymore. Also, there is an argument that this way closely resembles a track, which also accepts an object and not strings.

    Considering the above, I think any mandatory fields should be passed in directly, and anything in the options object should be optional. So it would look something like this:

    Popcorn( Popcorn.youtube( "video2", "http://www.youtube.com/watch?v=9oar9glUCL0", {comments: true} ) );
    

    This doesn't break the previous api, allows any future changes we cannot predict to be added, without braking the API. Finally, any future mandatory fields we may want to add in the future can be appended before the options, with the last parameter always being the options object.

    SO considering all this, our uses cases can be all of the below:

    Popcorn( Popcorn.youtube( "video2", "http://www.youtube.com/watch?v=9oar9glUCL0" );
    Popcorn( Popcorn.youtube( "video2", "http://www.youtube.com/watch?v=9oar9glUCL0", {comments: true} );
    Popcorn( Popcorn.youtube( "video2", "http://www.youtube.com/watch?v=9oar9glUCL0", "some other mandatory field I cannot predict, but we can support for future players" );
    Popcorn( Popcorn.youtube( "video2", "http://www.youtube.com/watch?v=9oar9glUCL0", "some other mandatory field I cannot predict, but we can support for future players", {comments: true} );
    

    Thoughts?

  • David Humphrey

    David Humphrey April 20th, 2011 @ 04:13 PM

    Scott, I do indeed want this in 0.5, so let's take whatever is holding us up and file follow-up tickets. 0.5 needs the soundcloud stuff in it.

  • Rick

    Rick April 20th, 2011 @ 04:20 PM

    I second this:

    
    Popcorn( Popcorn.youtube( "video2", "http://soundcloud.com/forss/flickermood", {comments: true} ) );
    
  • Steven W

    Steven W April 20th, 2011 @ 08:23 PM

    • State changed from “review-needs-work” to “peer-review-requested”
    • Assigned user cleared.

    I see the wisdom in that way, so I've switched the API to expect this:

    Popcorn( Popcorn.youtube( "video2", "http://www.youtube.com/watch?v=9oar9glUCL0" );
    Popcorn( Popcorn.youtube( "video2", "http://soundcloud.com/forss/flickermood", { comments: true} ) );

    I still think it's important for players to be able to expect only an options object, so that the API is similar between creating players and track events, but Scott's talked me into it being too late in the 0.5 night to support it now.

    I've updated the branch. As Scott and I discussed, I've kept width/height as optional attributes of the options object so that if two players are to be children of the same parent container, they different width/heights can be specified. By default, width and height are drawn from CSS and styling information.

    This API is now identical to that of Vimeo and Youtube in #422

    https://github.com/stevenaw/popcorn-js/commits/t380

  • Rick

    Rick April 21st, 2011 @ 09:41 AM

    • State changed from “peer-review-requested” to “review-needs-work”
    • Assigned user set to “Steven W”

    Tested with Soundcloud test suite:

    Chrome 10, 11

    Firefox 3.6.16, 4.0

    The only issue is that the test for "ended" isn't making the timeout cut-off:

    http://gyazo.com/8810ddba10ed13e9dc2dc45b8bafd415.png

    This is the only outstanding issue that I can see

  • Scott Downe

    Scott Downe April 21st, 2011 @ 02:10 PM

    Hm, I looked into it. Passing for me, but increasing the time we give the tests should fix it.

  • Scott Downe

    Scott Downe April 21st, 2011 @ 04:20 PM

    • State changed from “review-needs-work” to “peer-review-requested”

    https://github.com/ScottDowne/popcorn-js/commits/t380

    Decided seeing how this is a pretty modular test, testing only ONE feature, if it times out, it won't break other tests.

    For example, in core tests, if one module isn't responding, we can timeout, and continue with other tests. In this case, there really is only one feature to test, soundcloud.

    If it isn't responding, then the nothing can be tested anyway. So given that thought, I am going to remove the timeout completely. Also, soundcloud has unpredictable loading times, being quick one day, and taking forever the next.

  • Steven W

    Steven W April 21st, 2011 @ 04:22 PM

    • Assigned user changed from “Steven W” to “Rick”

    I've increased the timeout, should be enough now:

    https://github.com/stevenaw/popcorn-js/commits/t380

  • Scott Downe

    Scott Downe April 21st, 2011 @ 05:30 PM

    • State changed from “peer-review-requested” to “super-review-requested”

    Thanks Steven :)

    Yeah, I think we both agree this is the right idea.

  • annasob

    annasob April 21st, 2011 @ 05:39 PM

    • State changed from “super-review-requested” to “review-looks-good”

    This looks good to me.
    Tests and examples work on Chrome, FF 3.6 and 4.0 Vista

    SR+

  • annasob

    annasob April 21st, 2011 @ 05:44 PM

    • State changed from “review-looks-good” to “staged”

    Staged in annasob/popcorn-js commit

  • Henrik Moltke

    Henrik Moltke April 26th, 2011 @ 03:16 PM

    Demo is live - blogpost here: http://yoyodyne.cc/radiolab/

    Thanks so much for your great work!

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

Popcorn.js is an HTML5 video framework that lets you bring elements of the web into your videos.

Popcorn.js is a project of Web Made Movies, Mozilla's Open Video Lab.

Shared Ticket Bins

Tags

Referenced by

Pages