Embed an Interactive Transcript with SoundCloud

After receiving an email notifying you that your files are complete, follow the steps below to embed an interactive transcript 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 an interactive transcript.
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 Interactive Transcript plugin template. 
See more information on how to create a Plugin Template

> For Plugin Template choose either Interactive Transcript Light or Interactive Transcript Dark.
> For Player Type select Soundcloud from the drop down menu.
> For Player ID field enter myscplayer.
> For a fixed pixel Height and pixel Width either a value followed by px. For example, 300px 
For a responsive plugin embed code enter a value followed by %. For example, 100%
> For Settings choose from the available options.

After designing the plugin template click Save My Plugin.

See more information on the Interactive Transcript Plugin Settings.

PRO TIP: If you want the video player and the interactive transcript plugin to match in width, change the plugin template's width to match the width of the SoundCloud player! If you change the width of the SoundCloud player to match the interactive transcript plugin, the aspect ratio of your video will likely be distorted.

 

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.

Click a File

  

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 Plugin Template

Step 12- Copy the Plugin embed code

After selecting a plugin template copy the plugin embed code that appears within the Publish Plugin pop-up menu.

3Play Media Captions Embed Code 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="200" 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=transcript&settings=width:500,height:240,skin:metallic,can_collapse:true,can_print:true&player_type=soundcloud&player_id=lamp" type="text/javascript"></script>
</body>
</html>

 

Step 14- Publish your SoundCloud player with the interactive transcript

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