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&displayCTAButton=true&theme=black&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/
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: