SoundCloud forum

[Waleed]

Just a suggestion: A SoundCloud forum that embeds Soundcloud audio.

[RateU]

I'm not familiar with SoundCloud. But after quick reading their API documentations, seem that the easiest way to embed the music is by using oEmbed.

You can create a textbox custom thread fields with these settings:
Title: SoundCloud URL:
Key: sc_url
Applicable Forums: Select any SoundCloud forum(s).
Editable by / Required Field? Everyone (required)
Text Mask Filter: URL (HTTP/S)
Modify it as our needs (eg: specific for SoundCloud URL).
Display Format:

HTML Code

1 2 3 4 5 6

<div id="sc_{$GLOBALS['thread']['tid']}"></div> <script src="https://connect.soundcloud.com/sdk/sdk-3.0.0.js"></script> <script type="text/javascript"> SC.initialize({client_id: 'CLIENT_ID'}); SC.oEmbed('{VALUE}',{element: document.getElementById('sc_{$GLOBALS['thread']['tid']}'),maxheight:100,show_comments:false}); </script>

---

Replace the "CLIENT_ID" with our client id.

[Waleed]

Great. Worked perfectly. I'll post preview link once I'm done making the templates.

[Waleed]

Live Preview: http://sharree.com/showthread.php?tid=586

[RateU]

Great. Thanks for the demo link

BTW, if you want displaying the artwork of each sounds (for example in your forumdisplay_thread), you can use resolve endpoint (not all songs have artwork).

To do this, at least you need to create sc_forumdisplay and sc_showthread templates. Put the link for the SoundCloud js API and your client id inside the header tags, so it will be initialized once.
For example:

HTML Code

<script src="https://connect.soundcloud.com/sdk/sdk-3.0.0.js"></script> <script type="text/javascript"> SC.initialize({client_id: 'CLIENT_ID'}); </script>

---

Then in your sc_forumdispplay_thread, you can grab the artwork URL like this (for example only):

HTML Code

1 2 3 4 5 6

<div id="sc_{$GLOBALS['thread']['tid']}"></div> <script type="text/javascript"> SC.resolve('{$GLOBALS['threadfields']['sc_url']}').then(function(tracks){ $('#sc_{$GLOBALS['thread']['tid']}').html('<img src="'+tracks.artwork_url+'" alt="'+tracks.title+'" title="'+tracks.title+'" />'); }); </script>

---

For displaying the oEmbed in sc_showthread or sc_postbit_first/_classic (example only):

HTML Code

<div id="sc_{$GLOBALS['thread']['tid']}"></div> <script type="text/javascript"> SC.oEmbed('{$GLOBALS['threadfields']['sc_url']}',{element: document.getElementById('sc_{$GLOBALS['thread']['tid']}'),maxheight:100,show_comments:false}); </script>

---

Display Format of the sc_url custom thread field:

Code:

{VALUE}

---

Again, not all songs have artwork. But seems you have custom templates for various showthread/postbit and forumdisplay_* for the SoundCloud forum, so maybe it may useful for you as a reference.

[Waleed]

Let's say a song/audio doesn't have artwork, what shows up instead? A default Souncloud image or nothing?

[Waleed]

Worked on forumdisplay_thread but 2 problems:

- Need larger sized artwork, I think this is set at 100x100
- Also the tracks without artwork come up as broken images

On Soundcloud if a track doesn't have artwork, it is replaced by a default image. <Maybe there is a way to also do this

I'll do some searching.

[RateU]

The default artwork is 100x100 (if any).

You can try this:
sc_forumdisplay

HTML Code

<script src="https://connect.soundcloud.com/sdk/sdk-3.0.0.js"></script> <script type="text/javascript"> SC.initialize({client_id: 'CLIENT_ID'}); var scdefaultimg = 'images/logo.png'; </script>

---

Replace the images/logo.png with the default image (if there is no artwork found). Don't forget to replace the CLIENT_ID

Then in your sc_forumdisplay_thread:

HTML Code

1 2 3 4 5 6 7

<div id="sc_{$GLOBALS['thread']['tid']}"></div> <script type="text/javascript"> SC.resolve('{$GLOBALS['threadfields']['sc_url']}').then(function(tracks){ tracks.artwork_url = tracks.artwork_url?tracks.artwork_url.replace('-large','-crop'):scdefaultimg; $('#sc_{$GLOBALS['thread']['tid']}').html('<img src="'+tracks.artwork_url+'" alt="'+tracks.title+'" title="'+tracks.title+'" />'); }); </script>

---

It will use the 400×400 artwork or load the default image.

[Waleed]

Yes! worked great. Thanks RateU.

Although there is one thing. When viewing the forumdisplay from a mobile device the artwork doesn't appear. Any idea why that is?

---

Actually it looks to be an issue with Safari on iPhone. I tried viewing it on Google Chrome on iPhone, worked fine.