initial commit
commit
1c59c29731
|
|
@ -0,0 +1 @@
|
|||
audio/
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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…
Reference in New Issue