318 lines
11 KiB
HTML
318 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang='en'>
|
||
<head>
|
||
<title>gome — daily jingle</title>
|
||
<meta charset='utf-8'/>
|
||
<meta name='theme-color' content='#efe5d7'>
|
||
<meta name='viewport' content='width=device-width, initial-scale=1.0, shrink-to-fit=no'/>
|
||
<link rel='icon' type='image/x-icon' href='../../favicon.ico'>
|
||
<link rel='stylesheet' type='text/css' href='../../css/fonts.css'/>
|
||
<link rel='stylesheet' type='text/css' href='../../css/style.css'/>
|
||
<style>
|
||
h3 {
|
||
margin-bottom: 0.25em;
|
||
}
|
||
h4 {
|
||
margin: 0 0 0.5em 0;
|
||
}
|
||
time {
|
||
margin: 0 0 20px 0;
|
||
}
|
||
audio {
|
||
margin: 0 0 20px 0;
|
||
}
|
||
details ul {
|
||
margin: 0;
|
||
}
|
||
ul li {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.25em;
|
||
}
|
||
ul li::before {
|
||
content: '–';
|
||
}
|
||
ul li audio {
|
||
margin: 0;
|
||
}
|
||
noscript {
|
||
display: flex;
|
||
}
|
||
details {
|
||
margin: 0 0 20px 0;
|
||
}
|
||
details summary {
|
||
margin-bottom: 5px;
|
||
}
|
||
section {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
section::after {
|
||
margin-top: 0;
|
||
}
|
||
li .music-box {
|
||
margin: 0;
|
||
}
|
||
figure {
|
||
margin: 0 0 20px 0;
|
||
}
|
||
main.hide-sections section:not(.show) {
|
||
display: none;
|
||
}
|
||
.music-box .date {
|
||
font-size: 0.9em;
|
||
}
|
||
main figure img {
|
||
max-width: calc(100vw - 40px);
|
||
height: auto;
|
||
}
|
||
@media only screen and (max-width: 660px) {
|
||
main figure {
|
||
margin-left: -20px;
|
||
margin-right: -20px;
|
||
}
|
||
main figure img {
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
border-left: none;
|
||
border-right: none;
|
||
border-radius: 0;
|
||
max-width: 100vw;
|
||
}
|
||
}
|
||
</style>
|
||
<script type="module">
|
||
const noscripts = document.querySelectorAll('noscript');
|
||
const parse_pattern = /<audio.*?>[^<]*<\/audio>/;
|
||
for (const noscript of noscripts) {
|
||
const music_box = document.createElement('div');
|
||
music_box.classList.add('music-box');
|
||
music_box.innerHTML = `
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="play"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="pause"><rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect></svg>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="replay"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
|
||
${noscript.textContent}
|
||
`;
|
||
get_audio(music_box).removeAttribute("controls");
|
||
noscript.parentElement.insertBefore(music_box, noscript);
|
||
}
|
||
|
||
function get_audio(music_box) {
|
||
return music_box.querySelector('audio');
|
||
}
|
||
|
||
const music_boxes = document.getElementsByClassName('music-box');
|
||
for (const music_box of music_boxes) {
|
||
music_box.addEventListener('click', () => {
|
||
const audio = get_audio(music_box);
|
||
music_box.classList.remove('done');
|
||
if (audio.paused) {
|
||
// pause all other music boxes
|
||
for (const music_box of music_boxes) {
|
||
music_box.classList.remove('playing');
|
||
get_audio(music_box).pause();
|
||
}
|
||
music_box.classList.add('playing');
|
||
audio.play();
|
||
} else {
|
||
music_box.classList.remove('playing');
|
||
audio.pause();
|
||
}
|
||
});
|
||
get_audio(music_box).addEventListener('ended', () => {
|
||
music_box.classList.remove('playing');
|
||
music_box.classList.add('done');
|
||
});
|
||
}
|
||
|
||
window.toggle_variants = button => {
|
||
const open = button.textContent.startsWith("Open");
|
||
if (open) {
|
||
button.textContent = button.textContent.replace("Open", "Close");
|
||
for (const details of document.querySelectorAll("details")) {
|
||
if (details.querySelector("summary").textContent.startsWith("Variant")) {
|
||
details.setAttribute("open", "");
|
||
}
|
||
}
|
||
} else {
|
||
button.textContent = button.textContent.replace("Close", "Open");
|
||
for (const details of document.querySelectorAll("details")) {
|
||
if (details.querySelector("summary").textContent.startsWith("Variants")) {
|
||
details.removeAttribute("open");
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
const params = new URLSearchParams(window.location.search);
|
||
for (let key of params.keys()) {
|
||
const section = document.querySelector(`section > time[datetime="${key}"]`).parentElement;
|
||
section.classList.add("show");
|
||
}
|
||
if (!!document.querySelector(`section.show`)) {
|
||
document.querySelector("main").classList.add("hide-sections");
|
||
}
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<header id='header'>
|
||
<nav>
|
||
<a href='../..'>back to gomepage</a>—<a href='..'>library</a>
|
||
</nav>
|
||
</header>
|
||
<main>
|
||
<h1>Daily Jingle</h1>
|
||
<figure>
|
||
<img src="lake.webp" width="654" height="191">
|
||
</figure>
|
||
<p>Casual music project</p>
|
||
<!-- TODO <p>Calendar</p> -->
|
||
<!-- TODO <p><button class="gome-button"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="play"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>Play all</button></p> -->
|
||
<p><button class="gome-button" onclick="toggle_variants(this)">Open all variants</button></p>
|
||
<section>
|
||
<h3>Craft Hour</h3>
|
||
<time datetime='2024-04-28'>28 Apr. 2024</time>
|
||
<noscript>
|
||
Craft Hour
|
||
<audio controls>
|
||
<source src="https://gome.page/library/daily-jingle/24-04-28.craft-hour.ogg" type="audio/ogg">
|
||
<source src="https://gome.page/library/daily-jingle/24-04-28.craft-hour.mp3" type="audio/mp3">
|
||
</audio>
|
||
</noscript>
|
||
<p>
|
||
Based on a little “jazz harp” idea I had a while ago
|
||
</p>
|
||
<h4>Bonus track: Athelwhite</h4>
|
||
<noscript>
|
||
Athelwhite
|
||
<audio controls>
|
||
<source src="https://gome.page/library/daily-jingle/24-04-28.athelwhite.ogg" type="audio/ogg">
|
||
<source src="https://gome.page/library/daily-jingle/24-04-28.athelwhite.mp3" type="audio/mp3">
|
||
</audio>
|
||
</noscript>
|
||
<p>
|
||
This is a very old one (over a decade), based on <i>Edelweiss</i>.
|
||
I tried new instrumentation on it which is why it’s here.
|
||
</p>
|
||
</section>
|
||
<section>
|
||
<h3>Mouse</h3>
|
||
<time datetime='2024-04-27'>27 Apr. 2024</time>
|
||
<noscript>
|
||
Mouse
|
||
<audio controls>
|
||
<source src="https://gome.page/library/daily-jingle/24-04-27.mouse.ogg" type="audio/ogg">
|
||
<source src="https://gome.page/library/daily-jingle/24-04-27.mouse.mp3" type="audio/mp3">
|
||
</audio>
|
||
</noscript>
|
||
<details>
|
||
<summary>Variant</summary>
|
||
<ul>
|
||
<li>
|
||
<noscript>
|
||
Mouse Chase
|
||
<audio controls>
|
||
<source src="https://gome.page/library/daily-jingle/24-04-27.mouse-chase.ogg" type="audio/ogg">
|
||
<source src="https://gome.page/library/daily-jingle/24-04-27.mouse-chase.mp3" type="audio/mp3">
|
||
</audio>
|
||
</noscript>
|
||
</li>
|
||
</ul>
|
||
</details>
|
||
</section>
|
||
<section>
|
||
<h3>Grummond’s Peak</h3>
|
||
<time datetime='2024-04-22'>22 Apr. 2024</time>
|
||
<noscript>
|
||
Grummond’s Peak
|
||
<audio controls>
|
||
<source src="https://gome.page/library/daily-jingle/24-04-22.grummonds-peak.ogg" type="audio/ogg">
|
||
<source src="https://gome.page/library/daily-jingle/24-04-22.grummonds-peak.mp3" type="audio/mp3">
|
||
</audio>
|
||
</noscript>
|
||
</section>
|
||
<section>
|
||
<h3>Bugsport</h3>
|
||
<time datetime='2024-04-21'>21 Apr. 2024</time>
|
||
<noscript>
|
||
Bugsport
|
||
<audio controls>
|
||
<source src="https://gome.page/library/daily-jingle/24-04-21.bugsport.ogg" type="audio/ogg">
|
||
<source src="https://gome.page/library/daily-jingle/24-04-21.bugsport.mp3" type="audio/mp3">
|
||
</audio>
|
||
</noscript>
|
||
<p>
|
||
A bit of a <a href='../../journal/snails-house.html'>Snail’s House</a> tribute,
|
||
in the <i>so do re so</i> ostinato and the general inspiration of the melody.
|
||
</p>
|
||
<details>
|
||
<summary>Variants</summary>
|
||
<ul>
|
||
<li>
|
||
<noscript>
|
||
Bugsport Sloppy
|
||
<audio controls>
|
||
<source src="https://gome.page/library/daily-jingle/24-04-21.bugsport-sloppy.ogg" type="audio/ogg">
|
||
<source src="https://gome.page/library/daily-jingle/24-04-21.bugsport-sloppy.mp3" type="audio/mp3">
|
||
</audio>
|
||
</noscript>
|
||
</li>
|
||
<li>
|
||
<noscript>
|
||
Bugsport Speedy
|
||
<audio controls>
|
||
<source src="https://gome.page/library/daily-jingle/24-04-21.bugsport-speedy.ogg" type="audio/ogg">
|
||
<source src="https://gome.page/library/daily-jingle/24-04-21.bugsport-speedy.mp3" type="audio/mp3">
|
||
</audio>
|
||
</noscript>
|
||
</li>
|
||
</ul>
|
||
</details>
|
||
</section>
|
||
<section>
|
||
<h3>Activity</h3>
|
||
<time datetime='2024-04-20'>20 Apr. 2024</time>
|
||
<noscript>
|
||
Activity
|
||
<audio controls>
|
||
<source src="https://gome.page/library/daily-jingle/24-04-20.activity.ogg" type="audio/ogg">
|
||
<source src="https://gome.page/library/daily-jingle/24-04-20.activity.mp3" type="audio/mp3">
|
||
</audio>
|
||
</noscript>
|
||
<details>
|
||
<summary>Variant</summary>
|
||
<ul>
|
||
<li>
|
||
<noscript>
|
||
Activity Shuffle
|
||
<audio controls>
|
||
<source src="https://gome.page/library/daily-jingle/24-04-20.activity-shuffle.ogg" type="audio/ogg">
|
||
<source src="https://gome.page/library/daily-jingle/24-04-20.activity-shuffle.mp3" type="audio/mp3">
|
||
</audio>
|
||
</noscript>
|
||
</li>
|
||
</ul>
|
||
</details>
|
||
</section>
|
||
<section>
|
||
<h3>Headache Etude</h3>
|
||
<time datetime='2024-04-19'>19 Apr. 2024</time>
|
||
<noscript>
|
||
Headache Etude
|
||
<audio controls>
|
||
<source src="https://gome.page/library/daily-jingle/24-04-19.headache-etude.ogg" type="audio/ogg">
|
||
<source src="https://gome.page/library/daily-jingle/24-04-19.headache-etude.mp3" type="audio/mp3">
|
||
</audio>
|
||
</noscript>
|
||
<p>
|
||
Titled as such because of the headache-inducing way I EQ’d the drums
|
||
</p>
|
||
</section>
|
||
</main>
|
||
<footer>
|
||
<img src='../../img/mushrooms_2.webp' alt='Toadstools' />
|
||
</footer>
|
||
</body>
|
||
</html>
|