1

I would like to use my ESP32D to create a wireless access point and host an html page that has a hyperlink and a few other things on it that triggers an arduino song (rickroll), and plays it through a buzzer.

I just need to know how to host the webserver and make the trigger hyperlink work, right now the html is set to send "trigger" whenever the link is pressed.

html file https://pastebin.com/sGmPPVYG

(Arduino-song)https://github.com/robsoncouto/arduino-songs/blob/master/nevergonnagiveyouup/nevergonnagiveyouup.ino

4
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.