Create a Streaming player

Stream audio and video files online

Give your fans a chance to preview your media without providing a direct link to download. Topspin's Streaming Player can be placed in a variety of environments, providing fans a chance to listen or watch your art online.


Set up the contents of your streaming player


In your Promote tab, click  "New Offer > Streaming Player"


Internal Name: Name your player for easy organization within your Products tab

Fan Facing Name: Player names are not directly surfaced to fans, so you can mirror the internal name you have entered above

Distribution Options: These fields have been discontinued and will be removed from the app soon. You can leave these unchecked.



Product Type: This can be either a single Audio Track, single Video, or a digital package containing multiple Audio Tracks and/or Videos.

Digital packages: If you are looking to stream multiple songs and/or videos, you will need to create a Digital PackageSongs and/or videos will appear and play in the exact order they are set in your Digital Package. More information on adjusting the track order in your streaming player can be found below.

Customize your streaming player

Headline.png

Headline: This optional field will display at the top of your player. Be sure to keep this brief as the text is standardized and will not wrap if too wide for your player

Headline link: By default, clicking your headline will redirect to your Spinshop. You can change this to another location if you would like to instead direct fans to your website, or any other URL on the web.

Autoplay: This is set off by default, but you can enable autoplay by toggling this switch.

Display Artist Name: You can elect to display or hide your artist name over the art in your player.

Allow Sharing: Sharing is enabled by default, but if you do not want people to be able to share your player, turn this off to remove the Facebook and Twitter links that display below your headline.

PlayerPreview.png

    Theme: Choose either the light or dark theme for your streaming player. This will affect the tone of your player's control bar

    Aspect Ratio: Choose from one of the default ratios to constrain your height and width to the correct scale. Square works best for album cover art. The standard and widescreen video ratios work best for movies and trailers. Choose custom if you would like to enter your own height and width combination.

    Width/Height: Here is where you can enter the size of your player. These parameters affect only the size of the play window, which is the space displaying the artwork or video for the streaming player.

    Color Selector: Use the color selectors to customize the text, text highlight, and the control bar of your player. The interactive preview will allow you to choose colors as you go, and you can also paste in any predetermined hex color to match your own webpage.

    Artwork: The artwork that appears in your player is determined by the image attached to the exact media file that is being streamed. More details on this can be found below.


Set art for each product being streamed

The art displayed in your streaming player corresponds to the exact product being streamed. If you are streaming a Digital Package, you will need to set images for each of the files inside. The art set for the Digital Package will not automatically carry over to each of the products inside. This allows you to display different images for each track if you would like to create track-specific album art.

If you have not already associated art with each individual audio track or video, instructions on how to do this can be found here. Audio tracks or video files that do not have any artwork associated will have the default image in your Artist Profile substituted.

Set playlist order within your Digital Package

D_Dd.jpg

The order that songs and videos will display and playback is determined by the order that they are set in the Digital Package they are contained in.

To customize the order of files, navigate to your Products tab and select that Digital Package. 

1. Scroll down and click the "Edit Package" button

2. Drag and drop the files so that they are in the order you'd like them to appear in your streaming player

 

Preview and publish

Once you have customized your widget to your liking, scroll back up to the top of the page and click the Publish button in the upper-right corner. You will be presented with a preview of your widget, and also the embed code that you can copy to paste on your own website. Don't worry if you aren't ready to post this on your site just yet, as this will always be available to copy when you come back to this streaming player's configuration page in your Promote tab.

It's always best to give your widget a quick test to make sure it is working as expected. Before pasting the code onto your page, it might be a good idea to paste it in a live sandbox to see how it functions and looks. You can try testing out your embed code here.

 

 

----- 

Transcoding

Audio and video files are transcoded to a reduced rate for viewing online. For example, a video file would be transcoded down to about 775kbps for 400x224 AAC 48K 25FPS.

Bandwidth is calculated based on how much a viewer streams, so if someone only loads half a video, the bandwidth charge for that viewing would be half the cost of how much it would be if someone watched all the way through.


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" /> 
http://cdn.topspin.net/widgets/bundle/swf/TSBundleWidget.swf" /> 
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. 


Have more questions? Submit a request and our team will be able to help get you sorted.