What's new

Embedding Soundcloud-tracks on this forum

JohannesR

Active Member
Is there a way to embed Soundcloud-tracks here at VI? 8dio has done it a couple of times as far as I remember. I don´t particularly like having to download tracks in order to hear them myself - embedding is a great way to share IMO.
 
First you need to go to Soundcloud and click "share" and copy the code in "wordpress". There you will find a number which identifies the piece. Then use that number and replace the corresponding number in the following code to successfully embed soundcloud files on VI:

example embed code:

[soundcloud url="https://api.soundcloud.com/tracks/17548011" iframe="true" /]

Code:
forum code:

[flash width=450 height=110 loop=false]https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F17548011&secret_url=false[/flash]

resulting forum code:

[flash width=450 height=110 loop=false]https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F17548011&secret_url=false[/flash]
 
[soundcloud url="https://api.soundcloud.com/tracks/35559587" iframe="true" /]

I'm not quite sure where the number goes in the code

I see the numbers 35559587 should they replace the numbers 17548011 in the green example above?
 
[flash width=450 height=110 loop=false]https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F35559587&secret_url=false[/flash]
 
OK, the forum parser is very picky about things like white space, and hidden characters!

Try this:
1) go to soundcloud and snip the code for your track by clicking on "share" and then clicking on "wordpress"

You will get something that looks like:
[soundcloud url="https://api.soundcloud.com/tracks/11428341" iframe="true" /]

Ignore everything but the number after the word "tracks" in my case 11428341

2) open up your favorite text editor, or use the forum editor, and copy and paste the following gobbledygoop into said editor:

flash width=450 height=110 loop=false]https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2FXXXXX&secret_url=false[/flash]

(I've obscured the fact that this is a directive by removing the leading brace '[' - you must add a brace at the beginning for this to work)

now replace the XXXXX with the number - and only the number, from soundcloud, in this case it would be 11428341

Be careful not to change anything else... especially do not add extra spaces or carriage returns or what not. Also, there is no need to add the URL tags... this is a flash player. (could be an HTML5 player one of these days<G>!)

In my case the result is:

flash width=450 height=110 loop=false]https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F11428341&secret_url=false[/flash]

(note: I again removed the leading brace '[' so you can see the code)

now I've added the brace, so you should see the player below:

[flash width=450 height=110 loop=false]https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F11428341&secret_url=false[/flash]

now let's see if it worked...

And it did.

PM me if this doesn't work for you!
 
There should be an easier and simpler way of doing this given this is a music forum and a lot of posts reference Sound Cloud tracks.
 
There should be an easier and simpler way of doing this given this is a music forum and a lot of posts reference Sound Cloud tracks.

Maybe... well, no, it would be nice if there was an easier way.

But the forum - that's us - is at the mercy of the forum software. And the forum software is at the mercy of the various standards (nope, can't say that work with a straight face) that exist in the world wide web.

Flash is pretty remarkable, but it is proprietary, and convoluted. HTML5 may solve many of these issues.

But remember, at the very core of all of this is a bunch of 30 year old Unix/C code that does the heavy lifting. And for whatever reason, it cares about extra white space, and extraneous non-printing characters, and even characters that fall outside the original ASCII set, and so on and so forth.

The simplest way to handle this today is to clip the example code above, substitute your track ID for XXXXX, and add a leading brace. I've tried it several times and it worked every time.

Now I'm playing around with customizations<G>... I need help!!!
 
Okay, after a few tries, I finally got it to work:

[flash width=450 height=110 loop=false]https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F34639134&secret_url=false[/flash]

Here's the weird thing, though. On my computer, at least, in the examples that both you and Frederick give, there is an added space in the second "soundclo ud" between that "o" and "u" that I needed to eliminate. Weird, because I doubt either of you typed it that way. Let me see what it looks like when I past my own working code, minus the start bracket:

flash width=450 height=110 loop=false]https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F34639134&secret_url=false[/flash]

Same thing!!! The second time the word "soundcloud" appears in that code, a space got magically inserted between the "o" and "u." Wow! I wonder if that's just a Mac Safari thing? Is everyone else getting that same space?

In any event, for anyone else trying this, look out for that space. You want "soundcloud," not "soundclo ud." It makes the code not work until you take that space out.
 
There should be an easier and simpler way of doing this given this is a music forum and a lot of posts reference Sound Cloud tracks.

But the forum - that's us - is at the mercy of the forum software. And the forum software is at the mercy of the various standards (nope, can't say that work with a straight face) that exist in the world wide web.

Well you are wrong - the forum software, phpBB, that this forum uses is very versatile and can be upgraded. The board administrator can add SoundCloud support to the forum. I would encourage an admin to please take a look at this...

Here is how to add that functionality to it...
https://blog.soundcloud.com/2009/07/28/s ... d-bb-code/

There are loads of features that can be added to the board to make this place a little more friendly, including what I think is really needed and that is a better mobile support like for the iPhone.
 
Here's the weird thing, though. On my computer, at least, in the examples that both you and Frederick give, there is an added space in the second "soundclo ud" between that "o" and "u" that I needed to eliminate. Weird, because I doubt either of you typed it that way. Let me see what it looks like when I past my own working code, minus the start bracket:

flash width=450 height=110 loop=false]https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F34639134&secret_url=false[/flash]

This is sometimes referred to as a phantom space - it results from a forced line break that is not treated properly somewhere.

I did not have it - and I use a text editor that's really good with things like that - which might be why I got away with it<G>!

Anyway, if I get energetic later I'll see if I can find the source of the extra space...
 
Well you are wrong - the forum software, phpBB, that this forum uses is very versatile and can be upgraded. The board administrator can add SoundCloud support to the forum. I would encourage an admin to please take a look at this... <snippity>

You are right, there are loads of feature that can be added to phpBB - are you volunteering to add them<G>???

maybe I'm just cranky today... but I think there's probably a better way to ask Fred to add features...

I would agree that better mobile support would be nice and I'd agree that for some here it might be an advantage to get away from flash entirely and use a simpler interface to any streaming server.

(if I were really cranky I'd probably point out that this is forum made up largely of people who are technically savvy, and enjoy technology - how else to you use VIs? - and therefore it shouldn't be a big deal to learn a little code. - Fortunately, I'm not that cranky!)
 
Well I hope I wasn't being rude or pushy, I was just saying that it could be done.

Anyway thank you Fred for making everyone a home on the internet for us VI nerds.
 
BTW, I wanted everyone to know just, in case you're weird like me and like to be in control of themes, here is how you can edit the colors of your player.

First, here is an example:

[flash width=450 height=100 loop=false]https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F58175328&secret_url=false&player_type=waveform&theme_color=000000&color=000000&comments_color=000000&color=000000[/flash]


This is what you need to add RIGHT AFTER the link (no spaces!).

&player_type=waveform&theme_color=000000&color=000000&comments_color=000000&color=000000


Here is the code with the [] removed so you can see what it looks like:

flash width=450 height=110 loop=false]https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F54099996&secret_url=false&player_type=waveform&theme_color=000000&color=000000&comments_color=000000&color=000000[/flash


The rest is just using hexadecimal code to configure what colors you want to use. 000000 is all black. This is all pretty pointless, but I hope you enjoy the code anyways. Below is an example of how to implement the code with HTML if you use the SoundCloud Player as a part of your website. Sometimes white and orange just doesn't cut it!

<object height="81" width="100%"> <param name="movie" value="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F45593418&amp;show_comments=false&amp;auto_play=false&amp;color=000000"></param> <param name="allowscriptaccess" value="always"></param> <embed allowscriptaccess="always" height="81" src="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F45593418&amp;show_comments=true&amp;auto_play=false&amp;sphere&player_type=waveform&theme_color=000000&color=000000&comments_color=000000&color=000000" type="application/x-shockwave-flash" width="100%"></embed> </object>
 
Just checking to see if you can change the width with that
[flash width=899 height=130 loop=false]https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F34639134&secret_url=false[/flash]

Code:
[flash width=899 height=130 loop=false]https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F34639134&secret_url=false[/flash]
 
Just checking to see if you can change the width with that
[flash width=899 height=130 loop=false]https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F34639134&secret_url=false[/flash]

It's all editable. Just insert a pixel or percentage amount after "width=" and it should work. I'm on my phone at the moment so I can't test anything out yet.
 
let's see...

[flash width=450 height=110 loop=false]https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundclo ud.com%2Ftracks%2F35559587&secret_url=false[/flash]
 
[flash width=450 height=110 loop=false]https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F35559587&secret_url=false[/flash]
 
Top Bottom