Both old and newer pixel pieces I've made from scratch! Def would like to add lots overtime here, but feel free to use these assets in decorating your own pages! Links back and/or credit though would be appreciated.

It should also without saying, but do not trace or claim any assets here as your own, redistribute and use in any commercial projects, or use custom assets I've made but AREN’T on this page- for your own site.

If you think to, leave a message in my guestbook if you use them!

Single-Song Music Player

I genuinely feel proud of figuring out how to get this to work! You can see this player in action on any of my other pages with music featured. It's set up to:

Let you plug in ANY custom visuals you want for the interface

Show what track is playing

Auto play at a low volume

Play/pause at anytime

Stay fixed in the corner of the screen for easy access

Feel free to edit and customize the template graphics below. Do NOT use the graphics I've made for myself on other site pages!

I'm still very new to coding, so if elements are misaligned or if you want to use your own larger graphics, you'll need to adjust the 'bottom/left px' numbers in the CSS for the full player, or in the HTML for individual elements. I admittedly just eyeball it haha.

Music Player BGs

Play/Pause Buttons

HTML (Place within your body tag)

Note: I use Brackets for coding, which seems to mess with the plain text preview on HTML specifically. To fix this I deleted the > at the end of my top label so it forced live preview off. So for the code to work just add the > back at the end of the 'Music Player' label. I'll try to find a workaround in the future haha!

<!-- Music Player. Add > to the end or delete this line of code for it to work !--

<audio id="myAudio" loop autoplay volume="0.1">    
  <source src="SONG MP3 LINK HERE">    
</audio>
 
<script>
  var audio = document.getElementById("myAudio");
  audio.volume = 0.2;
</script>
                
<div class="mAdjust">               
                
<div style="position: absolute; bottom: 0px; left: 6px;"><img src="MUSIC PLAYER BG IMAGE HERE"></div>              
 
 <div class="bhover" style="position: absolute; bottom: 6px; left: 22px;"><button class="controls" onclick="document.getElementById('myAudio').play()"><img src="PLAY BUTTON IMAGE HERE" title="Play!"></button></div> 
    
<div class="bhover" style="position: absolute; bottom: 6px; left: 38px;"> 
  <button class="controls" onclick="document.getElementById('myAudio').pause()"><img src="PAUSE BUTTON IMAGE HERE" title="Pause!"></button></div>

CSS (Place within your style tag)

/*Music Player CSS*/

/* play and pause buttons */
            .controls {
                border: none;
                background: none;
                cursor: pointer;
                margin: 0;
                padding: 0;
            }  
  
/*hover effect when mousing over buttons*/            
            .bhover 
            img:hover{
    -webkit-transform: translateY(-1px);
     transform: translateY(-1px);  
            }
            
/*control where the whole music player sits on screen, leave values 0 to keep at bottom left*/            
            .mAdjust
            {
                position:fixed;
                bottom: 0px;
                left: 0px;
            }
                        
 /*changes the font*/  
                        
            .p1 {
                font-family:  verdana, sans-serif;
                font-size: 0.6em;
                color: #ffffff;        
            }  
            
 /*THIS SECTION IS OPTIONAL. If you want to use your own font, upload the font file to your website, and pop the file name and url in the space below respectively. Then in the font family section above, add the file name to the list separated by a comma, next to verdana*/
                        
            @font-face {
                font-family: "FONT FILE NAME HERE";
                src: url('FONT URL HERE') format("opentype");
            }            
            
            /*Music Player CSS end*/

Here's also a few helpful stackoverflow links, that eventually led to helping me make the current version of this code!

Is it possible to style the html5 audiotag

How to remove the bg from a button

Item64's Neocities (helped me figure out an older idea of the code via image overlays and using the clickthrough tag)

Doll Bases

Always wanted to make custom bases of my own for yeARs. Hoping to add more variations overtime. Please don't remove the watermark and be sure to credit where the base is from- but I'd love to see how it's decorated if you use one!