Playable Music Button

[willyonilly]

Hello! I finally got a music button working and wanted to share the code!!! I have this in a container on top of an image, so if you want it separate, you might have to tinker with it some.
 
You'll add this inside your STYLE tag:

        .music-button {
            position: absolute;
            top: 50px;       /* Adjust this number to move the button up or down! */
            left: 50px;      /* Adjust this number to move the button left or right! */
            background: none;
            border: none;
            cursor: pointer;
            z-index: 10;     /* Ensures the button stays on top of the image! */

In your BODY tag above the container, you'll add this. It's your script to make the music play:
 
    <audio id="myMusic" src="MUSIC.MP3"></audio>

    <script>
        function toggleMusic() {
            var audio = document.getElementById("myMusic");
            var img = document.getElementById("buttonImage");
            if (audio.paused) {
                audio.play();
                img.src = "YOUR_PAUSE_BUTTON.PNG";
            } else {
                audio.pause();
                img.src = "YOUR_PLAY_BUTTON.PNG";
            }
        }
    </script>

Beneath this, add your container! Beneath the container code, you'll add this:

            <button onclick="toggleMusic()" class="music-button">
                <img id="buttonImage" src="YOUR_MUSIC_BUTTON.PNG" alt="Play Music" width="100">
            </button>

All in all, it should look like this! This image, of course, contains my own chosen song + the assets I created!

[MrsMoe]

What exactly should it look like on your webpage once it's implemented?

[Rubbereon]

Nice, but have you tried scmplayer or wikplayer before before making a custom widget? 

Also bear in mind that music just cannot play automatically, you could maybe before 2020, but now it's required for the user to click on the webpage first before the music would play.

[willyonilly]

What exactly should it look like on your webpage once it's implemented?

Mine looks like this:
The big red button is the music player. If tinkered around with, you could probably get it to sit somewhere else - the code I shared is to specifically get it to sit atop another image, but I could try to conjure up some code to have it separate!!!

[willyonilly]

Nice, but have you tried scmplayer or wikplayer before before making a custom widget? 

Also bear in mind that music just cannot play automatically, you could maybe before 2020, but now it's required for the user to click on the webpage first before the music would play.

I haven't! I usually end up doing things the hard way, LOL. I like to make things difficult for myself. I also am slightly obsessed with everything on my site being Klingon-themed. If I can't customize it to the utmost degree, I just make my own!
Don't worry - I made it that way on purpose! I, myself, always get a little irritated when I have to manually mute an entire site because I don't want to listen to the music that's playing. I prefer to have it be manual to play it!

[MrsMoe]

Mine looks like this:
The big red button is the music player. If tinkered around with, you could probably get it to sit somewhere else - the code I shared is to specifically get it to sit atop another image, but I could try to conjure up some code to have it separate!!!

Cool! I technically already have a music player on my site, but it's regulate to a single page. It'll be cool to have one that follows the user around the site.