Hey there! Art Meets Music is a small web experiment that I came out with to explore API on web pages. This specific searcher pairs music tracks from iTunes API with random artworks from the Art Institute of Chicago, using, again, their official API.
How does it work? When you enter the name of an artist or band and hit search, page will randomly give you a piece of art.
I thought it could be an funny way to get in touch with the paintings, pottery or other artworks displayed at the Art Institute. It brings a small description of the art displayed while you pair it with some soundtrack of your choice. By using the “Surprise Pairing” feature, instead of using an artist/band name, you can explore both music and art at the same time.
This project is my way of learning about APIs, web development and interactive design. A little playful exploration while improving my coding skills.
Music: Uses the iTunes Search API to find tracks from the artist you type.
Art: Fetches random artworks from the Art Institute of Chicago API with images, artist info and descriptions.
Connection message: Gives a short note about the artwork and about the artist. Its main porpose is to give some context about the art displayed.
You can either:
Search by artist/band name → see a track + random artwork.
Surprise Pairing → discover a random artwork and a music track inspired by it.
It also includes a light/dark theme toggle, because, honestly, dark mode rules.
Click here to explore the experiment: Art Meets Music on GitHub Pages.
https://petratype.github.io/art-meets-music-api
HTML / CSS / JavaScript
APIs: iTunes Search API & Art Institute of Chicago API
No backend required, fully static site, easy to host on GitHub Pages.
This is a personal learning project. I’m experimenting with API calls, asynchronous JS, and interactive UI.
I like to host the idea on webpages to easily share it with other people and get comments, sugerences, ideas to improve it. Easy access is very important to me.
Future improvements: add more interactive features, animations and maybe new APIs for richer pairings.
Music data from iTunes API
Art data from Art Institute of Chicago API
♥ Coded by Petratype ♥