I have following javascript. There are 2 constant elements by ID - title and artist. I want to appear those in browser tab, so i think with document.title. row 51. If you wonder what for - I need this to grab that metadata from the browser tab (artist and title) from a broadcast software on another PC. It's only in localhost. That's the only way. The metadata appears on index.html but i can't grab this from there, i can only grab this from browser tab. It's so specified by this application i got.
Very thankful for your help in advance.
Javascript:
/**
* OBS Overlay
*/
const SERVER = `ws://${location.hostname}:9090`;
/**
* Formats the track name.
* @param {TrackInfo} track
*/
const formatTitle = (track) => {
if (!track.title) return '';
return track.title.toUpperCase();
};
/**
* Formats the track artist.
* @param {TrackInfo} track
*/
const formatArtist = (track) => {
if (!track.artist) return '';
return track.artist.toUpperCase();
};
const updateTrack = (track) => {
const title = formatTitle(track);
const artist = formatArtist(track);
const titleEl = document.querySelector('#title');
const artistEl = document.querySelector('#artist');
const overlay = document.querySelectorAll('.fade');
if (titleEl.innerHTML === title && artistEl.innerHTML === artist)
return;
// Fade out the old track title.
overlay.forEach((el) => {
el.style.opacity = 0;
});
// Fade in the new track.
setTimeout(() => {
titleEl.innerHTML = title;
artistEl.innerHTML = artist;
overlay.forEach((el) => {
el.style.opacity = 1;
});
}, 1000);
};
// Set title of document
document.title = 'test';
// WebSocket connection to Triode Twitch DJ.
const ws = new WebSocket(SERVER);
// Send heartbeat to Now Playing every 5 seconds.
setInterval(() => {
const state = ws.readyState;
if (state === 1) ws.send(JSON.stringify({ event: 'ping' }));
}, 5000);
/**
* Take in an IPC message from the main process and update the DOM.
*
* @param {IpcEvent} event IPC message from the main process
*/
ws.onmessage = (event) => {
const data = JSON.parse(event.data);
updateTrack({
title: data.title,
artist: data.artist,
});
};
index.html:
<html>
<head>
<link rel="stylesheet" href="default.css">
</head>
<body>
<div>NOW PLAYING:</div>
<div>
<span id="title" class="fade">NO TRACK LOADED</span> - <span id="artist" class="fade">NO ARTIST LOADED</span>
</div>
<script src="default.js"></script>
</body>
</html>