Resources by Ian/Iana Spencer

The Wavespace Plaza

A vaporwave white noise machine, basically. I made it bc i wanted a something akin to the Nightwave Plaza, but with selectable curated looping songs instead of a 24/7 radio station. Music itself is sourced from Archive, backgrounds are from a handful of CG artists (and one editor-of-old-anime who was rly good at getting the clips to loop) who uploaded their stuff on Giphy to be used for this sort fo thing (if you're willing to roll you're eyes a lot at the AI slop that pops in the search every so often, Giphy has some great vaporwave visuals and there's a couple of CG artists in particular who have shared a lot of vibey trippy gifs on there)

CODE:

<iframe src="https://wavespaceplaza.neocities.org/" width="100%" height="500"></iframe>

Customizable One-Song Music Player

This is a modified version my sites music player, with the BGM pause functionality taken out so it can work on anyone's site

Installation is a bit more complicated

Step 1: add this markup to your CSS:

.music_player {

background-image: url("https://images.unsplash.com/photo-1634648852208-fc7e55a15751?q=80&w=741&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");

background-size: 100% 95px;

background-position: center;

background-repeat: no-repeat;

color: white;

}

#musicbutton {

background-image: url("https://ekkochambers.neocities.org/button.png");

color: white;

font-family: monospace;

font-size: 16px;

cursor: url("https://ekkochambers.neocities.org/cursorclick.png"), auto;

font-weight: bold;

}

You only need to add the CSS once per page or stylesheet, ofc

Step 2: add this code for the player itself:

<div class="music_player"> <img src="(ALBUM COVER URL)" width="85px" height="85px">

<audio id="music-(SONGID)"><source src="(SONG_URL)"> </audio>

<button id="musicbutton" onclick="document.getElementById('music-(SONGID)').play()"> <img src="https://ekkochambers.neocities.org/play.png" width="50px" height="10px"></button>

<button id="musicbutton" onclick="document.getElementById('music-(SONGID)').pause()"><img src="https://ekkochambers.neocities.org/stop.png" width="50px" height="10px"></button>

(songname)

<a href="(SONG_URL)">[DOWNLOAD]</a>

</div>

Now, step three comes is a few parts:

Replace every instance of "(SONG_URL)" with the link to the music file (if you don't want to have the download option, just delete that line of HTML)

Replace every instance of "(SONGID)" with any word, the computer will know use this to find the song (NOTE: if you have multiple instances of this widget, each songid needs to be unique, but you can name it anything you want)

Replace "(ALBUM COVER URL)" with the link to the album cover

Computer stuff is all done now, just replace "(songname)" the the name of you're song. This part will be read by a human