Find answers/Build Your Fan Base - Promote Tab/Single Track Players

Create a Single Track Player

Bill Thompson
posted this on August 02, 2011 10:42 am

Introduction

The Single Track Player is a compact streaming player that can be used to place a single song or video easily in the context of a web page, blog post, Facebook Static HTML tab,  etc. It can only be loaded with and stream one track or video. 

Screen_Shot_2011-12-08_at_6.44.51_PM.png

Setup

Setting up the single track player is simple - just create one in the Topspin application and then 
place the embed code generated by the application on any web page you control.

Modify Settings


  • Button Text: Button text refers to the text physically inside the headline button. The button reads “Learn More” by default. 
  • Button URL: The button URL should point to a location on the web where you want people to go. It points to your Spinshop by default. 
  • Size: These are the physical dimensions of the widget (shown as width by height) in pixels. After publishing, you can only change these dimensions by altering the HTML width and height parameters when embedding the code outside Topspin. 

 

Add Product

  • Product Type & Name: Choose the exact audio track you'd like to stream. 
  • Auto-start when loaded: A feature also known as "auto-play". Make sure to consider your audience before choosing auto-play. 

You can customize the color of your single track player but altering the "Theme" and "Controlbar" attributes.

Topspin_Media__-__Widget-1.jpg

If you’re satisfied with the appearance of the widget, click “Publish” in the upper right of the creation form. You will be presented with a confirmation code that shows your widget, and provides you with the embed code that you will need to place this widget on the web. (Don’t worry — you don’t need to get it now. You can always click into the widget again to copy its embed code).

Older Version Streaming Players

We've updated our streaming players twice over the last year, so some artists have specifically asked about using the code for our older players. There are two older player models: The V1 Flash-based Player, and the V2 iframe players. To use the Flash player, all you need to do is enter the widget ID and artist ID into the code below and you're good to go: 

<div class="topspin-widget topspin-widget-bundle-widget"> 
<object type="application/x-shockwave-flash" width="400" height="300" id="TSWidgetENTER-WIDGET-ID" data="http://cdn.topspin.net/widgets/bundle/swf/TSBundleWidget.swf" bgColor="#000000"> 
<param value="always" name="allowScriptAccess" /> 
<param name="allowfullscreen" value="true" /> 
<param name="quality" value="high" /> 
<param name="movie" value="http://cdn.topspin.net/widgets/bundle/swf/TSBundleWidget.swf" /> 
<param name="flashvars" value="widget_id=http://cdn.topspin.net/api/v1/artist/ENTER-ARTIST-ID/bundle_widget/ENTER-WIDGET-ID&amp;theme=black&amp;highlightColor=0x91e2e5&displayCTAButton=true" /> 
<param name="wmode" value="transparent" /> 
</object> 
</div>

To use the V2 iframe player, just input your widget ID in the following embed code: 

<iframe id="tsFrameENTER-WIDGET-ID" src="http://cdn.topspin.net/api/v2/widget/ENTER-WIDGET-ID" frameborder="0" width="300" height="300" ></iframe>

 

Note: Old players (V1 & V2) are no longer supported and will not function on mobile devices.