gome/gomesite
gome
/
gomesite
1
2
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

songbook: add album art

This commit is contained in:
gome 2023-08-30 21:41:48 -05:00
parent 89ece9feaf
commit 3c8f6bb199
15 changed files with 111 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
css/style.css
View File

@ -164,6 +164,7 @@ main img {
margin: 0 auto 1em auto;
max-width: 100%;
height: auto;
transition: opacity 200ms;
}
img.no-border {
border: none;

24
js/album-art.js Normal file
View File

@ -0,0 +1,24 @@
export function fetch_album_art(album, artist, img, small) {
fetch(`https://ws.audioscrobbler.com/2.0/?method=album.getinfo&api_key=5460c3381d64e7e9908b9fdfc5559747&format=json&album=${encodeURIComponent(album)}&artist=${encodeURIComponent(artist)}`)
.then(r => r.json())
.then(lastfm => {
if (!lastfm.error) {
const arts = lastfm.album.image;
const art = small ? arts[1] : arts.find(({size}) => size === 'extralarge') ?? arts.find(({'#text': url}) => url.includes('300x300')) ?? arts[arts.length - 1];
const url = art['#text'];
if (url) {
img.src = url;
} else if (small) {
img.src = '../../img/disc.webp';
} else {
img.style.opacity = 0;
}
} else {
img.style.opacity = 0;
}
});
}
for (const img of document.querySelectorAll('img[data-album][data-artist]')) {
fetch_album_art(img.dataset.album, img.dataset.artist, img, img.width === 34);
}

12
library/songbook/against-all-odds.md
View File

@ -1,12 +0,0 @@
# Against All Odds (Take a Look At Me Now) - The Postal Service
*(note: the Remastered version)*
- the "horn" synth at the beggining - mourning
- vocals are filtered to sound like crappy speaker - distance
- the guitar-bass vs snare empty groove + the entrance of the "real" vocal production is a heavy hit
- what is the name for this kind of percussion where different hits kind of trip over each other?
- there is a good passage through different elements in the texture
- once it is introduced, I think the drum beat remains for the whole time, but a lot of stuff kind of moves through or in & out
singer's voice is good for this kind of song - holds the notes well, but the voice is very exposed, not especially powerful. expresses vulnerability and ( not spite, but like, sub-spite? )

7
library/songbook/eventually.html
View File

@ -10,6 +10,12 @@
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
<link href='https://fonts.googleapis.com/css2?family=Lora:ital@0;1&display=swap' rel='stylesheet'>
<link rel='stylesheet' type='text/css' href='../../css/style.css'/>
<style>
#album-art {
margin: 0 0 1em 0;
}
</style>
<script type='module' src='../../js/album-art.js'></script>
</head>
<body>
<header id='header'>
@ -19,6 +25,7 @@
</header>
<main>
<h1>Eventually — Tame Impala</h1>
<img id='album-art' data-album='Currents' data-artist='Tame Impala' width='200' height='200' />
<ul>
<li>sidechaining!</li>
<li>laid back “parlor” feeling to the beginning of the verse with the shaky synth chords</li>

71
library/songbook/index.html
View File

@ -10,6 +10,27 @@
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
<link href='https://fonts.googleapis.com/css2?family=Lora:ital@0;1&display=swap' rel='stylesheet'>
<link rel='stylesheet' type='text/css' href='../../css/style.css'/>
<style>
ul {
list-style: none;
padding: 0;
}
li {
display: flex;
align-items: center;
gap: 10px;
}
li img {
width: 34px;
height: 34px;
padding: 0;
margin: 0;
}
img[src$="disc.webp"] {
border-color: transparent;
}
</style>
<script type='module' src='../../js/album-art.js'></script>
</head>
<body>
<header id='header'>
@ -21,16 +42,46 @@
<h1>Songbook</h1>
<p>Just my <i>rough</i> notes about various, mostly random songs I listen to</p>
<ul>
<li><a href='eventually.html'>Eventually — Tame Impala</a></li>
<li><a href='kyoto.html'>Kyoto — Phoebe Bridgers</a></li>
<li><a href='ode-to-divorce.html'>Ode to Divorce — Regina Spektor</a></li>
<li><a href='olympus.html'>Olympus — Sufjan Stevens, Angelo De Augustine</a></li>
<li><a href='one-at-a-time.html'>One at a Time — Unknown Mortal Orchestra</a></li>
<li><a href='pistil-and-the-stamen.html'>Pistil and the Stamen — King Radio</a></li>
<li><a href='spent-missing.html'>Spent Missing (feat. Charlotte Day Wilson) — froyo ma</a></li>
<li><a href='things-behind-the-sun.html'>Things Behind The Sun — Nick Drake</a></li>
<li><a href='white-room.html'>White Room — Mid-Air Thief</a></li>
<li><a href='wim.html'>Wim — Sibylle Baier</a></li>
<li>
<img data-album='Currents' data-artist='Tame Impala' width='34' height='34' />
<a href='eventually.html'>Eventually — Tame Impala</a>
</li>
<li>
<img data-album='Punisher' data-artist='Phoebe Bridgers' width='34' height='34' />
<a href='kyoto.html'>Kyoto — Phoebe Bridgers</a>
</li>
<li>
<img data-album='Soviet Kitsch' data-artist='Regina Spektor' width='34' height='34' />
<a href='ode-to-divorce.html'>Ode to Divorce — Regina Spektor</a>
</li>
<li>
<img data-album="A Beginner's Mind" data-artist='Sufjan Stevens' width='34' height='34' />
<a href='olympus.html'>Olympus — Sufjan Stevens, Angelo De Augustine</a>
</li>
<li>
<img data-album='II' data-artist='Unknown Mortal Orchestra' width='34' height='34' />
<a href='one-at-a-time.html'>One at a Time — Unknown Mortal Orchestra</a>
</li>
<li>
<img data-album='Are You the Sick Passenger' data-artist='King Radio' width='34' height='34' />
<a href='pistil-and-the-stamen.html'>Pistil and the Stamen — King Radio</a>
</li>
<li>
<img data-album='Pants' data-artist='froyo ma' width='34' height='34' />
<a href='spent-missing.html'>Spent Missing (feat. Charlotte Day Wilson) — froyo ma</a>
</li>
<li>
<img data-album='Pink Moon' data-artist='Nick Drake' width='34' height='34' />
<a href='things-behind-the-sun.html'>Things Behind The Sun — Nick Drake</a>
</li>
<li>
<img data-album='Gongjoong Doduk' data-artist='Mid-Air Thief' width='34' height='34' />
<a href='white-room.html'>White Room — Mid-Air Thief</a>
</li>
<li>
<img data-album='Colour Green' data-artist='Sibylle Baier' width='34' height='34' />
<a href='wim.html'>Wim — Sibylle Baier</a>
</li>
</ul>
</main>
<footer>

2
library/songbook/kyoto.html
View File

@ -10,6 +10,7 @@
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
<link href='https://fonts.googleapis.com/css2?family=Lora:ital@0;1&display=swap' rel='stylesheet'>
<link rel='stylesheet' type='text/css' href='../../css/style.css'/>
<script type='module' src='../../js/album-art.js'></script>
</head>
<body>
<header id='header'>
@ -19,6 +20,7 @@
</header>
<main>
<h1>Kyoto — Phoebe Bridgers</h1>
<img id='album-art' data-album='Punisher' data-artist='Phoebe Bridgers' width='200' height='200' />
<ul>
<li>first listened Spring (Summer?) of 2020 — early COVID</li>
<li>sunny guitar power chord progression</li>

2
library/songbook/ode-to-divorce.html
View File

@ -10,6 +10,7 @@
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
<link href='https://fonts.googleapis.com/css2?family=Lora:ital@0;1&display=swap' rel='stylesheet'>
<link rel='stylesheet' type='text/css' href='../../css/style.css'/>
<script type='module' src='../../js/album-art.js'></script>
</head>
<body>
<header id='header'>
@ -19,6 +20,7 @@
</header>
<main>
<h1>Ode to Divorce — Regina Spektor</h1>
<img id='album-art' data-album='Soviet Kitsch' data-artist='Regina Spektor' width='200' height='200' />
<ul>
<li>open chords, deep and lonely, sort of a rich inner forest,</li>
<li>static chord, until the cello recontextualizes it, building energy fluidly until the minty bit</li>

2
library/songbook/olympus.html
View File

@ -10,6 +10,7 @@
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
<link href='https://fonts.googleapis.com/css2?family=Lora:ital@0;1&display=swap' rel='stylesheet'>
<link rel='stylesheet' type='text/css' href='../../css/style.css'/>
<script type='module' src='../../js/album-art.js'></script>
</head>
<body>
<header id='header'>
@ -19,6 +20,7 @@
</header>
<main>
<h1>Olympus — Sufjan Stevens, Angelo De Augustine</h1>
<img id='album-art' data-album="A Beginner's Mind" data-artist='Sufjan Stevens' width='200' height='200' />
<ul>
<li>listened in Summer 2021, on vacation to Wisconsin</li>
<li>layered vocals on the chorus, with Sufjan-esque layers of arpeggios (guitar and piano) portrays wandering energy</li>

2
library/songbook/one-at-a-time.html
View File

@ -10,6 +10,7 @@
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
<link href='https://fonts.googleapis.com/css2?family=Lora:ital@0;1&display=swap' rel='stylesheet'>
<link rel='stylesheet' type='text/css' href='../../css/style.css'/>
<script type='module' src='../../js/album-art.js'></script>
</head>
<body>
<header id='header'>
@ -19,6 +20,7 @@
</header>
<main>
<h1>One at a Time — Unknown Mortal Orchestra</h1>
<img id='album-art' data-album='II' data-artist='Unknown Mortal Orchestra' width='200' height='200' />
<ul>
<li>funky guitar with snare</li>
<li>perfect 4<sup>th</sup> up vocal harmony</li>

2
library/songbook/pistil-and-the-stamen.html
View File

@ -10,6 +10,7 @@
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
<link href='https://fonts.googleapis.com/css2?family=Lora:ital@0;1&display=swap' rel='stylesheet'>
<link rel='stylesheet' type='text/css' href='../../css/style.css'/>
<script type='module' src='../../js/album-art.js'></script>
</head>
<body>
<header id='header'>
@ -19,6 +20,7 @@
</header>
<main>
<h1>Pistil and the Stamen — King Radio</h1>
<img id='album-art' data-album='Are You the Sick Passenger' data-artist='King Radio' width='200' height='200' />
<ul>
<li>the slack voice on “immune from” and then a sharp “t” on “engagement” sounds like irritation, nice touch</li>
<li>sus chord on chorus, “look at the guys”, sounds like... soul? ... something else...</li>

2
library/songbook/spent-missing.html
View File

@ -10,6 +10,7 @@
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
<link href='https://fonts.googleapis.com/css2?family=Lora:ital@0;1&display=swap' rel='stylesheet'>
<link rel='stylesheet' type='text/css' href='../../css/style.css'/>
<script type='module' src='../../js/album-art.js'></script>
</head>
<body>
<header id='header'>
@ -19,6 +20,7 @@
</header>
<main>
<h1>Spent Missing (feat. Charlotte Day Wilson) — froyo ma</h1>
<img id='album-art' data-album='Pants' data-artist='froyo ma' width='200' height='200' />
<ul>
<li>microrhythmic</li>
<li>the soft & analog-sounding synths are nostalgic and understated</li>

2
library/songbook/things-behind-the-sun.html
View File

@ -10,6 +10,7 @@
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
<link href='https://fonts.googleapis.com/css2?family=Lora:ital@0;1&display=swap' rel='stylesheet'>
<link rel='stylesheet' type='text/css' href='../../css/style.css'/>
<script type='module' src='../../js/album-art.js'></script>
</head>
<body>
<header id='header'>
@ -19,6 +20,7 @@
</header>
<main>
<h1>Things Behind The Sun — Nick Drake</h1>
<img id='album-art' data-album='Pink Moon' data-artist='Nick Drake' width='200' height='200' />
<ul>
<li>F#m . . . C#7 . . . E/D . . . C#sus . C#7 .</li>
<li>I think those are the verse chords… they are cool</li>

11
library/songbook/turnin-me-up.md
View File

@ -1,11 +0,0 @@
# Turnin' Me Up - BJ The Chicago Kid
- starts with drumbeat and "studio-conscious" vocals, + ad libs
- skeletal funky structure at vocal entry:
- sparse bass and rhythm guitar, background vocals
- second verse adds horns, piano flourish, flute, very garden/fruit
- ends with a long, mostly monochord groove section w/o "actual" lyrics where the vocal layering becomes pretty dense and then fades away, into various ad libs - including an unintelligible rap or something?
- feels like a song that is on a meta level somewhat about the love of music performance & production like Vulfpeck
has a romantic/sexy feeling to it that is addressed to a lover, but feels more up & out directionally, not meant to endear or seduce the addressee as much as joyfully express the subject's feelings
also, the instrumentation does not create a feeling of intimacy, but rather of collective music-making, again implying that this song is in some ways more about music making than about love, although the love theme is well-expressed

2
library/songbook/white-room.html
View File

@ -10,6 +10,7 @@
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
<link href='https://fonts.googleapis.com/css2?family=Lora:ital@0;1&display=swap' rel='stylesheet'>
<link rel='stylesheet' type='text/css' href='../../css/style.css'/>
<script type='module' src='../../js/album-art.js'></script>
</head>
<body>
<header id='header'>
@ -19,6 +20,7 @@
</header>
<main>
<h1>White Room — Mid-Air Thief</h1>
<img id='album-art' data-album='Gongjoong Doduk' data-artist='Mid-Air Thief' width='200' height='200' />
<ul>
<li>technique of taking a short vocal sample on a single note and looping it forwards & backwards to hold</li>
<li>beats are in triple, until chorus</li>

2
library/songbook/wim.html
View File

@ -10,6 +10,7 @@
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
<link href='https://fonts.googleapis.com/css2?family=Lora:ital@0;1&display=swap' rel='stylesheet'>
<link rel='stylesheet' type='text/css' href='../../css/style.css'/>
<script type='module' src='../../js/album-art.js'></script>
</head>
<body>
<header id='header'>
@ -19,6 +20,7 @@
</header>
<main>
<h1>Wim — Sibylle Baier</h1>
<img id='album-art' data-album='Colour Green' data-artist='Sibylle Baier' width='200' height='200' />
<ul>
<li>good example of kind of freely coming back to pieces of melody in what feels like no particular pattern</li>
<li>each little bit flows and makes internal sense/consequence but they come in irregular chunks, and we can have little turnarounds where needed</li>