soundcloud embed

[danielholanda]

Hello,

I'm trying to create the CMS for the music section. The client will basically have its music uploaded via soundcloud. The client could copy and paste the embed option of soundcloud and insert it into a field. This could be echoed trough a foreach loop.

What I dont know is how will I do this. Which field should I use and which method is the best? What do you reccomend?

[diogo]

I had a look at soundcloud sharing options, and they don't look very smart... Still, I think your best option would be using the wordpress option that looks like this:
[soundcloud url=http://api.soundclou...racks/59046167" iframe="true" /]

You have two options. One that represents more work to the editor but less processing work, one simpler to the editor but more complex in PHP.
For both options, create a text field "song", and add it to the template.

For the first option, teach the editor to get the wordpress sharing option in soundcloud, extract the number of the song
[soundcloud url=http://api.soundcloud.com/tracks/59046167" iframe="true" /]
and put it on the "song" field.
The code on the template would be this:
 

$song = $page->song;
echo "<iframe width='100% height='166' scrolling='no' frameborder='no' src='http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F{$song}}&show_artwork=true'></iframe>";

Second option, is a little bit easier to the editor because he doesn't have to look for the number on the wordpress code. Only copying it.
[soundcloud url= iframe="true" /]
Your code would have to be more complex, and a bit slower in terms of processing:
 

$src = $page->song;
preg_match( '/([0-9]+)/', $src, $matches); //extracting the numbers part of the url with a regular expression
$song = $matches[1]; // and putting it on a variable
echo "<iframe width='100%' height='166' scrolling='no' frameborder='no' src='http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F{$song}&show_artwork=true'></iframe>";

edit: corrected some typos by WinnieB's suggestion 

[teppo]

Hello there,

First of all, letting a client post HTML straight into a field and then echoing it (especially without escaping anything) could potentially break things up and cause quite a bit of confusion / extra work for you, so I wouldn't really suggest it.

IMHO better option would be to ask the client to post WordPress embed tag offered by SoundCloud to the body field (or any other field you've specified, actually) and then replace that with actually player code at your template. WordPress embed tags look like this:

[soundcloud url="http://api.soundcloud.com/tracks/59233018" iframe="true" /]

Simply ask your client to post these tags to whatever field you've specified, each as it's own paragraph (just paste and hit enter when field has TinyMCE enabled.) Then include this code in your template (I'm using body field as an example here):

<?php

$replacement = '<iframe width="100%" height="166" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F$1&show_artwork=true"></iframe>';
$page->body = preg_replace("#<p>[^\w]*\[soundcloud url=\"http:\/\/api.soundcloud.com\/tracks\/([0-9]+)?\"[\w\=\" ]* \/\]</p>#i", $replacement, $page->body);

That should do the trick.

EDIT: once again I've been too slow.. damnit. Oh well, now there's twice the regexp fun to check out.

EDIT 2:

@danielholanda, even though both answers so far have certain similarities (regexp ftw), there's actually one important difference just in case you've missed it: the method diogo provided is based on adding a specific field for songs. This way if you want multiple songs on one page you could add that field inside a repeater and loop through it's content. The method I posted above is based on the assumption that you could be using that same field for both "typical" content and (multiple) SoundCloud embeds.

I'm adding this just to clarify both methods a bit and make it easier to choose which method you're going to use. This really depends on how your client will manage this content too; especially if each SoundCloud clip has it's own page there's very little point for using the latter method.

[WinnieB]

Hi, I came across this thread while trying to get SoundCloud player embed to work in ProcessWire 2.3.

Diogo, both your suggestions returned this error when I first tried them:

“/tracks/}” is not a valid SoundCloud URL
 

On examining both PHP snippets I noticed the extra closing curly brace around :

{$song}}
 

Once I removed it the embed worked BUT the bottom 10% or so of the player was cut off. 

Then I saw there was no closing single quote after:

 width='100%
 

When I added that, both of your methods worked.

Diogo, would you mind correcting those bits in your code snippets?

Teppo: I pasted the WordPress tag in its own paragraph in the Body field of a page, and pasted the PHP into the corresponding template, but I couldn't get it to work...the page just prints the tag as it was pasted in.

A couple further questions:

1. could "Edit Field --> Input Field Settings --> Pattern" could be used for the regex instead of template code?
2. how hard would it be to make a SoundCloud embed module similar to the YouTube/Vimeo one? I've looked at the module code and kind of understand what's going on in theory but I'm just a PHP beginner. SoundCloud embed docs are here.

Thanks!

[diogo]

Thanks for finding those WinnieB. I corrected them already.