Status of This Memo

This document specifies an Internet standards track protocol for the Internet community, and requests discussion and suggestions for improvements. Please refer to the current edition of the "Internet Official Protocol Standards" (STD 1) for the standardization state and status of this protocol. Distribution of this memo is unlimited.

Abstract

This document describes the context, syntax, and gizmonics of the Logotheminator, a standard for playing a website theme song that will enable users to totally rage their faces off.

1. Introduction

The year: 1863. The place: deep in the Kentucky woods. Union Army deserter Caleb Rutledge, seeking a hiding place for a cache of gold stolen from a Confederate supply train, stumbles upon a rough stone cabin. Here, blind old Ezekiel Nair and his granddaughter Rachel live as the Nairs always have, trapping pheasant and rabbit for their food. Rachel, though afraid, is drawn to the stranger, to reach out to him, cradle him, tend to his wounds, to make him stronger and seek the refuge of his strength in turn.

150 years later, Caleb and Rachel's great-great-grandsons Matt and Dave think it would be cool if websites all had theme songs.

2. Rise Of The Logotheminator

How it works is, like, you're on a computer, right? And you go to a website. And while you're on that website's homepage, you click the logo up at the top. Or wherever. It's usually at the top but some of these punks these days think you can just put shit wherever on a website like it's an issue of Raygun magazine or something. Eh, they'll learn.

Anyway, what happens is, you click on the logo and the website theme song starts playing. "Wait, theme song?" you ask. That's right. Under the Logotheminator regime, every website worth a damn will commission an original theme song in the tradition of every TV show where you can remember the song better than the show. Or they could license an existing song, but that's kind of the lame way to do it.

Then, while the song is playing, the logo could kind of vibrate and dance around to the music. That would just be the best.

Clicking on the logo from any other page in the site would simply take you back to the home page, like things are now. We're not totally trying to wreck everything here.

2a. The Name "Logotheminator"

More tech stuff should have names that end in "-inator".

3. Code Or Whatever

Here's where we insert a bunch of nonverbal gobbledygook so we look like we know what we're talking about.

First, you’ll want to put your theme song audio on the page. Since it’s 2014 you might as well use HTML5 audio and MP3s. You SHOULD set the tag’s preload element to none, unless you’re a greedy bastard that wants to waste a bunch of bandwidth, increase energy costs, and cause a global warming crisis the likes of which Al Gore couldn’t even imagine. Like so:

<audio id="theme-song" preload="none">
    <source src="https://d3306cnzm6n89c.cloudfront.net/audio/meh-they-could-try-harder-6c706c71f275940fecc84b0ee68b36cc.mp3" type="audio/mpeg" />
</audio>

You SHOULD use whatever tricks you can to get your MP3 file size to something under 1MB. You don’t want your badass track to sound like total garbage, but try reducing the bitrate to 96kbps or using a VBR range between 100kbps - 150kbps. Do you really need stereo for a website theme song? Probably not, try mono instead. Oh, and remove the metadata. Especially the album art. Nobody’s gonna add this shit to their iTunes library.

Once your home page loads, you MUST detect if the browser supports HTML5 and can play MP3s. If so, you MUST provide an indication that you’ve just changed the logo from a link to an audio player by changing the cursor to something that looks like a play button. There’s not a lot of choices here (http://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor) so we went with “e-resize”.

$(document).ready(function() {
    var themeSong = $('#theme-song')[0];

    if (!!(themeSong && themeSong.canPlayType && themeSong.canPlayType('audio/mpeg;').replace(/no/, '’)) {
        $('#header .logo').css('cursor', 'e-resize');
    }
});

On click of the logo, you MUST begin playing the theme song. On the next click of the logo, you MUST pause the theme song. Obviously, if the browser doesn’t support HTML5 audio or MP3s then you should just do nothing and let the browser refresh the page or whatever.

$('#header .logo').on('click', function() {
    var $this = $(this);
    var themeSong = $('#theme-song')[0];

    if (!!(themeSong && themeSong.canPlayType && themeSong.canPlayType('audio/mpeg;').replace(/no/, ''))) {
        if (!themeSong.paused) {
            themeSong.pause();
        } else {
            themeSong.play();
        }

        return false;
    }
});

Like we said, we’re not totally trying to wreck everything here. If someone wants to really, really use your stupid logo on the home page to refresh the page, let 'em double-click.

$('#header .logo').on('dblclick', function() {
    location.href = $(this).attr('href');
});

While the audio is playing you MUST give the user an indication by changing the cursor to a “progress” cursor. You MAY want to shake the logo a little bit to indicate that it’s really enjoying this track. We’d suggest the CSShake library (http://elrumordelaluz.github.io/csshake/).

$('#theme-song').on('playing', function() {
    $('#header .logo').css('cursor', 'progress').addClass('shake shake-constant shake-little');
});

When the song is paused, set the cursor back (and stop the shaking logo if you were crazy enough to do that part).

$('#theme-song').on('pause', function() {
    $('#header .logo').css('cursor', 'e-resize').removeClass('shake shake-constant');
});

And finally, when the track has ended you MUST reset everything so that the theme song can be played again.

$('#theme-song').on('ended', function() {
   this.pause();
   this.currentTime = 0;
});

You're Logotheminating and it feels so right!

4. Acknowledgements

This work would not be possible without those fantastic TV theme songs of the past. You know, like those ones that told a little story about what was happening on the show, so you wouldn't be lost if this was your first time seeing "Brady Bunch" or "The Fresh Prince of Bel-Air" or "Mystery Science Theater 3000" or "Welcome Back, Kotter"? We also like the more abstract lyrics that set the philosophical basis for the show, like "The Facts of Life" or "Family Ties" or "Full House". And don't forget the classic instrumental themes like "Taxi" and "Barney Miller" and "The Munsters". Maybe if websites had kick-ass theme songs, websites would be better. That's really all we're saying.