radio world version release!
This commit is contained in:
parent
3341711015
commit
b05f6253bd
4 changed files with 1714 additions and 59 deletions
536
index.html
536
index.html
|
|
@ -1,68 +1,486 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<html lang="kr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<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;
|
||||
}
|
||||
|
||||
<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>
|
||||
audio {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
}
|
||||
</style>
|
||||
|
||||
<title>Blackhole</title>
|
||||
#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, .conversejs .message.separator .separator-text {
|
||||
background: blueviolet;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<audio controls>
|
||||
<source src='https://radio.dianaband.in:8000/stream' type='audio/aac' />
|
||||
</audio>
|
||||
|
||||
<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": "fullscreen",
|
||||
"websocket_url": "wss://ururu.cloud:5281/xmpp-websocket",
|
||||
});
|
||||
</script>
|
||||
|
||||
</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": ["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>
|
||||
</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