audiomack.world is an interactive experience that gives you more than just a few stars to wish upon. It is a showcase of original content by Audiomack and its creators from around the globe. From spotlighting influencers who push the boundaries of sound, to pairing your favorite artists with a full classical orchestra.
Tools
There are a few ways to build interactive globes on the web. I originally used this project as an excuse to learn some ThreeJS. A couple bump maps later I was able to get something working but it didn’t have the fidelity that I originally had in mind. Although the performance was pretty good being on top of WebGL and all, I ended up scrapping ThreeJS in favor of D3.js.
Using D3.js I was able to put together an svg version of the globe. This was a lot better looking but it did not perform well at all. The amount of topology objects that needed to be drawn proved to be too heavy on the DOM. D3.js is pretty flexible in terms of the canvas it paints on, so I was able to convert a lot of the svg draw code into a 2D canvas context. This had the performance and fidelity closer to what I originally pictured.
Statically Superior
One of the goals of this project was not to have any sort of server to serve the pages. We currently use AWS for our infrastructure so S3 was the obvious destination for all of these static deliverables. I had built this site using the great Gatsby.js so that was definitely an option here. However, next.js had just came out with static site generation so I figured why not. I think both frameworks have their pros and cons but I like the direction of both projects.
Grabbing the Medium Posts
The original idea was to have everything on the site powered by our Medium blog. This proved to be a problem for our static site requirement because you can’t request the blog’s RSS feed due to CORS. And since we couldn’t set the appropriate headers in order to make a CORS request, there was no other option but to make a custom API endpoint to get the feed items. This lives outside of the static site so we were still okay on that front.
Since we wanted to have custom styling on our audiomack.world posts, we needed more than just the basic text content that you get from the RSS feed. Medium only offers a basic API to create posts which obviously doesn’t help here. I found a hidden API that allows you to get posts from a blog url like medium-blog.your-domain.com/latest?format=json. It also accepts a count query parameter and you can omit format=json if you request with an application/json header. There’s also medium-blog.your-domain.com/:blogId to get the contents of a specific blog post. This gives you the post broken down in a tokenized json structure so in order to build our own custom styled post pages, I had to write a parser for the API response. If you don’t have the luxury of having a custom server to build your proxy with, you could use a service like rss2json as mentioned here. The only reason I didn’t go that route is because I’d rather have a single of failure rather than multiple. If Medium were to change this API in any way, we’d have to switch our source. Ultimately it’s our content so it wouldn’t be too big of a deal to build something small for this specific project.
It was definitely a fun project to hack on. One of the other hidden endpoints I found was medium-blog.your-domain.com/media/:iframeMediaResourceId. Since there was essentially no documentation to complete a project like this, I would love to see any other projects out there doing something similar with Medium.