Jump to content
Dr. Woo

Spotify Web Player: Control via keyboard shortcuts via Alfred?

Recommended Posts

There are several workflows for controlling the Spotify App, but is there a way to control the Spotify Web Player (in Chrome) via Keyboard shortcuts via Alfred? If not with Alfred, any other suggestions?

 

  • Checked some Chrome extensions, but those e.g. don't let you use the Mac’s function keys.
  • http://beardedspice.github.io/ seemed to be an option, but somehow doesn't work in Catalina (no updates in 3 years).

Share this post


Link to post
5 hours ago, Dr. Woo said:

but is there a way to control the Spotify Web Player (in Chrome) via Keyboard shortcuts via Alfred?

 

There you go. I haven’t tested it on Catalina (I’m not on it), but it should work provided you gave Alfred the appropriate permissions. You may also need to activate (in Chrome) View → Developer → Allow JavaScript from Apple Events.


Keep in mind that due to a limitation in AppleScript, shortcuts may not work if you have more than one instance of Chrome open (i.e. if you have two Chrome icons in your Dock).

Share this post


Link to post
23 hours ago, vitor said:

 

There you go. I haven’t tested it on Catalina (I’m not on it), but it should work provided you gave Alfred the appropriate permissions. You may also need to activate (in Chrome) View → Developer → Allow JavaScript from Apple Events.

 

Thank you. It works ... but only if Chrome is in front and the Spotify Web Player the front-most tab/window. Kind of pointless. I need it to work work globally, no matter where the Web Play tab currently sits. Possible?

Share this post


Link to post
21 minutes ago, Dr. Woo said:

Kind of pointless.

 

I wouldn't say that. Vítor has done 99% of the work for you. Why don't you try to figure out the rest for yourself?

Share this post


Link to post
2 hours ago, Dr. Woo said:

I need it to work work globally, no matter where the Web Play tab currently sits.

 

That’s already how it works. However, in addition to requiring only one Chrome instance it also required there were only one window (or to be more accurate, the window ordering mattered). Download from the same URL, as that version now works on all windows (though the multiple instances limitation remains, there’s nothing we can do about it).

Share this post


Link to post

Excellent! Works as expected. No worries about having two Web Player instances open at once. Despite browsing with dozens of tabs open in parallel, it happens seldom.

 

Thank you very much.

Share this post


Link to post

Uhm... Sorry to bother again: Play/Pause works, but all the other commands for some reason not.

Solved. Problem was the button titles in the HTML code are partially different on the german language Web Player: Next = Weiter. Previous = Zurück. Modified the Arguments in the Alfred workflow accordingly.

 

Hmmm... Problem with Previous. It’s "Zurück" in the HTML code but neither of the following works:

 

document.querySelector('button[title="Zurück"]').click()
document.querySelector('button[title="Zurück"]').click()

I assume the ü (lower case U umlaut) is causing the problem. How to format it?

Edited by Dr. Woo

Share this post


Link to post
7 hours ago, Dr. Woo said:

Any idea how to fix the Umlaut problem?

 

You’re on your own for that one. I’ve already made two throwaway Spotify accounts to make and improve the Workflow, and have no desire to make a third one to debug a localisation issue that may lie out of our ability to fix (e.g. bug in JXA). It’s not your fault you didn’t specify you use Spotify in a non-english language (how would you know that could be relevant?), but that’s also a tad more work than what I feel like dedicating on this endeavour.

Share this post


Link to post

A good friend and partner in crime has helped me with this. The problem is that – depending on the current page layout – there are multiple buttons titled „Weiter“/„Zurück“ on the page, which don't relate to playback control but for instance the page navigation. As the playback buttons have no ID assigned, we had to identify them through the class.

 

So instead of the argument

document.querySelector('button[title="Zurück"]') 

we are using

document.querySelectorAll('button[class="control-button spoticon-skip-back-16"]')[0].click()

Advantage is that this is a language independent approach, as the class names don't get translated.

Share this post


Link to post
1 minute ago, Dr. Woo said:

Advantage is that this is a language independent approach, as the class names don't get translated.

 

Disadvantage is that those are way more likely to change when they make updates to the page, as companies like to do.

 

1 minute ago, Dr. Woo said:

document.querySelectorAll('button[class="control-button spoticon-skip-back-16"]')[0].click()

 

 

If you’re going to use [0], there’s no reason to use querySelectorAll, use querySelector instead: document.querySelector('button[class="control-button spoticon-skip-back-16"]').click().

Share this post


Link to post
17 minutes ago, vitor said:

If you’re going to use [0], there’s no reason to use querySelectorAll, use querySelector instead: document.querySelector('button[class="control-button spoticon-skip-back-16"]').click().

Uhm, actually no. There are two or three instances (at least in case of 'Weiter' (Next)), and without the All it just does NOT work. Go try for yourself.

Edited by Dr. Woo

Share this post


Link to post
1 hour ago, Dr. Woo said:

There are two or three instances

 

And you’re only picking the first one ([0]), so there’s no need to use querySelectorAll. Documentation for querySelector:

 

Quote

The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.

 

(…)

 

If you need a list of all elements matching the specified selectors, you should use querySelectorAll() instead.

 

1 hour ago, Dr. Woo said:

and without the All it just does NOT work

 

I find that unlikely, as I’ve been using those methods for a long time and they’ve always worked like that. Did you remove the [0]?

 

1 hour ago, Dr. Woo said:

Go try for yourself.

 

No, thank you. I’ve already mentioned I’m not going to make another account. I was trying to improve your code.

Share this post


Link to post

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...