Meet the "New" Player, Same as the Old Player

March 30, 2011 By 4 Comments

There has been some discussion about the lack of customizability of the new HTML5 version of the Topspin streaming player.  Also some people on the Topspin Community Forums have expressed dismay at the way the streaming player operates, as it has been unpredictable in some cases.

I was wondering if there was a way to hack a workaround that would create a new player using the old Flash-based player.  Today I stumbled across a post on the Topspin Community Forums by Jason Kadlec of DTF Works where he had tested and implement the very workaround.  He posted a quick how-to on his site and he gave me the permission to use the information here. I’ve edited his original adding some additional info to it to expand on his original workaround.

Reverting to the Old Topspin Player

So some folks are not happy with the new player. Good news! You can still call up the old player. No guarantee for how long, but my guess is Topspin will have to support the old streaming players for a while.

So here is the new embed code [ed. note: The code is expanded here for illustration purposes, normally you need to compress/condense it, because if you are using WordPress it will mangle it if expanded like this]:

<iframe
     id="tsFrame63380"
     src="http://cdn.topspin.net/api/v2/widget/player/63380"
     style="width:400px;height:400px;border:none;"
     frameborder="0">
</iframe>

In this embed code, you’ll find the ID of this player it is: 63380

So to use the older player, you need the old embed code, you can grab it below if you don’t still have one of your own around.

Then you have to replace the Widget ID as well as the Artist ID and then it should work as the old ones did.

Do note, however that when clicking “share” the old player will give the new HTML5 embed code. Also note, the old player is Flash and therefore is not iPhone/iPad compatible.

Here is the old embed code – note 3 places you need to change the code, highlighted in this example in lines 6 and 17 of the code. The Widget ID is in there twice and the Artist Id is in there once [ed. note: again this is expanded, for ease of viewing]

<div class="topspin-widget topspin-widget-bundle-widget">
<object
     type="application/x-shockwave-flash"
     width="275"
     height="275"
     id="TSWidget63380"
     data="http://cdn.topspin.net/widgets/bundle/swf/TSBundleWidget.swf?timestamp=1296863070"
     bgColor="#2c4056">
<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?timestamp=1296863070" />
<param
     name="flashvars"
     value="widget_id=http://cdn.topspin.net/api/v1/artist/3490/bundle_widget/63380?timestamp=1296863070&amp;displayCTAButton=true&amp;theme=black&amp;highlightColor=0x4d7f9d" />
<param name="wmode" value="transparent" />
</object>
</div>

The first place to change the widget ID is: TSWidget63380, which is line 6 in this example.

The second place is artist/3490/bundle_widget/63380, which is line 17 in this example.

That line is also where you need to replace the artist ID. In this example the artist ID is 3490.

You find your artist ID by logging into Topspin and going here: http://app.topspin.net/account/settings/

Good luck!

Thanks again to Jason Kadlec for letting me adapt his workaround for a post here. Jason is the founder and CEO of DTF Works and has also instructed the Berklee Online School’s Marketing with Topspin since the course launched in 2009.

Here is the Dick Prall Inc. EP streaming media player widget in the new iframe-based HTML5 format:

Here is the Dick Prall Inc. EP streaming media player widget in the old Flash-based format:

Filed Under: Tricks

Need Help With Topspin?

About Chandler Coyle

My name is Chandler Coyle, and I'm a Topspin-certified marketer, musician, and life-long music geek. I co-founded Music Geek Services, which provides web development and Topspin consulting services, and teach Online Music Marketing with Topspin at Berklee Music Online. You can find me on Twitter as @musicgeeksvcs.

Comments

  1. Corey Ellis says:
    March 31, 2011 at 3:05 am

    Hey Chandler. What images are associated with the html player above? That same code I was struggling w/ earlier to change to flash does not show an image when using the iframe code. There is a image associated w/ the digital package but no image is showing. I thought it was an issue w/ all iframe codes but you have an image. Did u have to hack that?

    Reply
  2. Topspin Tips says:
    March 31, 2011 at 8:39 am

    Hey Corey!

    Thanks for stopping by the site and for taking the time to post a question. The image(s) that appear are the ones associated with the “product” in Topspin. In this case, it is a digital package that has two photos (front and back of CD jacket) that I associated with the product when I created the digital package. So when I created the new streaming player, I chose the check box “Product Artwork” under the “Add Slideshow Display Items” section.

    Reply
  3. evolvor says:
    March 31, 2011 at 5:48 pm

    AH HA! This explains so much of my frustration with this widget, and the old documentation didn’t make any sense to me. Thanks!

    Reply
  4. Heath says:
    April 4, 2011 at 1:25 pm

    Hi

    I have a problem with customization of this new player, the documentation in topspin is dated, how can i custom the colours etc with this new iframe embed, how can i change flash vars settings etc, whats the new process to achieve customization?

    Thanks
    H

    Reply

Speak Your Mind

*