commit 1c59c29731328d7c56f65cd0cee824f04ac3bfd6 Author: cosmonaut Date: Sun Jun 27 16:11:41 2021 -0700 initial commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..453354b --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +audio/ diff --git a/index.css b/index.css new file mode 100644 index 0000000..a3525de --- /dev/null +++ b/index.css @@ -0,0 +1,177 @@ +body +{ + background-color: #28262C; + color: #F9F5FF; +} + +.hidden +{ + display: none; +} + +.header +{ + font-size: 28px; + text-align: center; +} + +.main +{ + display: flex; + flex-direction: row; +} + +.information-and-showlist +{ + display: flex; + flex-direction: column; + width: 50%; +} + +.showlist +{ + width: 50%; +} + +.show +{ + color: #14248A; + cursor: pointer; +} + +.tracklist +{ + font-size: 14px; +} + +.tracklist span +{ + display: block; +} + +.audio-player-and-tracks +{ + display: flex; + flex-direction: column; + align-items: center; + width: 50%; +} + +.audio-player +{ + display: flex; + width: 50%; + align-items: center; +} + +.audio-player button +{ + height: 14px; +} + +.show-info +{ + width: 50%; + align-items: center; +} + +.time +{ + top: 50%; +} + +input +{ + background-color: #28262C; +} + +input[type=range] { + height: 36px; + -webkit-appearance: none; + margin: 10px 0; + width: 100%; + float: left; + } + input[type=range]:focus { + outline: none; + } + input[type=range]::-webkit-slider-runnable-track { + width: 100%; + height: 1px; + cursor: pointer; + animate: 0.2s; + box-shadow: 0px 0px 0px #000000; + background: #FFFFFF; + border-radius: 0px; + border: 0px solid #000000; + } + input[type=range]::-webkit-slider-thumb { + box-shadow: 0px 0px 0px #000000; + border: 0px solid #FFFFFF; + height: 30px; + width: 1px; + border-radius: 0px; + background: #FFFFFF; + cursor: pointer; + -webkit-appearance: none; + margin-top: -14.5px; + } + input[type=range]:focus::-webkit-slider-runnable-track { + background: #FFFFFF; + } + input[type=range]::-moz-range-track { + width: 100%; + height: 1px; + cursor: pointer; + animate: 0.2s; + box-shadow: 0px 0px 0px #000000; + background: #FFFFFF; + border-radius: 0px; + border: 0px solid #000000; + } + input[type=range]::-moz-range-thumb { + box-shadow: 0px 0px 0px #000000; + border: 0px solid #FFFFFF; + height: 30px; + width: 1px; + border-radius: 0px; + background: #FFFFFF; + cursor: pointer; + } + input[type=range]::-ms-track { + width: 100%; + height: 1px; + cursor: pointer; + animate: 0.2s; + background: transparent; + border-color: transparent; + color: transparent; + } + input[type=range]::-ms-fill-lower { + background: #FFFFFF; + border: 0px solid #000000; + border-radius: 0px; + box-shadow: 0px 0px 0px #000000; + } + input[type=range]::-ms-fill-upper { + background: #FFFFFF; + border: 0px solid #000000; + border-radius: 0px; + box-shadow: 0px 0px 0px #000000; + } + input[type=range]::-ms-thumb { + margin-top: 1px; + box-shadow: 0px 0px 0px #000000; + border: 0px solid #FFFFFF; + height: 30px; + width: 1px; + border-radius: 0px; + background: #FFFFFF; + cursor: pointer; + } + input[type=range]:focus::-ms-fill-lower { + background: #FFFFFF; + } + input[type=range]:focus::-ms-fill-upper { + background: #FFFFFF; + } diff --git a/index.html b/index.html new file mode 100644 index 0000000..784499d --- /dev/null +++ b/index.html @@ -0,0 +1,102 @@ + + + + + + + + + Monads Music Mindset + + + + + + + + + + + + + + + + + +
+ Monads Music Mindset +
+ +
+
+
+

Monads Music Mindset is a weekly internet radio program broadcasted on Mondays at 7PM Pacific Standard Time.

+

This page contains the archives of recorded broadcasts. I hope you'll join us for a live show!

+
+ +
+
+ 002: psych trippin' + + +
+ +
+ 003: deep dive + + +
+
+
+ +
+
+ + + 0:00 + + 0:00 + 100 + + +
+ +
+
+
+
+
+ + + + + diff --git a/index.js b/index.js new file mode 100644 index 0000000..d5751ff --- /dev/null +++ b/index.js @@ -0,0 +1,87 @@ +const audio = document.querySelector('audio'); +const durationContainer = document.getElementById('duration'); +const seekSlider = document.getElementById('seek-slider'); +const currentTimeContainer = document.getElementById('current-time'); +const playIconContainer = document.getElementById('play-icon'); +const volumeSlider = document.getElementById('volume-slider'); +const outputContainer = document.getElementById('volume-output'); + +const showInfo = document.getElementById('show-info'); + +let shows = document.getElementsByClassName('show'); + +for (var i = 0; i < shows.length; i += 1) +{ + let show = shows[i]; + let urlSpan = show.children[1]; + let audioURL = urlSpan.textContent; + show.addEventListener('click', () => { + audio.src = audioURL; + audio.load(); + showInfo.removeChild(showInfo.children[0]); + showInfo.appendChild(show.children[2].cloneNode(true)); + showInfo.children[0].classList.remove("hidden"); + }); +} + +const PlayState = { + Play: 'Play', + Pause: 'Pause' +} + +let playState = PlayState.Pause; + +const calculateTimeString = (secs) => { + const hours = Math.floor(secs / (60 * 60)); + const minutes = String(Math.floor(secs / 60) - (60 * hours)).padStart(2, '0'); + const seconds = String(Math.floor(secs % 60)).padStart(2, '0'); + return `${hours}:${minutes}:${seconds}`; +} + +const displayDuration = () => { + durationContainer.textContent = calculateTimeString(audio.duration); +} + +const setSliderMax = () => { + seekSlider.max = Math.floor(audio.duration); +} + +seekSlider.addEventListener('input', () => { + currentTimeContainer.textContent = calculateTimeString(seekSlider.value); +}); + +seekSlider.addEventListener('change', () => { + audio.currentTime = seekSlider.value; + currentTimeContainer.textContent = calculateTimeString(seekSlider.value); +}); + +audio.addEventListener('timeupdate', () => { + seekSlider.value = Math.floor(audio.currentTime); + currentTimeContainer.textContent = calculateTimeString(seekSlider.value); +}); + +playIconContainer.addEventListener('click', () => { + if(playState === PlayState.Pause) { + audio.play(); + playState = PlayState.Play; + } else { + audio.pause(); + playState = PlayState.Pause; + } +}); + +volumeSlider.addEventListener('input', (e) => { + const value = e.target.value; + outputContainer.textContent = value; + audio.volume = value / 100; +}); + +if (audio.readyState > 0) { + displayDuration(); + setSliderMax(); +} else { + audio.addEventListener('loadedmetadata', () => { + displayDuration(); + setSliderMax(); + }); +}