diff --git a/public_html/functions.js b/public_html/functions.js index 8a72065..0c98f90 100644 --- a/public_html/functions.js +++ b/public_html/functions.js @@ -1,9 +1,117 @@ +// gif player document.querySelectorAll('.paused-animation').forEach(el => { el.addEventListener('click', () => { el.classList.toggle('active'); }); }); +// track players +const players = document.querySelectorAll('.track-player'); +players.forEach(player => { + const trackName = player.getAttribute('data-track'); + + const button = document.createElement('div'); + button.className = 'play-button play'; // start as play + player.appendChild(button); + + const wrapper = document.createElement('div'); + wrapper.className = 'track'; + wrapper.innerHTML = ` +
+
+
+
+ `; + player.appendChild(wrapper); + + const playercontainer = player.querySelector('.track-container'); + const played = player.querySelector('.track-played'); + const unplayed = player.querySelector('.track-unplayed'); + played.style.backgroundImage = `url('tracks/${trackName}-played.png')`; + unplayed.style.backgroundImage = `url('tracks/${trackName}.png')`; + + const audio = document.createElement('audio'); + audio.style.display = 'none'; + player.appendChild(audio); + + button.addEventListener('click', () => { + // Pause other players immediately + players.forEach(p => { + const otherAudio = p.querySelector('audio'); + const otherBtn = p.querySelector('.play-button'); + if (otherAudio !== audio) { + if (!otherAudio.paused) otherAudio.pause(); + if (otherBtn) { + otherBtn.classList.add('play'); + otherBtn.classList.remove('pause'); + } + } + }); + + // Then lazy-load and play/pause current audio as before... + if (!audio.src) { + audio.src = 'tracks/' + trackName + '.mp3'; + audio.currentTime = 0; + audio.load(); + + audio.addEventListener('canplay', () => { + audio.play().then(() => { + button.classList.remove('play'); + button.classList.add('pause'); + }).catch(() => { + button.classList.add('play'); + button.classList.remove('pause'); + }); + }, { once: true }); + + return; + } + + if (audio.paused) { + audio.play().then(() => { + button.classList.remove('play'); + button.classList.add('pause'); + }).catch(() => { + button.classList.add('play'); + button.classList.remove('pause'); + }); + } else { + audio.pause(); + button.classList.add('play'); + button.classList.remove('pause'); + } + }); + + + audio.addEventListener('ended', () => { + button.classList.add('play'); + button.classList.remove('pause'); + }); + + + playercontainer.addEventListener('click', e => { + const rect = playercontainer.getBoundingClientRect(); // Use container rect! + const clickX = e.clientX - rect.left; + const width = rect.width; + + const portion = Math.min(Math.max(clickX / width, 0), 1); + + audio.currentTime = portion * audio.duration; + }); + + audio.addEventListener('timeupdate', () => { + const portion = audio.duration ? audio.currentTime / audio.duration : 0; + update_play_position(played, unplayed, portion); + }); +}); + +function update_play_position(played_element, unplayed_element, portion) { + const playedPercent = portion * 100; + const unplayedPercent = 100 - playedPercent; + played_element.style.width = playedPercent + "%"; + unplayed_element.style.width = unplayedPercent + "%"; +} + // icosahedron // Wait for everything to load diff --git a/public_html/img/play-btn.svg b/public_html/img/play-btn.svg index 3b27965..8d85080 100644 --- a/public_html/img/play-btn.svg +++ b/public_html/img/play-btn.svg @@ -7,7 +7,7 @@ - + diff --git a/public_html/img/track-pause.svg b/public_html/img/track-pause.svg new file mode 100644 index 0000000..3bf7b0f --- /dev/null +++ b/public_html/img/track-pause.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/public_html/img/track-play.svg b/public_html/img/track-play.svg new file mode 100644 index 0000000..fb25edd --- /dev/null +++ b/public_html/img/track-play.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/public_html/index.html b/public_html/index.html index 930659c..9e8e084 100644 --- a/public_html/index.html +++ b/public_html/index.html @@ -123,6 +123,31 @@
listen or buy on bandcamp
+ +
+

highlighted tracks + +

+
+ +
+
+

lastfuture – rattlefox

+
+
+
+

lastfuture – majesty

+
+
+
+
diff --git a/public_html/style.css b/public_html/style.css index 4fe3b2c..7745d89 100644 --- a/public_html/style.css +++ b/public_html/style.css @@ -458,10 +458,17 @@ body { background-attachment: fixed; } +.elementshadow { + box-shadow: 0 2px 1px rgba(0, 0, 0, 1); +} .headlineshadow { text-shadow: 0 2px 1px rgba(0, 0, 0, 1); } +.spaceup { + margin-top: 4rem; +} + a { text-decoration: underline; transition: all 0.2s ease-in-out; @@ -489,10 +496,6 @@ a { margin: 1.5rem; } -.whitebg { - color: var(--text-color); -} - .nowrap { white-space: nowrap; } @@ -670,13 +673,12 @@ a { text-shadow: 0 2px 1px rgba(0, 100, 125, 1); } -.contentitem.invertedbox header h1 { +.contentitem header.whitebg h1 { color: #4e8595; text-shadow: none; } -.contentitem header h1 em, -section.invertedbox h2 em { +.contentitem header h1 em { font-style: normal; font-weight: 400; } @@ -700,12 +702,16 @@ section.invertedbox h2 em { font-weight: 500; } -.contentitem div.opaque h2 span.halfbubble { +h2 span.halfbubble { height: 22px; width: 11px; border-bottom-right-radius: 11px; border-top-right-radius: 11px; display: inline-block; + margin: 0 0.7rem -0.25rem 0; +} + +div.opaque h2 span.halfbubble { margin: 0 0.7rem -0.25rem -1.25rem; } @@ -733,7 +739,7 @@ section.invertedbox h2 em { background-image: url('img/play-btn.svg'); background-position: center center; background-repeat: no-repeat; - background-size: 4rem; + background-size: 80px 80px; box-shadow: 0px 0px 6px rgba(0,0,0,0.3); } .paused-animation img { @@ -774,6 +780,7 @@ article.album a { width: 100%; height: 120px; color: var(--text-color); + text-decoration: none; } article.album h2 { @@ -838,14 +845,63 @@ article.album a:hover { height: 160px; } +.track h2 { + font-size: 1.2em; +} +.track .halfbubble { + margin-bottom: -0.125em; +} +.track-player { + margin: 0.5rem 0 1.5rem; +} +.track-player .track-container { + width: 400px; + height: 80px; + border-radius: 0.3rem; +} +.track-player .track-played, .track-player .track-unplayed { + height: 100%; + float: left; + background-repeat: no-repeat; + background-size: 400px 80px; + +} +.track-player .play-button { + display: block; + height: 80px; + width: 80px; + float: right; + background-position: center center; + background-repeat: no-repeat; + background-size: contain; + cursor: pointer; +} +.track-player .play-button.play { + background-image: url('img/track-play.svg'); +} +.track-player .play-button.pause { + background-image: url('img/track-pause.svg'); +} +.track-player .track-played { + width: 0%; + background-position: top left; + background-image: none; +} +.track-player .track-unplayed { + background-position: top right; + width: 100%; + background-image: none; +} + /* backgrounds */ .whitebg { background-color: white; + color: var(--text-color); } .blurgreen { - background-color: #437888; + background-color: #1e3f2d; background-image: url('img/bg_blur.webp'); background-repeat: no-repeat; background-attachment: fixed; diff --git a/public_html/tracks/lastfuture-majesty-played.png b/public_html/tracks/lastfuture-majesty-played.png new file mode 100644 index 0000000..6eefb5f Binary files /dev/null and b/public_html/tracks/lastfuture-majesty-played.png differ diff --git a/public_html/tracks/lastfuture-majesty.mp3 b/public_html/tracks/lastfuture-majesty.mp3 new file mode 100644 index 0000000..fd86820 Binary files /dev/null and b/public_html/tracks/lastfuture-majesty.mp3 differ diff --git a/public_html/tracks/lastfuture-majesty.png b/public_html/tracks/lastfuture-majesty.png new file mode 100644 index 0000000..3497a79 Binary files /dev/null and b/public_html/tracks/lastfuture-majesty.png differ diff --git a/public_html/tracks/lastfuture-rattlefox-played.png b/public_html/tracks/lastfuture-rattlefox-played.png new file mode 100644 index 0000000..9c3f05d Binary files /dev/null and b/public_html/tracks/lastfuture-rattlefox-played.png differ diff --git a/public_html/tracks/lastfuture-rattlefox.mp3 b/public_html/tracks/lastfuture-rattlefox.mp3 new file mode 100644 index 0000000..ea986be Binary files /dev/null and b/public_html/tracks/lastfuture-rattlefox.mp3 differ diff --git a/public_html/tracks/lastfuture-rattlefox.png b/public_html/tracks/lastfuture-rattlefox.png new file mode 100644 index 0000000..b16736e Binary files /dev/null and b/public_html/tracks/lastfuture-rattlefox.png differ diff --git a/src/icons.afdesign b/src/icons.afdesign index 64d20c0..4bc001b 100644 Binary files a/src/icons.afdesign and b/src/icons.afdesign differ diff --git a/src/track-waveforms-fission.afphoto b/src/track-waveforms-fission.afphoto new file mode 100644 index 0000000..4349f4a Binary files /dev/null and b/src/track-waveforms-fission.afphoto differ