Topspin's Streaming Player can be placed in a wide variety of environments. It can play single audio tracks, full albums, videos, and any combination thereof.

Setup

Log into Topspin and go to the Promote section of your account and click "New Offer > Streaming Player".  

Settings

• Internal/Fan Facing Name: Name your player for easy organization within your account - player names are not surfaced to fans

Add Product

• Product Type & Name: Options are Audio Track, Video, and Digital Package. Choose the exact media you'd like to stream. Once you've selected your media, the player editor will expand below:

• Artwork: The artwork that appears in your player is determined by the image attached to the exact media file that is being streamed. If you're streaming an audio track, you'll need to go back to the Products section of your account and associate an uploaded image with the relevant track. If you are streaming a package of songs, each song must have artwork identified with it it individually. Assigning one image to a digital package containing the tracks is not sufficient.
• Headline: This is the main headline of your player. This text is overlaid on top of the player until the user pushes "play". Leave this blank for a player with no headline whatsoever. 
• Headline link: Your headline can send viewers anywhere on the web. Input any destination URL to which you'd like to drive traffic! 
• Autoplay: Make sure to consider your audience before choosing autoplay. Autoplay means that your player will stream without the consent of the fan visiting the page. 
• Display Artist Name: This will include your artist name in your widget's playlist. 
• Theme: This option allows you to pick the darkness of your player's control bar 
• Aspect Ratio: There are three default aspect ratios to choose from: Square (great for album cover art), standard video, and widescreen video (great for videos and trailers). Otherwise, use "custom". 
• Width/Height: customize your player dimension down to the last pixel. These parameters affect only the size of the "play window" (the space displaying the artwork or video for the streaming player. 
• Playlist Size: Whether you'd like a long, exposed playlist, or a compact, scrollable playlist, we've got you covered. Your playlist can be any length you'd like! 
• Color Selector: If a default gray scheme isn't your thing, feel free to customize the look of your player infinitely with the Text, Text Highlight, Controlbar, Playlist color selectors. Use the interactive preview to choose your colors as you go, or paste in any predetermined hex color to match your own site. 

Playlist Track Order

Preview and Publish

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 preview of your widget, and 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).

You should always give your widget a quick test from to make sure that it works as expected - if you have videos, try playing them; listen to tracks, see that your slideshow works.

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.