536 lines
18 KiB
HTML
Executable file
536 lines
18 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html lang="kr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<title>RADIO WORLDING</title>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/addons/p5.sound.min.js"></script>
|
|
|
|
<link rel="stylesheet" type="text/css" media="screen" href="https://cdn.conversejs.org/10.1.8/dist/converse.min.css">
|
|
<script charset="utf-8" src="https://cdn.conversejs.org/10.1.8/dist/converse.min.js"></script>
|
|
|
|
<link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet">
|
|
<style>
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
font-family: "Courier";
|
|
background: #9100FF;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
/* IE and Edge */
|
|
}
|
|
|
|
header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 160px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 10;
|
|
background: transparent;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#p5-canvas {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
z-index: 9999;
|
|
pointer-events: none;
|
|
}
|
|
|
|
header *:not(canvas) {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.ascii-art {
|
|
font-family: 'Amatic SC';
|
|
font-size: clamp(24px, 5vw, 36px);
|
|
font-weight: bold;
|
|
background-color: rgba(109, 226, 16, 0.58);
|
|
box-shadow: -3px -1px 1px 7px rgb(0, 107, 255);
|
|
color: #000000;
|
|
border: dotted 5px #ffc600;
|
|
border-radius: 28% 54%;
|
|
padding: 5px 25px;
|
|
margin-bottom: 10px;
|
|
animation: colorShift 5s infinite alternate;
|
|
}
|
|
|
|
@keyframes colorShift {
|
|
0% {
|
|
color: #ff4e87;
|
|
}
|
|
25% {
|
|
color: #ff7900;
|
|
}
|
|
50% {
|
|
color: #f33333;
|
|
}
|
|
75% {
|
|
color: #00ff17;
|
|
}
|
|
100% {
|
|
color: #0045ff;
|
|
}
|
|
}
|
|
|
|
.audio-controls {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.audio-controls button,
|
|
.audio-controls input[type="range"] {
|
|
width: 30px;
|
|
height: 25px;
|
|
background-color: #00a98c;
|
|
color: #fff200;
|
|
border: groove 2px #0bff6e;
|
|
border-radius: 10px 10px 10px 10px;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.audio-controls button.active {
|
|
background-color: #fb1111;
|
|
color: #165010;
|
|
border: ridge 2px #0bfffd;
|
|
border-radius: 10px 10px 10px 10px;
|
|
}
|
|
|
|
.audio-controls input[type="range"] {
|
|
width: 100px;
|
|
}
|
|
|
|
#elapsed-time {
|
|
font-size: 14px;
|
|
color: white;
|
|
min-width: 60px;
|
|
}
|
|
|
|
#wrapper {
|
|
position: relative;
|
|
top: calc(160px + 1em);
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
column-gap: 3em;
|
|
}
|
|
|
|
.converse-container {
|
|
width: 30vw;
|
|
max-width: 400px;
|
|
height: calc(100vh - 250px);
|
|
border: 1px dashed rgba(0, 255, 0, 0.75);
|
|
}
|
|
|
|
#scratchpad {
|
|
padding-top: 3em;
|
|
width: 50vw;
|
|
max-width: 700px;
|
|
height: calc(100vh - 250px);
|
|
}
|
|
|
|
#scratchpad > iframe {
|
|
display: block;
|
|
border: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
@media (width <= 1000px) {
|
|
|
|
#wrapper {
|
|
display: block;
|
|
}
|
|
|
|
.converse-container {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
margin: 0 auto;
|
|
height: calc((100vh - 250px) / 2);
|
|
}
|
|
|
|
#scratchpad {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
margin: 0 auto;
|
|
height: calc((100vh - 250px) / 2);
|
|
}
|
|
}
|
|
|
|
.conversejs .converse-chatboxes .chatbox .box-flyout {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.conversejs converse-chats.converse-embedded .chat-head {
|
|
display: none;
|
|
}
|
|
|
|
.conversejs converse-chats.converse-embedded .chatroom .box-flyout .chatroom-body .occupants {
|
|
display: none;
|
|
}
|
|
|
|
.conversejs converse-chats.converse-embedded.converse-singleton .chatbox {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.conversejs,
|
|
.conversejs.theme-dracula {
|
|
--current-line: #44475a;
|
|
--comment: #6272a4;
|
|
--cyan: #8be9fd;
|
|
--green: #50fa7b;
|
|
--orange: #ffb86c;
|
|
--pink: #ff79c6;
|
|
--purple: #bd93f9;
|
|
--red: #ff5555;
|
|
--yellow: #f1fa8c;
|
|
--background: #282a36;
|
|
--foreground: #f8f8f2;
|
|
--subdued-color: var(--comment);
|
|
--muc-color: var(--orange);
|
|
--chat-color: var(--green);
|
|
--disabled-color: var(--comment);
|
|
--error-color: var(--red);
|
|
--focus-color: var(--comment);
|
|
--headlines-color: var(--pink);
|
|
--headlines-head-text-color: var(--headlines-color);
|
|
--headlines-head-fg-color: var(--headlines-color);
|
|
--headlines-head-bg-color: var(--background);
|
|
--headline-message-color: var(--headlines-color);
|
|
--headline-separator-border-bottom: 2px solid var(--headlines-color);
|
|
--headlines-head-border-bottom: 0.15em solid var(--headlines-color);
|
|
--icon-hover-color: var(--cyan);
|
|
--gray-color: var(--comment);
|
|
--highlight-color: var(--foreground);
|
|
--highlight-color-darker: var(--comment);
|
|
--redder-orange: var(--muc-color);
|
|
--light-background-color: var(--background);
|
|
--chat-background-color: var(--background);
|
|
--chat-content-background-color: var(--background);
|
|
--chat-textarea-background-color: var(--background);
|
|
--chat-textarea-disabled-bg-color: var(--disabled-color);
|
|
--controlbox-pane-background-color: var(--background);
|
|
--controlbox-pane-bg-hover-color: var(--list-item-hover-color);
|
|
--chat-msg-hover-color: var(--current-line);
|
|
--chat-textarea-color: var(--foreground);
|
|
--close-color: var(--foreground);
|
|
--close-color-hover: var(--purple);
|
|
--global-background-color: var(--background);
|
|
--groupchats-header-color-dark: var(--muc-color);
|
|
--groupchats-header-color: var(--muc-color);
|
|
--img-thumbnail-background-color: var(--comment);
|
|
--img-thumbnail-border-color: black;
|
|
--modal-background-color: var(--background);
|
|
--occupants-background-color: var(--background);
|
|
--raised-el-shadow: 1px 1px 10px black;
|
|
--badge-color: var(--background);
|
|
--chatroom-correcting-color: var(--comment);
|
|
--chatroom-head-bg-color-dark: var(--muc-color);
|
|
--chatroom-head-bg-color: var(--background);
|
|
--chatroom-head-border-bottom: 0.15em solid var(--muc-color);
|
|
--chatroom-head-fg-color: var(--muc-color);
|
|
--chatroom-head-color: var(--muc-color);
|
|
--chatroom-head-description-link-color: var(--link-color);
|
|
--chatroom-message-input-border-top: 0.15em solid var(--muc-color);
|
|
--chatroom-separator-border-bottom: 0.15em solid var(--muc-color);
|
|
--muc-toolbar-btn-disabled-color: var(--disabled-color);
|
|
--occupants-border-left: 0.15em solid var(--muc-color);
|
|
--occupants-border-bottom: 0.15em solid var(--muc-color);
|
|
--chat-correcting-color: var(--comment);
|
|
--chat-head-border-bottom: 0.15em solid var(--chat-color);
|
|
--chat-head-fg-color: var(--chat-color);
|
|
--chat-head-color-dark: var(--chat-color);
|
|
--chat-head-color-darker: var(--chat-color);
|
|
--chat-head-color-lighten-50-percent: var(--chat-color);
|
|
--chat-head-color: var(--background);
|
|
--chat-head-text-color: var(--chat-color);
|
|
--chat-toolbar-btn-color: var(--chat-color);
|
|
--chat-toolbar-btn-color: var(--green);
|
|
--chatbox-message-input-border-top: 0.15em solid var(--chat-color);
|
|
--toolbar-btn-text-color: var(--background);
|
|
--unread-msgs-color: var(--yellow);
|
|
--panel-divider-color: var(--comment);
|
|
--chat-status-online: var(--green);
|
|
--chat-status-busy: var(--red);
|
|
--chat-status-away: var(--orange);
|
|
--chat-info-color: var(--orange);
|
|
--brand-heading-color: var(--cyan);
|
|
--completion-light-color: var(--pink);
|
|
--completion-normal-color: var(--red);
|
|
--completion-dark-color: var(--current-line);
|
|
--button-text-color: var(--background);
|
|
--button-hover-text-color: var(--background);
|
|
--controlbox-text-color: var(--foreground);
|
|
--message-text-color: var(--foreground);
|
|
--text-color: var(--foreground);
|
|
--text-color-lighten-15-percent: var(--yellow);
|
|
--text-color-invert: var(--background);
|
|
--message-author-color: var(--purple);
|
|
--controlbox-head-color: var(--purple);
|
|
--controlbox-head-btn-color: var(--subdued-color);
|
|
--message-receipt-color: var(--green);
|
|
--heading-color: var(--purple);
|
|
--inverse-link-color: var(--foreground);
|
|
--link-color: var(--cyan);
|
|
--dark-link-color: var(--cyan);
|
|
--link-hover-color: var(--green);
|
|
--primary-color: var(--purple);
|
|
--primary-color-dark: var(--purple);
|
|
--primary-color-light: var(--pink);
|
|
--danger-color-dark: var(--pink);
|
|
--danger-color: var(--pink);
|
|
--error-color: var(--red);
|
|
--info-color: var(--comment);
|
|
--secondary-color-dark: var(--cyan);
|
|
--secondary-color: var(--cyan);
|
|
--warning-color-dark: var(--orange);
|
|
--warning-color: var(--orange);
|
|
--list-toggle-color: var(--comment);
|
|
--list-toggle-hover-color: var(--comment);
|
|
--list-item-hover-color: var(--current-line);
|
|
--list-item-action-color: var(--comment);
|
|
--list-item-link-color: var(--foreground);
|
|
--list-item-link-hover-color: var(--link-color);
|
|
--list-item-open-color: var(--current-line);
|
|
--list-item-open-hover-color: var(--current-line);
|
|
--list-dot-circle-color: var(--orange);
|
|
--list-item-action-hover-color: var(--cyan);
|
|
--list-group-item-bg-color: var(--comment);
|
|
}
|
|
|
|
.conversejs,
|
|
.conversejs.theme-dracula {
|
|
--background: transparent;
|
|
--current-line: transparent;
|
|
--toolbar-btn-text-color: chocolate;
|
|
--chat-textarea-background-color: #ff69b3;
|
|
--subdued-color: aquamarine;
|
|
}
|
|
|
|
.conversejs .btn-primary {
|
|
background-color: #007bff;
|
|
}
|
|
|
|
.conversejs .btn {
|
|
color: turquoise;
|
|
}
|
|
|
|
.conversejs form .form-control::placeholder {
|
|
color: pink;
|
|
}
|
|
|
|
.conversejs converse-chats.converse-embedded .chat-textarea::placeholder {
|
|
color: cornsilk;
|
|
}
|
|
|
|
.conversejs .message.date-separator .separator-text, .conversejs .message.separator .separator-text {
|
|
background: blueviolet;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!--overlays-->
|
|
<div id="p5-container"></div>
|
|
|
|
<header>
|
|
<pre class="ascii-art">RADIO WORLDING</pre>
|
|
|
|
<audio id="myAudio" crossorigin="anonymous">
|
|
<!--<source src="https://radio.dianaband.in:8000/stream" type="audio/aac">-->
|
|
</audio>
|
|
|
|
<div class="audio-controls">
|
|
<button id="playBtn">▶</button>
|
|
<button id="pauseBtn">⏸</button>
|
|
<input type="range" id="volumeSlider" min="0" max="1" step="0.01" value="1" title="Volume">
|
|
<span id="elapsed-time">00:00</span>
|
|
</div>
|
|
</header>
|
|
|
|
<!--contextual-->
|
|
<div id="wrapper">
|
|
<div class="converse-container">
|
|
<converse-root></converse-root>
|
|
</div>
|
|
|
|
<div id="scratchpad">
|
|
<iframe src="https://pad.ururu.cloud/p/test?theme=unicorn&showChat=false&showLineNumbers=false" width=600 height=400>
|
|
</iframe>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
const myAudio = document.getElementById("myAudio");
|
|
const volumeSlider = document.getElementById("volumeSlider");
|
|
const elapsedTimeDisplay = document.getElementById("elapsed-time");
|
|
const playBtn = document.getElementById("playBtn");
|
|
const pauseBtn = document.getElementById("pauseBtn");
|
|
|
|
var ready = false;
|
|
|
|
volumeSlider.addEventListener("input", () => {
|
|
myAudio.volume = volumeSlider.value;
|
|
});
|
|
|
|
playBtn.addEventListener("click", () => {
|
|
//
|
|
getAudioContext().resume();
|
|
|
|
// activate radio by adding source tag
|
|
const audiotag = document.querySelector('#myAudio');
|
|
const sourcetag = document.createElement('source');
|
|
sourcetag.setAttribute('src', 'https://radio.dianaband.in:8000/stream');
|
|
sourcetag.setAttribute('type', 'audio/aac');
|
|
audiotag.appendChild(sourcetag);
|
|
audiotag.play();
|
|
//
|
|
playBtn.classList.add("active");
|
|
pauseBtn.classList.remove("active");
|
|
//
|
|
ready = true;
|
|
//
|
|
const mediaSource = getAudioContext().createMediaElementSource(audiotag);
|
|
mediaSource.connect(getAudioContext().destination);
|
|
fft = new p5.FFT(0.9, 64);
|
|
fft.setInput(mediaSource);
|
|
//
|
|
loop();
|
|
//
|
|
});
|
|
|
|
pauseBtn.addEventListener("click", () => {
|
|
myAudio.pause();
|
|
pauseBtn.classList.add("active");
|
|
playBtn.classList.remove("active");
|
|
});
|
|
|
|
setInterval(() => {
|
|
const seconds = Math.floor(myAudio.currentTime);
|
|
const min = String(Math.floor(seconds / 60)).padStart(2, '0');
|
|
const sec = String(seconds % 60).padStart(2, '0');
|
|
elapsedTimeDisplay.textContent = `${min}:${sec}`;
|
|
}, 1000);
|
|
|
|
//p5
|
|
|
|
let canvas;
|
|
var fft;
|
|
let t = 0;
|
|
|
|
function setup() {
|
|
canvas = createCanvas(windowWidth, 160);
|
|
canvas.id('p5-canvas');
|
|
canvas.parent(document.querySelector('#p5-container'));
|
|
|
|
colorMode(HSB, 360, 100, 100, 100);
|
|
noFill();
|
|
noLoop();
|
|
}
|
|
|
|
function draw() {
|
|
|
|
if (ready) {
|
|
// ready = false;
|
|
|
|
// const audioElement = document.getElementById("myAudio");
|
|
// const mediaSource = getAudioContext().createMediaElementSource(audioElement);
|
|
// mediaSource.connect(getAudioContext().destination);
|
|
// fft = new p5.FFT(0.9, 64);
|
|
// fft.setInput(mediaSource);
|
|
// }
|
|
|
|
clear();
|
|
|
|
const spectrum = fft.analyze();
|
|
// console.log(spectrum);
|
|
const bandWidth = width / spectrum.length;
|
|
|
|
const offset = height/2;
|
|
stroke(55, 80, 100);
|
|
strokeWeight(1);
|
|
noFill();
|
|
|
|
beginShape();
|
|
for (let i = 0; i < spectrum.length; i++) {
|
|
const x = i * bandWidth;
|
|
const yBase = map(spectrum[i], 0, 255, offset, offset/3);
|
|
const yWave = yBase + sin(t + i) * 8;
|
|
curveVertex(x, yWave);
|
|
}
|
|
endShape();
|
|
|
|
t += 0.03;
|
|
}
|
|
}
|
|
|
|
function windowResized() {
|
|
resizeCanvas(windowWidth, 160);
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
converse.initialize({
|
|
"allow_bookmarks": true,
|
|
"allow_contact_requests": true,
|
|
"allow_muc_invitations": true,
|
|
"allow_muc": true,
|
|
"allow_registration": false,
|
|
"assets_path": "https://cdn.conversejs.org/10.1.8/dist/",
|
|
"authentication": "anonymous",
|
|
"auto_away": 3000,
|
|
"auto_join_rooms": ["radioworld@groups.ururu.cloud"],
|
|
"auto_login": true,
|
|
"auto_reconnect": true,
|
|
"auto_xa": 9000,
|
|
"bosh_service_url": "https://ururu.cloud:5281/http-bind",
|
|
"debug": false,
|
|
"default_domain": "radio.world.ururu.cloud",
|
|
"discover_connection_methods": false,
|
|
"domain_placeholder": "radio.world.ururu.cloud",
|
|
"enable_smacks": true,
|
|
"jid": "radio.world.ururu.cloud",
|
|
"locked_muc_domain": true,
|
|
"loglevel": "debug",
|
|
"muc_domain": "groups.ururu.cloud",
|
|
"ping_interval": "30",
|
|
"roster_groups": true,
|
|
"show_controlbox_by_default": true,
|
|
"singleton": true,
|
|
"sticky_controlbox": true,
|
|
"synchronize_availability": false,
|
|
"trusted": true,
|
|
"view_mode": "embedded",
|
|
"websocket_url": "wss://ururu.cloud:5281/xmpp-websocket",
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |