Embed the Captions Plugin with SoundCloud

After receiving an email notifying you that your files are complete, follow the steps below to embed the captions plugin along with a SoundCloud player on your webpage.

 

Step 1- Add the JavaScript file to the <body>

Open up a new document in your text editor.

COPY the JavaScript file below:

<script src="http://w.soundcloud.com/player/api.js"></script>

and PASTE it into the <body> of your HTML.

 

Step 2- Sign into your SoundCloud account

 SoundCloud Sign in

 

Step 3- Navigate to your SoundCloud profile

SoundCloud profile

 

 

Step 4- Copy the Widget Code for your track

Navigate to the SoundCloud track that you would like to embed on a webpage with the captions plugin.
Click the share icon.

SoundCloud share

From the pop-up menu that appears, click the pencil icon located underneath Widget Code.

SoundCloud Widget Code Copy

After customizing your SoundCloud player from the menu that appears, select and then copy the Widget Code.

 SoundCloud player customization widget code copy

Step 5- Paste the Widget Code

 Paste the Widget Code below the JavaScript file withIn the <body> of the HTML document. 
Your page should look similar to the code below:

<html>
<head>
</head>
<body>

<script src="http://w.soundcloud.com/player/api.js"></script>
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/116561438&amp;color=ff6600&amp;auto_play=false&amp;show_artwork=true"></iframe>

</body>
</html>

 

Step 6- Add an ID to the Widget Code

Add a parameter to the Widget Code to define the player ID. 
This should be added after frameborder="no"

NOTE: There are no requirements for the naming conventions of the player ID, it can be called anything, even lamp!

Below is what the Widget Code should look like once you have added the ID. 
The example below has the id defined as "lamp".

 

<html>
<head>
</head>
<body>

<script src="http://w.soundcloud.com/player/api.js"></script>
<iframe width="100%" height="166" scrolling="no" frameborder="no" id="lamp" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/116561438&amp;color=ff6600&amp;auto_play=false&amp;show_artwork=true"></iframe>

</body>
</html>

 

Step 7- Log into your 3Play Media account

3Play Media login

 

Step 8- Create New Plugin Template

Navigate to Settings > Plugin Templates and create a new Captions Plugin template. 
See more information on how to create a Plugin Template

In the plugin template, under Player, select SoundCloud.  Under Player ID, There are no requirements for the naming conventions of the Player ID

 

Captions Plugin Template Creation

After designing the plugin template click Save My Plugin.

See more information on the Captions Plugin Settings.

 

Step 9- Select your 3Play Media file

Go to the My Files page in your 3Play Media account.
Click on the file associated with your SoundCloud track.

Captions Transcript Translation Files

  

Step 10- Click Publish Plugin

Click Publish Plugin located above your list of files.

Plugin Publisher button 

Step 11- Select a Plugin Template

Click Select Your Plugin and from the drop down menu that appears select the plugin template created in step 8.

Select Captions Plugin

 

Step 12- Copy the 3Play Media plugin embed code

Once highlighted blue, copy this code. 
This is your 3Play Media interactive transcript embed code. 

Captions Plugin SoundCloud Embed Copy

 

Step 13- Paste the plugin embed code into your HTML

Paste the 3Play plugin embed code below the SoundCloud Widget Code in the <body> of your HTML.

Before saving this page, your HTML should look similar to the code below:

<html>
<head>
</head>
<body>
<script src="http://w.soundcloud.com/player/api.js"></script>
<iframe width="500" height="240" scrolling="no" frameborder="no" id="lamp" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/116561438&amp;color=ff6600&amp;auto_play=false&amp;show_artwork=true"></iframe>
<script src="http://static.3playmedia.com/p/projects/10013/files/78983/embed.js?plugin=captions&settings=width:398,skin:dark,overlay:true,searchbar:true&player_type=soundcloud&player_id=lamp&include_translations=1" type="text/javascript"></script>

</body>
</html>

 

Formatting tip: If you want the SoundCloud player and the captions plugin to match in width, change the plugin's width to match the width of the SoundCloud player!

 

Step 14- Publish your SoundCloud player with the captions plugin

Save your new HTML code and publish it!  Enjoy!

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk