Browse Source

initial commit

main
cosmonaut 3 months ago
commit
1c59c29731
  1. 1
      .gitignore
  2. 177
      index.css
  3. 102
      index.html
  4. 87
      index.js

1
.gitignore

@ -0,0 +1 @@
audio/

177
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;
}

102
index.html

@ -0,0 +1,102 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Monads Music Mindset</title>
<meta name="description" content="Archives of the weekly internet radio program, Monads Music Mindset.">
<meta name="author" content="dankwraith">
<meta property="og:title" content="Monads Music Mindset">
<meta property="og:type" content="website">
<meta property="og:url" content="http://moonside.games/MonadsMusicMindset/">
<meta property="og:description" content="Archives of the weekly internet radio program, Monads Music Mindset.">
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="header">
Monads Music Mindset
</div>
<div class="main">
<div class="information-and-showlist">
<div class="information">
<p>Monads Music Mindset is a weekly internet radio program broadcasted on Mondays at 7PM Pacific Standard Time.</p>
<p>This page contains the archives of recorded broadcasts. I hope you'll join us for a live show!</p>
</div>
<div class="showlist">
<div class="show">
<span class=>002: psych trippin'</span>
<span class="audioURL hidden">audio/MonadsMusicMindset002.mp3</span>
<div class="tracklist hidden">
<span>Spacemen 3 - Losin' Touch With My Mind</span>
<span>Beat Happening - Pajama Party in a Haunted Hive</span>
<span>Meat Puppets - Plateau</span>
<span>Pixies - Wave of Mutilation</span>
<span>Spiritualized - Come Together</span>
<span>The Brian Jonestown Massacre - Cold to the Touch</span>
<span>Ty Segall - Caesar</span>
<span>Intelligence - Warm Transfers</span>
<span>Black Mountain - Druganaut</span>
<span>Cave - Bobby's Hash</span>
<span>Yuri Gagarin - Sonic Invasion 2910</span>
<span>Food Pyramid - GmbH</span>
<span>Belong - A Walk</span>
<span>My Bloody Valentine - Come In Alone</span>
<span>The Jesus & Mary Chain - You Trip Me Up</span>
<span>Spiritualized - All of My Thoughts</span>
<span>Spacemen 3 - Feel So Good</span>
<span>Amanaz - Khala My Friend</span>
<span>Meat Puppets - What To Do</span>
<span>Beat Happening - Don't Mix the Colors</span>
<span>The Velvet Underground - After Hours</span>
</div>
</div>
<div class="show">
<span>003: deep dive</span>
<span class="audioURL hidden">audio/MonadsMusicMindset003.mp3</span>
<div class="tracklist hidden">
<span>Jane Siberry - You Don't Need</span>
<span>Burial & Four Tet - Moth</span>
<span>Lusine - Operation Costs (Disassembled Mix)</span>
<span>Fennesz & Sakamoto - Kokoro</span>
<span>Bruno Pronsato - Feel Right</span>
</div>
</div>
</div>
</div>
<div class="audio-player-and-tracks">
<div class="audio-player">
<audio></audio>
<button id="play-icon">▶️</button>
<span id="current-time" class="time">0:00</span>
<input type="range" id="seek-slider" max="100" value="0">
<span id="duration" class="time">0:00</span>
<output id="volume-output">100</output>
<input type="range" id="volume-slider" max="100" value="100">
<button id="mute-icon"></button>
</div>
<div id="show-info">
<div class="tracklist"></div>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>

87
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();
});
}
Loading…
Cancel
Save