This is a partial answer. I assume you already know how to build a Web
server on you ESP32, and how to react to client requests. If not, there
are tutorials available on the Internet. Here I will specifically
discuss the issue of the hyperlink.
You wrote:
<a href="trigger">Click Here To Trigger The Rick Roll!/a>
Not only the closing tag is incorrect (it should be </a>), but such a
link is likely not what you want. The semantics of an hyperlink is “go
fetch that resource and display it here, replacing the current page”.
Unless you do have a displayable resource (Web page, image...) on your
server actually named “trigger”, you do not want an hyperlink. You want
a clickable item that may look like an hyperlink and, when clicked,
triggers a request to the server, but without replacing the current
page.
So I would start by replacing the link by a generic container:
<div id="trigger">Click Here To Trigger The Rick Roll!</div>
Then, style it like a link. I don't quite like the underlining, but you
can add it if you wish:
#trigger {
color: blue;
cursor: pointer;
}
Then, within a <script> tag, add the desired behavior:
window.onload = () => {
document.getElementById("trigger").onclick = () => {
fetch("trigger", { method: "POST" });
};
};
When the user clicks on the element, the client will send a “POST”
request to the server for the “trigger” resource, and the server can
react to this by playing the song. You could use a “GET” request
instead, but that would violate the semantics of “GET”, which is to
retrieve a resource from the server, without affecting its state.
