radio world version release!
This commit is contained in:
parent
3341711015
commit
b05f6253bd
4 changed files with 1714 additions and 59 deletions
528
index.html
528
index.html
|
|
@ -1,68 +1,486 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="kr">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<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>
|
||||||
|
<script src="https://cdn.conversejs.org/dist/converse.min.js"></script>
|
||||||
|
<link rel="stylesheet" type="text/css" media="screen" href="https://cdn.conversejs.org/dist/converse.min.css">
|
||||||
|
<script charset="utf-8" src="https://cdn.conversejs.org/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: rgb(145, 0, 255);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
<link rel="stylesheet" type="text/css" media="screen" href="https://cdn.conversejs.org/dist/converse.min.css" />
|
* {
|
||||||
|
scrollbar-width: none;
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
/* IE and Edge */
|
||||||
|
}
|
||||||
|
|
||||||
<script charset="utf-8" src="https://cdn.conversejs.org/dist/converse.min.js"></script>
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
<style>
|
#p5-canvas {
|
||||||
audio {
|
position: absolute;
|
||||||
position: fixed;
|
top: 0;
|
||||||
top: 0;
|
left: 0;
|
||||||
left: 0;
|
width: 100% !important;
|
||||||
z-index: 9999;
|
height: 100% !important;
|
||||||
}
|
z-index: 0;
|
||||||
</style>
|
}
|
||||||
|
|
||||||
<title>Blackhole</title>
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
position: absolute;
|
||||||
|
top: 160px;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
overflow-y: auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.converse-container {
|
||||||
|
position: relative;
|
||||||
|
top: 160px;
|
||||||
|
/* header height */
|
||||||
|
width: 70vw;
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
height: calc(100vh - 200px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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,
|
||||||
|
.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>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<audio controls>
|
<header>
|
||||||
<source src='https://radio.dianaband.in:8000/stream' type='audio/aac' />
|
<pre class="ascii-art">RADIO WORLDING</pre>
|
||||||
</audio>
|
|
||||||
|
|
||||||
<script>
|
<audio id="myAudio" crossorigin="anonymous">
|
||||||
converse.initialize({
|
<!--<source src="https://radio.dianaband.in:8000/stream" type="audio/aac">-->
|
||||||
"allow_bookmarks": true,
|
</audio>
|
||||||
"allow_contact_requests": true,
|
|
||||||
"allow_muc_invitations": true,
|
<div class="audio-controls">
|
||||||
"allow_muc": true,
|
<button id="playBtn">▶</button>
|
||||||
"allow_registration": false,
|
<button id="pauseBtn">⏸</button>
|
||||||
"assets_path": "https://cdn.conversejs.org/dist/",
|
<input type="range" id="volumeSlider" min="0" max="1" step="0.01" value="1" title="Volume">
|
||||||
"authentication": "anonymous",
|
<span id="elapsed-time">00:00</span>
|
||||||
"auto_away": 3000,
|
</div>
|
||||||
"auto_join_rooms": ["blackhole@groups.ururu.cloud"],
|
</header>
|
||||||
"auto_login": true,
|
|
||||||
"auto_reconnect": true,
|
<div id="p5-container"></div>
|
||||||
"auto_xa": 9000,
|
|
||||||
"bosh_service_url": "https://ururu.cloud:5281/http-bind",
|
<div class="converse-container">
|
||||||
"debug": true,
|
<converse-root></converse-root>
|
||||||
"default_domain": "blackhole.ururu.cloud",
|
</div>
|
||||||
"discover_connection_methods": false,
|
|
||||||
"domain_placeholder": "blackhole.ururu.cloud",
|
<script>
|
||||||
"enable_smacks": true,
|
const myAudio = document.getElementById("myAudio");
|
||||||
"jid": "blackhole.ururu.cloud",
|
const volumeSlider = document.getElementById("volumeSlider");
|
||||||
"locked_muc_domain": true,
|
const elapsedTimeDisplay = document.getElementById("elapsed-time");
|
||||||
"loglevel": "debug",
|
const playBtn = document.getElementById("playBtn");
|
||||||
"muc_domain": "groups.ururu.cloud",
|
const pauseBtn = document.getElementById("pauseBtn");
|
||||||
"ping_interval": "30",
|
|
||||||
"roster_groups": true,
|
var ready = false;
|
||||||
"show_controlbox_by_default": true,
|
|
||||||
"singleton": true,
|
volumeSlider.addEventListener("input", () => {
|
||||||
"sticky_controlbox": true,
|
myAudio.volume = volumeSlider.value;
|
||||||
"synchronize_availability": false,
|
});
|
||||||
"trusted": true,
|
|
||||||
"view_mode": "fullscreen",
|
playBtn.addEventListener("click", () => {
|
||||||
"websocket_url": "wss://ururu.cloud:5281/xmpp-websocket",
|
//
|
||||||
});
|
getAudioContext().resume();
|
||||||
</script>
|
|
||||||
|
// 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/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": true,
|
||||||
|
"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>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
486
test.html
Executable file
486
test.html
Executable file
|
|
@ -0,0 +1,486 @@
|
||||||
|
<!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>
|
||||||
|
<script src="https://cdn.conversejs.org/dist/converse.min.js"></script>
|
||||||
|
<link rel="stylesheet" type="text/css" media="screen" href="https://cdn.conversejs.org/dist/converse.min.css">
|
||||||
|
<script charset="utf-8" src="https://cdn.conversejs.org/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: rgb(145, 0, 255);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
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: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100% !important;
|
||||||
|
height: 100% !important;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
position: absolute;
|
||||||
|
top: 160px;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
overflow-y: auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.converse-container {
|
||||||
|
position: relative;
|
||||||
|
top: 160px;
|
||||||
|
/* header height */
|
||||||
|
width: 70vw;
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
height: calc(100vh - 200px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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,
|
||||||
|
.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 {
|
||||||
|
background: blueviolet;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<div id="p5-container"></div>
|
||||||
|
|
||||||
|
<div class="converse-container">
|
||||||
|
<converse-root></converse-root>
|
||||||
|
</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/dist/",
|
||||||
|
"authentication": "anonymous",
|
||||||
|
"auto_away": 3000,
|
||||||
|
"auto_join_rooms": ["blackhole@groups.ururu.cloud"],
|
||||||
|
"auto_login": true,
|
||||||
|
"auto_reconnect": true,
|
||||||
|
"auto_xa": 9000,
|
||||||
|
"bosh_service_url": "https://ururu.cloud:5281/http-bind",
|
||||||
|
"debug": true,
|
||||||
|
"default_domain": "blackhole.ururu.cloud",
|
||||||
|
"discover_connection_methods": false,
|
||||||
|
"domain_placeholder": "blackhole.ururu.cloud",
|
||||||
|
"enable_smacks": true,
|
||||||
|
"jid": "blackhole.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>
|
||||||
396
test2.html
Executable file
396
test2.html
Executable file
|
|
@ -0,0 +1,396 @@
|
||||||
|
<!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>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" type="text/css" media="screen" href="https://cdn.conversejs.org/dist/converse.min.css">
|
||||||
|
<script charset="utf-8" src="https://cdn.conversejs.org/dist/converse.min.js"></script>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
scrollbar-width: none;
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
/* IE and Edge */
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: rgb(145, 0, 255);
|
||||||
|
font-family: "Courier", 'GowunDodum-Regular', monospace;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100vh;
|
||||||
|
margin: 0;
|
||||||
|
row-gap: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#canvas-container {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ascii-art {
|
||||||
|
z-index: 0;
|
||||||
|
font-family: 'Amatic SC';
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: bold;
|
||||||
|
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: 20px;
|
||||||
|
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-direction: row;
|
||||||
|
gap: 10px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
button, input[type=range] {
|
||||||
|
background-color: #0080ff;
|
||||||
|
color: #fff200;
|
||||||
|
border: dotted 2px #fff200;
|
||||||
|
border-radius: 8px 10px 40px 20px;
|
||||||
|
font-size: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.active {
|
||||||
|
background-color: #fc1257;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=range] {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#elapsed-time {
|
||||||
|
font-size: 14px;
|
||||||
|
color: white;
|
||||||
|
min-width: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.converse-container {
|
||||||
|
width: 80vw;
|
||||||
|
height: 50vh;
|
||||||
|
max-width: 800px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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,
|
||||||
|
.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 {
|
||||||
|
background: blueviolet;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="canvas-container"></div>
|
||||||
|
|
||||||
|
<pre class="ascii-art">RADIO WORLDING</pre>
|
||||||
|
|
||||||
|
<audio id="myAudio">
|
||||||
|
<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>
|
||||||
|
<div class="converse-container">
|
||||||
|
<converse-root></converse-root>
|
||||||
|
</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");
|
||||||
|
|
||||||
|
volumeSlider.addEventListener("input", () => {
|
||||||
|
myAudio.volume = volumeSlider.value;
|
||||||
|
});
|
||||||
|
|
||||||
|
playBtn.addEventListener("click", () => {
|
||||||
|
myAudio.play();
|
||||||
|
playBtn.classList.add("active");
|
||||||
|
pauseBtn.classList.remove("active");
|
||||||
|
});
|
||||||
|
|
||||||
|
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);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
let t = 0;
|
||||||
|
|
||||||
|
function setup() {
|
||||||
|
const canvas = createCanvas(windowWidth, windowHeight);
|
||||||
|
canvas.parent('canvas-container');
|
||||||
|
noFill();
|
||||||
|
stroke('#0a5304');
|
||||||
|
strokeWeight(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
clear();
|
||||||
|
noFill();
|
||||||
|
stroke('#407e5a');
|
||||||
|
strokeWeight(2);
|
||||||
|
|
||||||
|
const waveCount = 1;
|
||||||
|
for (let j = 0; j < waveCount; j++) {
|
||||||
|
beginShape();
|
||||||
|
for (let x = 0; x < width; x += 1) {
|
||||||
|
const baseY = height / 5;
|
||||||
|
const amplitude = 1 + noise(x * 0.01, t) * 100;
|
||||||
|
const y = baseY + sin(x * 0.1 + t) * amplitude;
|
||||||
|
vertex(x, y);
|
||||||
|
}
|
||||||
|
endShape();
|
||||||
|
}
|
||||||
|
|
||||||
|
t += 0.025;
|
||||||
|
}
|
||||||
|
|
||||||
|
function windowResized() {
|
||||||
|
resizeCanvas(windowWidth, windowHeight);
|
||||||
|
}
|
||||||
|
</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/dist/",
|
||||||
|
"authentication": "anonymous",
|
||||||
|
"auto_away": 3000,
|
||||||
|
"auto_join_rooms": ["blackhole@groups.ururu.cloud"],
|
||||||
|
"auto_login": true,
|
||||||
|
"auto_reconnect": true,
|
||||||
|
"auto_xa": 9000,
|
||||||
|
"bosh_service_url": "https://ururu.cloud:5281/http-bind",
|
||||||
|
"debug": true,
|
||||||
|
"default_domain": "blackhole.ururu.cloud",
|
||||||
|
"discover_connection_methods": false,
|
||||||
|
"domain_placeholder": "blackhole.ururu.cloud",
|
||||||
|
"enable_smacks": true,
|
||||||
|
"jid": "blackhole.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>
|
||||||
355
test3.html
Executable file
355
test3.html
Executable file
|
|
@ -0,0 +1,355 @@
|
||||||
|
<!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://cdn.jsdelivr.net/npm/p5@1.11.7/lib/p5.min.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/p5.sound@0.2.0/dist/p5.sound.min.js"></script>
|
||||||
|
<script src="https://cdn.conversejs.org/dist/converse.min.js"></script>
|
||||||
|
<link rel="stylesheet" type="text/css" media="screen" href="https://cdn.conversejs.org/dist/converse.min.css">
|
||||||
|
<script charset="utf-8" src="https://cdn.conversejs.org/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: rgb(145, 0, 255);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
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: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100% !important;
|
||||||
|
height: 100% !important;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
header *:not(canvas) {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ascii-art {
|
||||||
|
font-family: 'Amatic SC';
|
||||||
|
font-size: clamp(24px, 5vw, 36px);
|
||||||
|
font-weight: bold;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
button, input[type=range] {
|
||||||
|
background-color: #0080ff;
|
||||||
|
color: #fff200;
|
||||||
|
border: dotted 2px #fff200;
|
||||||
|
border-radius: 8px 10px 40px 20px;
|
||||||
|
font-size: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.active {
|
||||||
|
background-color: #fc1257;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=range] {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#elapsed-time {
|
||||||
|
font-size: 14px;
|
||||||
|
color: white;
|
||||||
|
min-width: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
position: absolute;
|
||||||
|
top: 160px;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
overflow-y: auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.converse-container {
|
||||||
|
position: relative;
|
||||||
|
top: 160px;
|
||||||
|
/* header height */
|
||||||
|
width: 80vw;
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
height: calc(100vh - 200px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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,
|
||||||
|
.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 {
|
||||||
|
background: blueviolet;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
let mic, fft;
|
||||||
|
|
||||||
|
function setup() {
|
||||||
|
createCanvas(400, 400);
|
||||||
|
|
||||||
|
// Wait for user to start audio manually (needed for Safari)
|
||||||
|
getAudioContext().suspend();
|
||||||
|
let startButton = createButton('Start Audio');
|
||||||
|
startButton.position(10, 10);
|
||||||
|
startButton.mousePressed(() => {
|
||||||
|
userStartAudio().then(() => {
|
||||||
|
getAudioContext().resume();
|
||||||
|
mic = new p5.AudioIn();
|
||||||
|
mic.start(() => {
|
||||||
|
fft = new p5.FFT();
|
||||||
|
fft.setInput(mic);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
startButton.remove(); // Remove button after starting
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
background(0);
|
||||||
|
|
||||||
|
if (fft) {
|
||||||
|
let spectrum = fft.analyze();
|
||||||
|
noStroke();
|
||||||
|
fill(255);
|
||||||
|
for (let i = 0; i < spectrum.length; i++) {
|
||||||
|
let x = map(i, 0, spectrum.length, 0, width);
|
||||||
|
let h = -height + map(spectrum[i], 0, 255, height, 0);
|
||||||
|
rect(x, height, width / spectrum.length, h);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
fill(255);
|
||||||
|
text("Click 'Start Audio' to begin", 10, height / 2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in a new issue