In Google Chrome there’s a button called “Control your music, videos and more” whenever there’s audio recently playing in one of the tabs. When that button is pressed, a pop-up menu would appear and there’s another button within the pop-up menu called “Play”.
In KM, I used the “Press a button” action. I clicked on the “button” popup menu beside the gear icon and selected Google Chrome to see what’s buttons are avaliable on the front window screen of Google Chrome. I do see the button for “Control your music, videos and more” but not the “Play“ button.
I tried to press on the “Control your music, videos and more” button so that the “Play” button should then become visible for KM to pick up. But as soon as I switch from Chrome to KM, the “Control your music, videos and more” pop-up menu disspeared in chrome, which is probably the reason why KM did not detect a button called “Play”. What should I do so KM could detect the “Play“ button?
Also, for some websites where there’s a lot of buttons and some button’s names are not immediately apparent because some of them don’t have names at all, in those cases, how could I find the name of a particular button in the button pop-up menu in KM more easily? (other than trial and error)
You could use any web browser to "view the source" of the HTML for that page, and learn to identify the HTML code for a button, and find it manually that way. That's probably how KM does what it does, and you can do it too.
You don't need to use Chrome to view the source. You could also use Safari. In Safari, there's a menu item under the Developer tab which lets you view the source. I presume Chrome has a similar feature somewhere.
HTML has a million ways to implement anything on the screen, so on any given web page you may have to learn a different "search string" that will represent the button you are looking for. So I think you would be better off just using KM's button list, unless you want to learn HTML. There is no magic/easy solution for this problem. It's all work, work, work.
Ok, I just learnt how to identify HTML code for any elements on a webpage. But it seems like it doesn’t let me select any buttons at the “top bar“ and therefore cannot identify the code.
That's because the source inspector lets you view the source of a web page, and the area you're looking at isn't part of the web page, it's part of the browser itself. The icons you see are either from the browser's own code, or from plug-ins you've installed; in either case, they're independent of the HTML code for the page you're looking at.
They may change based on what's on the page you're looking at, but that's not the page that's doing it, it's the plug-in reacting to things it found when the page loaded.
If all you're trying to do is click the music control button, why not try a click at found image action?
So the original question of this post is why isn’t there a “Play” button in the pop-up menu of the “Press a Button” action in KM (In Chrome, the “play” button can only be found after clicking on the “Control your music, videos and more” button at the top bar). But I know the “play” button does exist because I tried that with KM and it works!
But the real reason I ask this is because of another problem I am having.
On YouTube, I want to create a macro that click on the “Setting” button then select “Quality”. Apparently, “Quality“ is not a button therefore I cannot use the Press a Button action. (But Play button is a button and thats not showing up in the pop-up menu too! So maybe “quality” could be a button but maybe it has a different name than “Quality” so it didn’t work when I tested it out with the press a button action? i don’t know!!).
So to get around this, you would think I could just use arrow keys to select “Quality“ or use found image action. But both methods don’t work because:
Sometimes the number of items in the “setting” menu varies with different videos (5-7 items) → its not consistent → arrow keys won’t work
The background of the pop-up menu of “setting“ is somewhat translucent → found image action won’t work
Now because “Quality“ is always the last item and there’s a maximum of 7 items on the “setting” menu of any videos, I could just always repeat the arrow key 7 times then “enter” to select “quality“, that would work. But what if I want to select an item that is at the bottom of the list? That wouldn’t work then!
So, that’s why I want to know if “Quality“ is a button or not in KM, but as shown in the other example (“Play“ button), not all buttons are actually displayed by the pop-up menu of the “Press a Button“ action.
I'm not sure what the question is in your last post, but if you have determined that neither the KM Button action work, nor the "Show Page Source", then I guess you are limited to Find Image and Mouse/Keyboard actions.
You will have to test each button that KM sees, if the name isn't obvious. Or read the HTML source. I can't test it for you (at least not authoritatively) because many websites provide different HTML to different browsers.
Which is a completely different problem -- one is "a button in the app's GUI" and the other is "a button on a web page".
The "cleanest" way to interact with a web page is JavaScript (shame you're learning Python ) -- have you tried googling "How to set quality of a Youtube video using JavaScript"?
I don't know much JS, and this certainly isn't in the modern style, but it'll pop the "Quality" menu for you (which is a start):
let ytplayer = document.querySelector('video');
let settingsButton = document.querySelector('.ytp-settings-button');
settingsButton.click();
let qualityMenu = document.querySelector('.ytp-panel-menu').lastElementChild;
qualityMenu.click();
You might be able to do the rest with KM arrow or image detection actions, if you can' find the right JS incantations.
Oh my, Javascript is seducing me right now, especially having just witnessed how quickly and easily it solved my problem! I do want to automate a lot of the browser stuff! ummm…looks like I have to do some more research and decide which one to learn first!
While Python gets lots of votes (mainly coz of its use in the current AI hotness) and is (IMO) a better general language, JS is better for interacting with (and writing interactive) web pages plus its popularity has seen its use in many app's own internal scripting systems (eg Omnifocus, Obsidian, and of course the JXA version of AppleScript).
Both can cross over to the territory of the other. More importantly, either will help teach you to think like a programmer -- and once you understand the constructs of programming the specifics in a particular language are only a web search away (usually...).
JavaScript is still the more common and (IMO) the more useful for the general scripter/automator who wants to interact with desktop apps and browser pages rather than develop their own program that hits web APIs etc. So, despite contradicting the advise of people much smarter than me, that's what I'd recommend.
And one day I'll actually take my own advice and learn some JS myself!
Man I like your sales pitch! Especially the part where you said JavaScript is more useful for general scripting for browsers and apps, which is mostly what I wanted to do!
Thank you for the insights and comparisons! I think I will switch to JavaScript now loll .
But either way, I intend to learn more than one programming language anyway, and Python is definitely on my list!
) -- have you tried googling "How to set quality of a Youtube video using JavaScript"?
.