Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
 SoundCloud forum
Waleed Offline
Junior Member
**
Posts: 34
Joined: Feb 2013
Post: #1
SoundCloud forum
Just a suggestion: A SoundCloud forum that embeds Soundcloud audio.
11-19-2015 05:00 PM
Find all posts by this user Quote this message in a reply
RateU Offline
Administrator
*******
Posts: 2,350
Joined: Mar 2010
Post: #2
RE: SoundCloud forum
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.



Attached File(s) Thumbnail(s)
   

11-20-2015 03:34 AM
Find all posts by this user Quote this message in a reply
Waleed Offline
Junior Member
**
Posts: 34
Joined: Feb 2013
Post: #3
RE: SoundCloud forum
Great. Worked perfectly. I'll post preview link once I'm done making the templates.
11-20-2015 08:13 AM
Find all posts by this user Quote this message in a reply
Waleed Offline
Junior Member
**
Posts: 34
Joined: Feb 2013
Post: #4
RE: SoundCloud forum
Live Preview: http://sharree.com/showthread.php?tid=586
11-20-2015 09:40 AM
Find all posts by this user Quote this message in a reply
RateU Offline
Administrator
*******
Posts: 2,350
Joined: Mar 2010
Post: #5
RE: SoundCloud forum
Great. Thanks for the demo link Smile

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.



Attached File(s) Thumbnail(s)
   

11-21-2015 01:58 AM
Find all posts by this user Quote this message in a reply
Waleed Offline
Junior Member
**
Posts: 34
Joined: Feb 2013
Post: #6
RE: SoundCloud forum
Let's say a song/audio doesn't have artwork, what shows up instead? A default Souncloud image or nothing?
11-21-2015 09:38 AM
Find all posts by this user Quote this message in a reply
Waleed Offline
Junior Member
**
Posts: 34
Joined: Feb 2013
Post: #7
RE: SoundCloud forum
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.
11-21-2015 04:13 PM
Find all posts by this user Quote this message in a reply
RateU Offline
Administrator
*******
Posts: 2,350
Joined: Mar 2010
Post: #8
RE: SoundCloud forum
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.



Attached File(s) Thumbnail(s)
   

(This post was last modified: 11-22-2015 01:44 AM by RateU.)
11-22-2015 01:35 AM
Find all posts by this user Quote this message in a reply
Waleed Offline
Junior Member
**
Posts: 34
Joined: Feb 2013
Post: #9
RE: SoundCloud forum
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.
(This post was last modified: 11-22-2015 08:38 AM by Waleed.)
11-22-2015 08:28 AM
Find all posts by this user Quote this message in a reply

« Next Oldest | Next Newest »

 Standard Tools
Forum Jump: