bowie-loves-chromecast-screensaver

Screensaver for using Spotify with Chromecast

I was quite delighted when I found out my cable company (Rogers) gave me 2 years of Spotify for free. I can Chromecast from Chrome on my Chromebook…connects to the TV and stereo system, brilliant.

However it was a slight annoyance that with the chromecasting, the TV was displaying the quite busy, and largely static, spotify web page. I don’t think my TV is subject to screen burn, but it is still disconcerting and not good for the ambiance.

So, a little search revealed this post on Reddit about Tab casting screensaver for audio streaming…Very helpful. Several individuals have created little bits of javascript code to activate with a bookmarklet that makes a screensaver for your tab. By the way there are some codes there that you could use for any chromecast screensaver, not just for Spotify.

I had no idea you could do this with bookmarks, by the way. You create a bookmark (any random page will do, this one for example) but then you edit the bookmark and paste the code where the URL usually goes. Of course, you’ll probably want to change the name of the link as well, perhaps to Spotify Screensaver or something like that, and maybe move the bookmark into your bookmarks bar at the top of your browser window for easy access.

I tried a couple of the screensaver scripts posted on Reddit but my favorite was axpd’s, which makes a screensaver of the normal Chromecast photos, with the currently playing album cover image, song and artist overlaid in the bottom left.

This was great, however with my tendency to listen to hours of Beck and Nirvana, it was displaying the same album cover (and artist name) for hours on end. Again, a screen burn concern.

So, I’m not that adept at js but I managed to make the album cover and words 50% transparent, so that the photos (which change regularly) will show through and cause the current album, and artist display to not be totally static.

Here is how the screen saver looks on my TV:

spotify_screensaver_chromecast

Instructions:

  1. Create bookmark
  2. Edit bookmark, rename to something like “Spotify Screensaver” and replace the URL (http://whateveritis.com) with this code:
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('h1');var c=document.createElement('div');c.style.width='200px';c.style.height='200px';c.style.position='absolute';c.style.opacity='0.5';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.opacity='0.5';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;},1000);})();
  1. Get your favorite Spotify song playing and chromecasting
  2. Press your new bookmarklet
  3. Make your browser fullscreen to optimize TV screen display.  Click on the screensaver to make it disappear when you want to see your spotify screen again.
  4. Enjoy copious amounts of music in your life! 😉