Over a million developers have joined DZone.

Simple Trick - Adding a Play Indicator to the Browser Tab

· Java Zone

Microservices! They are everywhere, or at least, the term is. When should you use a microservice architecture? What factors should be considered when making that decision? Do the benefits outweigh the costs? Why is everyone so excited about them, anyway?  Brought to you in partnership with IBM.

I'm a Soundcloud user and a while ago I noticed they did something cool with their interface - a "Play" icon when you are playing music.

If you've ever been jamming out and needed to quickly mute your computer then this is a nice way to see which browser tab is making sound. In fact, the most recent Chrome now makes this built in:

In this case the native indicator is on the right. This is especially handy for cases where a site feels that their users are too stupid to know how to play video and use autoplay. (And let's be clear, if you use autoplay, you think your users are idiots. Either that or you are just a rude jerk who feels the need to .... ok sorry I'll stop my rant now. ;)

So I knew this was trivial code but I wanted to build my own little example of this - just for the heck of it.

<!DOCTYPE html>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>Some Page</title>
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width">
		<button id="playButton">Play</button>

		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
		$(document).ready(function() {
			var $button = $("#playButton");
			var playing = false;
			var origTitle = document.title;
			$button.on("click", function() {
				if(!playing) {
					playing = true;	
					document.title = '\u25B6 ' + origTitle;
				} else {
					playing = false;
					document.title = origTitle;

The example above consists of one DOM item - a button. On the page load event, I grab a jQuery-wrapped pointer to it and a copy of the current page title. Then all I need to do is listen for click events to handle playing (or pausing) the audio. To be clear, I didn't bother adding real audio here. To add the play indicator, you simply use the Unicode character for it and prepend it to the title. In case you're curious, I Googled for "unicode for play symbol" to find the right one.

If you are incredibly bored and want to see this in action, hit the demo link below.

Discover how the Watson team is further developing SDKs in Java, Node.js, Python, iOS, and Android to access these services and make programming easy. Brought to you in partnership with IBM.


Published at DZone with permission of Raymond Camden, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}