Simple Trick - Adding a Play Indicator to the Browser Tab

This post is more than 2 years old.

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=""></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.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA

Archived Comments

Comment 1 by Scott Pinkston posted on 2/4/2014 at 8:49 PM

hum, guess you could use the same thing to add a different character such as an exclamation mark or warning icon. Thinking of a session about to time out. You could animate it by adding/removing the icon.

Comment 2 by Raymond Camden posted on 2/4/2014 at 8:54 PM

Scott, dude! Haven't heard from you in forever. :)

But yeah - and actually - I think the session timeout warning indictor is *fascinating* - that is a great use case.

Comment 3 by Will Swain posted on 2/4/2014 at 8:58 PM

Could you use font awesome icons up there I wonder? I'll give it a try and see. Can see some nice uses for this.

Comment 4 by Will Swain posted on 2/4/2014 at 9:04 PM

Nope of course you can't can't add HTML to the document title....


Comment 5 by Matt Gifford posted on 2/5/2014 at 9:20 PM

Very nice! Sadly Firefox messes around with the play character and outputs something that looks like a distorted flag. Great concept, though.

Comment 6 by Raymond Camden posted on 2/5/2014 at 9:29 PM

Latest Firefox? I didn't see that. Screen shot?

Comment 7 by Octavian Iosif posted on 1/25/2018 at 2:29 PM

Heres a simpler version that doesn't require an extra variable:
To set the play icon:

document.title = '\u25B6 ' + document.title;

To remove it (just replace it with nothing):

document.title = document.title.replace('\u25B6 ','');

Comment 8 (In reply to #7) by Raymond Camden posted on 1/25/2018 at 2:40 PM

Good mod there!