Twitter, talk to me

Did you know browsers have text-to-speech APIs?

Twitter user pages automatically poll for new tweets from the user, but when new tweets show up, the only notification you get is (N) added to the title of the webpage. If you have many tabs or browser windows or 5 monitors attached to your laptop, it’s not easy to see when new tweets show up.

With a little help from browser APIs, you can get more noticable notifications.

Just paste the JavaScript below into an inspector window for any twitter user or search page. You’ll get a quick voice notification when the page detects new tweets. The speak-on-new-tweet action remains until you reload or close your monitored tab(s).

Tested in recent Chrome and Safari as of October 2015:

/* Extract username or search query from URL */
var urlEndpoint = $("link[rel=canonical]").attr("href").split("/")[3];

/* If this is a search URL, make the page name speakable. */
var name = urlEndpoint.replace("?q=", " ");

function speak(words) {
    var msg = new SpeechSynthesisUtterance(words);
    window.speechSynthesis.speak(msg);
}

$("div.js-new-items-bar-container").on("DOMSubtreeModified", function() {
    /* Clicking the update notice clears the new items bar, but we
     * don't want removal of content to trigger another voice response. */
    if ($(this).is(":empty")) {
        return;
    }
    speak(name + " TWEET!");
});

Anybody want to turn it into a real extension?