0

I have the title of my webpage set to be the current song playing in an audio player.

Most of the time the song name and artist are much longer than the maximum characters the tab can display.

I am currently displaying the title with:

        document.title = (data["track_name"] + " - " + data["artist_name"]);

How do I get the title to scroll to show the whole song name and artist?

Andrew Hendrie
  • 6,205
  • 4
  • 40
  • 71
heilstalin
  • 31
  • 7
  • See http://stackoverflow.com/questions/16354122/how-to-put-scrolling-text-in-title-tag – Ryan Griggs Mar 10 '15 at 01:44
  • Why is everyone in that linked-to thread (and its possible dup thread) using `setTimeout` and recursion? `setInterval` seems like the obvious choice, as it's meant for exactly this sort of thing, and it's simpler to `clearInterval` one interval later, than to keep starting another timeout and `clearTimeout`ing that – Josh from Qaribou Mar 10 '15 at 03:02

1 Answers1

2

You can use window.setInterval() to do this.

// Start an interval running every 500ms
window.setInterval(function() {
  // Take the first character, and make it the last character
  document.title = document.title.substring(1) + document.title[0];
}, 500);

You can add some extra spaces to the end of the title if you want it to wrap a bit longer. e.g. document.title += ' \xA0 \xA0 \xA0';';.

https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval

Josh from Qaribou
  • 6,776
  • 2
  • 23
  • 21
  • That's why I suggested putting `document.title += '_____ ';` before you set your interval - it'll put some space on the end of it so it doesn't just say 'ng NameSo', but instead 'ng Name_____So' (I used underscores here since SO comments don't like multiple spaces). – Josh from Qaribou Mar 11 '15 at 19:44
  • Not working for me. The title is looking like ArtistTheSongName-Artist, even with document.title += '_____ '; – heilstalin Mar 11 '15 at 19:57
  • When it first starts, it looks perfectly fine. But after the first scroll, its all 1 continuous word. – heilstalin Mar 11 '15 at 19:58
  • Ah - looks like some browsers won't even allow you to programmatically set the title with spaces at the end; parsers will trim the title when building the DOM so that there's no whitespace in a title, but it seems to be enforced at a pretty low level. I've updated the answer to include an nbsp on the end. – Josh from Qaribou Mar 11 '15 at 20:17