0 Comments

The Chromecast is using web content to display and play movies, music or show pictures. I use Plex and it’s a great backend to show your local media on Chromecast.

Unfortunately there is little support and promises from Spotify to provide support for Chromecast (yet I keep my hopes high). Spotify has a web player and therefore should not be that extremely hard to implement.

The way Plex show your content on Chromecast is through their webplayer, the remote (your phone most likely) provide a link to the media and access token to say “Chromecast, show this media”. Chromecast takes over and shows the media direct from the source, you can turn of or throw away the phone and Chromecast continues to display the media. Note: As long as you don’t provide the media on your phone.

Spotify Webplayer

I have managed to get Spotify to play on Chromecast even though it is not the perfect way or easy to change tracks. You also need your computer on, and Chrome browser running in the background.

Chrome has a extension to show you the content in your Browser to the Chromecast. This can make Spotify webplayer to cast the music to Chromecast, all good and easy, but the interface and look on the TV is not that beautiful and I would rather have the nice and good looking backgrounds that Chromecast show when idle.

This Javascript makes you show a nice picture in the browser window (on top of Spotify) and will even show the artist, track and cover art.

How To:

1: Play music with Spotify in the Chrome browser https://play.spotify.com/

2: Cast the tab to Chromecast using Chrome Cast extension

SpotifyBookmark 

3: Make a bookmark, just any bookmark in Chrome and Edit it with the code below

spotifyLinkJavascript 

Replace the Webadress part with this Javascript:

javascript:(function (){var w=window.innerWidth;var h=window.innerHeight;var scale=Math.max(w/1280,h/720);var e=document.createElement("div");var p=document.createElement("div");p.id="cc_nowplaying";var id=document.getElementById('app-player').contentDocument;var tn=document.createElement('h1');var an=document.createElement('h2');var c=document.createElement('div');c.style.width='200px';c.style.height='200px';c.style.position='absolute';c.style.backgroundSize='cover';c.style.left=0;c.style.top=0;p.appendChild(c);p.appendChild(tn);p.appendChild(an);e.appendChild(p);p.style.position="fixed";p.style.left='100px';p.style.bottom='100px';p.style.paddingLeft='220px';p.style.border="0";p.style.color='#FFF';p.style.zIndex="9999999999";e.style.border="0";e.style.position="fixed";e.style.top="0";e.style.left="0";e.style.width="100%";e.style.height="100%";e.style.zIndex="999999999";var i=document.createElement("iframe");i.src="https://clients3.google.com/cast/chromecast/home/v/c9541b08";i.frameBorder=0;e.style.border="0";i.style.width="1280px";i.style.height="720px";i.style.pointerEvents="none";i.style.webkitTransform="scale("+scale+")";i.style.webkitTransformOrigin="top left";e.style.overflow="hidden";e.addEventListener("click",function (n){n.preventDefault();this.parentNode.removeChild(this)},false);document.body.appendChild(e);e.appendChild(i);var set_p=setInterval(function(){if(document.getElementById('cc_nowplaying')===null){clearInterval(set_p);};tn.innerHTML=id.getElementById('track-name').innerText;an.innerHTML=id.getElementById('track-artist').innerText;c.style.backgroundImage=id.getElementsByClassName('sp-image-img')[0].style.backgroundImage;},3000);})();
yes it’s long.

And the result is something like

spotify cast

Image is from Chromecast and courtesy goes to Joe Azure

I found this hack on Reddit

0 Comments

I managed to get into some easy to solve “problems”. Not really problems but this is how I got MiniBlog to work.

1: Get the source from GitHub at https://github.com/madskristensen/MiniBlog Either fork the blog, copy it locally or if you are new to GitHub - Download the ZIP

2: Open your solution (.sln) with Visual Studio, check the source and get used to it. Edit the Web.config and specially your blogs settings within <appSettngs /> and inside <credentials><user /> to set a new password hash.

3: Test the site locally, change the style if you want. (not really needed, simple is the best!)

4: Install Windows Live Writer (WLW) and start it.

Choose ‘Other blog service’

Adress can be localhost:XXXX if you want to try it locally first. Username and Password to whatever you put in the <user /> part in Web.config

The specific and important part is to choose ‘Metaweblog API’, Enter your localhost adress on <hostname> and /metaweblog instead of <mw-script>

WLWaccountSettings

5: Publish it to a host provider. I like Azure and this can be done with Visual Studio or WebMatrix with ease. Setup a Azure account, create a new Website and connect and use Publish Web Site.

This blog don’t use a database (stored in XML format)

It should not be that hard honestly. If you chose this blogging engine I suspect you have published  to a webhost before.

0 Comments
  • Posted in:
  • new

So this is the first post, never underestimate the power of this post, I follow the mantra “Just do it”. So this is suppose to trigger me to post more. But I don’t know if it will happen! Lets see if more posts are coming! I am using the simple and easy to use MiniBlog

Ok, So I’m testing from Windows Live Writer (WLW) that this blog is “made for”. Mads Kristensen is the person behind this blog and he suggests that WLW is the way to go. I think I will agree with him on that.

Cheers! / Kenneth