Adding Animated Wallpapers to my Personal Website / Desktop Environment
Tags: javascript, programming, showdev, webdev
Published: 2022-06-11 16:39:45

For several years now I've been building my [Desktop environment in the browser (daedalOS)](https://github.com/DustinBrett/daedalOS) and have been using the [Vanta.js](https://www.vantajs.com/) animated wallpaper called [Waves](https://www.vantajs.com/?effect=waves). Last month I added my 2nd animated wallpaper called [Hexells](https://znah.net/hexells/).

Then last week I was checking out the website [Shadertoy](https://www.shadertoy.com/) when I came across [Coastal Landscape](https://www.shadertoy.com/view/fstyD4). I thought it looked quite nice and it reminded me of a Windows XP wallpaper mixed with Van Gogh. After some hacking around with their embedded player I was able to get it to run in an [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) using an [OffscreenCanvas](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas) which is also what I did for my other animated wallpapers. This keeps their animation work off of the [Main thread](https://developer.mozilla.org/en-US/docs/Glossary/Main_thread).

![Coastal Landscape on Shadertoy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v03u346nkpcxyt41ei19.png)

Also last week while inspired by animated wallpapers I decided I'd like to revisit some features I wanted to add to my Winamp player, powered by [Webamp](https://webamp.org/). Specially I wanted to add streaming support and then get Milkdrop working which is powered by [Butterchurn](https://butterchurnviz.com/). It is easy enough to add Butterchurn as there are already instructions on [their repository](https://github.com/captbaritone/webamp) on how to do that. But what I wanted was an even lazier version of this code that would only load Butterchurn and it's presets if Milkdrop was open and the music playing. To do this I needed to add some custom handlers/logic which Webamp mostly supported.

![Wallpaper Menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s3kg8vc6w65xl25ghqdz.png)

Once I got that working I wanted to add the ability for the "Desktop Mode" feature to work which would allow the music visualizer to become an animated wallpaper. To do this I just had to move the DOM element into my `<main>` container so that it would properly sit behind the icons/taskbar but above the default animated wallpaper.

![Milkdrop Desktop mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hpiuz1jhih0meqe0cqub.png) 

Then to add streaming support it turned out all that was really missing was the ability to pass those URL's to Webamp. To do this I added handlers for Load Playlist and Load URL which would take a URL such as a direct stream or a playlist file (M3U/PLS/ASX) and load that into Webamp to be played. To do this I used [javascript-playlist-parser](https://github.com/nickdesaulniers/javascript-playlist-parser) which did exactly what I wanted and supported 3 playlist file types.

![Webamp Streaming](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/09n8w5vzridd6pmb9wgx.png) 

Once I had this working then it is just a matter of finding a URL that can work over CORS which means you can go to [https://dustinbrett.com](https://dustinbrett.com) and load a URL that is not from that domain. This ended up being easier than I expected because in my search for classic streams I recalled as a kid that ran on [Shoutcast](https://en.wikipedia.org/wiki/Shoutcast) servers, I found [SomaFM](https://somafm.com/) which was exactly what I was looking for. It has the station [Groove Salad](https://somafm.com/groovesalad/) which is exactly the one I listened to as a kid. Although the one I remember as a kid is now called [Groove Salad Classic](https://somafm.com/gsclassic/). SomaFM supports M3U, PLS & ASX playlist files and works over CORS.

Finally I made a video recently showing these features. Feel free to check it out and throw me a like/subscribe if you enjoyed the video/article. Thanks!

{% youtube R1XniLFptEM %}