Capturing Currently Playing Track

[HumbleThinker]

Just a small exercise for myself, but thinking 100% of my problem is me forgetting how JS works (it's been a while) and not knowing too much about HTML5. Anyways, I'm writing a short script to spit out the song and artist to a file when the song playing changes. I'm sure there's already something like that out there, but wanted to try it out for myself as an exercise. I think I've got the what from the API and the .js scripts, but the how is alluding me. The bare bones idea is:

Code: Select all

window.whenReady(() => {
	var plyr = document.querySelector("[data-id='player']");  // Grab the player element
	plyr.addEventListener('nowPlayingModified', displayTrack);  // Add a listener to the element for when the track changes
	
	function displayTrack() {  // Get the information on the currently playing track
		var track = app.player.getCurrentTrack();
		uitools.toastMessage.show(track."whatever the title property is", {
			disableUndo: true
		}); // Will be replaced with the export command later once I get this working
	}
});

My understanding is that
-app.player is the player object of class Player,
-the HTML element is labeled as data-id=player
-the event defined in the Player class that I want to listen for is nowPlayingModified
-Player.getCurrentTrack will get me the current track that is playing

Currently have the toast message just programmed to pop up as "Track Changed" to get the event listening down, but have not even got that working yet. So clearly I'm not listening to the event properly. Any thoughts?

[drakinite]

Good exercise! There are just 2 issues with your current code.

1) Under normal circumstances, your method of addEventListener would work. But in this specific case, player-related events are only fired to the native app.player object. The way to listen/unlisten to events on native objects is with the app.listen and app.unlisten methods. (We also use the same methods for all other events. I think there's some memory-related benefit to this, but I don't recall off the top of my head. Might be related to communicating between the main window & sub-windows.)
2) The nowPlayingModified event isn't what you're looking for. This event only fires when the now-playing list is modified, not the currently playing track. What you're looking for is playbackState. You'll just have to do some filtering depending on what caused the event (whether the track changed or you just played/paused)

[TIV73]

You don't actually need to go through the dom. The player object should be globally available in js, as are the methods to attach event listeners:

Code: Select all

function displayTrack(event) {
	if(event == 'trackChanged'){
		var track = app.player.getCurrentTrack();
		uitools.toastMessage.show(track.title, {
				disableUndo: true
		});
	};
}

app.listen(app.player,'playbackState', displayTrack);

I would probably use the trackChanged event instead of nowPlayingModified. I believe the latter refers to the now playing list, not the currently playing track, so it may not be reliable for what you are trying to do since just changing a track doesn't necessarily modify the now playing list.

edit:
Dangit, drakinite was faster. Well, at least I have a code example to make up for it

[drakinite]