NameDrop

<p align="center" style="font-size:.9em; color:grey ;">
Hear my name <a  href="https://namedrop.io/{{namedrop username}}"><img ></a></em>
</p>

Note: {{namedrop username}} needs to be updated

<script >
    window.onload = (e) => {
        const audioURL = "https://data.namedrop.io/audio";
        // get select all hrefs
        const ArrayOfHrefs = document.querySelectorAll("a");
        const convertHrefToArray = Array.from(ArrayOfHrefs);
        // maps over the hrefs
        convertHrefToArray.map((href) => {
            // using this to varify if the origin of the url is namedrop.io
            const url = new URL(href.href);
            const pathnames = ["/", "/stories", "/offerings", "/dashboard", "/login", "/signup"];
            // only add play button if origin is namedrop.io
            if (url.origin === "https://namedrop.io" && !pathnames.includes(url.pathname)) {
                const audio = new Audio();
                let isPlaying = false;
                const parentElement = href;
                const parentHeight = parentElement.offsetHeight;
                // get namedrop username
                const nameDropUserName = url.pathname.substring(1);
                // setting audio source
                audio.src = `${audioURL}/${nameDropUserName}.mp3`;
                // creating span element
                // creating image element
                const imageElement = document.createElement("img");
                // setting image source and width
                imageElement.src = "./images/play-btn.png"; // replace this image with a hosted image link
                imageElement.style.maxWidth = "100%";
                imageElement.style.transform = "translateY(5px)";
                imageElement.style.display = "inline-block";
                imageElement.height = parentHeight;
                imageElement.style.margin = "0px 5px";
                // appending span element into parent element
                parentElement.appendChild(imageElement);
                href.addEventListener("click", (e) => {
                    // disables redirect if user clicks on play icon
                    if (e.target.tagName === "IMG") {
                        e.preventDefault();
                        // toggling the variable
                        isPlaying = !isPlaying;
                        if (isPlaying) {
                            // plays audio
                            audio.play().then(() => "playing");
                            imageElement.src = "./images/pause-btn.png";
                        } else {
                            isPlaying = false;
                            imageElement.src = "./images/play-btn.png";
                            audio.pause();
                        }
                    }
                });
                audio.onended = () => {
                    isPlaying = false;
                    imageElement.src = "./images/play-btn.png";
                };
            }
        });
    }; 
</script>