Embed SoundCloud stream

 Link:  See a live example.

 View:  View source code in CONTENTdm Cookbook Demo Site.

SoundCloud is traditionally known as a music hosting and promotion service for creators, but it can also be used as a no-cost or low-cost repository for any kind of audio file, such as podcasts or oral histories. SoundCloud offers unique URLs for each stream, and support for embedding the stream in other websites. The support for embedding is used in this recipe to integrate SoundCloud’s audio player directly into your CONTENTdm website. This follows a similar pattern used in other embedded recipes for CONTENTdm, like embedding external YouTube or Vimeo videos.

This recipe is structured to work with the CONTENTdm URL Item type, assuming that you have loaded the direct link to a particular SoundCloud stream as a URL item in CONTENTdm. Hear an example of a SoundCloud item here.

 Note: 

The public-facing URL cannot be directly used in the embeddable audio player because the syntax of the embedded URL requires a unique ID number for the item. The unique ID number is assigned by SoundCloud when the audio file is uploaded to their system.

The SoundCloud ID is the track ID number. This number can be found in the embed code (aka <iframe> code) provided by SoundCloud. In the example below, the SoundCloud ID is 385068290.

<iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" 
src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/385068290&color=%23ff5500&
auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&
show_teaser=true&visual=true"></iframe>

This recipe needs to be able to look up that SoundCloud ID from the CONTENTdm metadata to construct the audio player embed HTML. This means that you will need to designate a metadata field in CONTENTdm to store this SoundCloud ID and add it to the CONTENTdm URL Item record. The recipe will then look for SoundCloud URLs and the SoundCloud ID, and it will insert SoundCloud’s audio player directly into the CONTENTdm item page. Please note that you will need to edit this recipe’s JavaScript code to specify the field nickname that you have designated for storing the SoundCloud IDs.

This recipe has been designed so that you can load your SoundCloud items wherever you prefer. The items can be placed into CONTENTdm collections that contain other kinds of URL items and with any other types of CONTENTdm records.

To install the recipe:

  1. Download the SoundCloud JavaScript file from the Cookbook Recipe Portal.
  2. Open the JavaScript file in a text editor and look for this line in the code:

const url = embedSoundCloud.getUrl(identi',currentUrlLink);

 Note: You will need to modify the value, 'identi', to match the field nickname that corresponds to the metadata field where you are storing the SoundCloud ID.

  1. Save your nickname change to the JavaScript file and upload it as a Custom Script in the website configuration tool.

As with all JavaScript-based customizations in the Cookbook, you can create custom JavaScript functions that affect specific collections or integrate with other recipes.