Just a suggestion: A SoundCloud forum that embeds Soundcloud audio.
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
<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.
Great. Worked perfectly. I'll post preview link once I'm done making the templates.
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
<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:
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.
Let's say a song/audio doesn't have artwork, what shows up instead? A default Souncloud image or nothing?
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.
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
<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.
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.