126 lines
4.3 KiB
HTML
126 lines
4.3 KiB
HTML
<!doctype html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>AsciiRadio</title>
|
|
<link rel="stylesheet" href="/style.css" />
|
|
<link rel="stylesheet" href="/xterm.css" />
|
|
<script src="/xterm.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- <div id="overlay" onclick="unmute_func()">
|
|
<div id="overlayText">Click to Unmute</div>
|
|
</div> -->
|
|
<div id="stream">
|
|
<audio id="audio" src="/audio" muted autoplay></audio>
|
|
<!-- https://stackoverflow.com/questions/22918220/how-to-create-a-only-mute-unmute-button-like-youtube-in-html#22918864 --->
|
|
<input type="checkbox" name="mute-button" id="mute-button" checked>
|
|
<label for="mute-button" class="unmute">
|
|
<img src="http://upload.wikimedia.org/wikipedia/commons/3/3f/Mute_Icon.svg" alt="Mute_Icon.svg" title="Mute icon" class="mute-img">
|
|
</label>
|
|
<label for="mute-button" class="mute">
|
|
<img src="http://upload.wikimedia.org/wikipedia/commons/2/21/Speaker_Icon.svg" alt="Speaker_Icon.svg" title="Unmute/speaker icon" class="mute-img">
|
|
</label>
|
|
<input type="range" min="0" max="100" value="0" class="slider" id="volume" onchange="slider_volume()" onmousemove="slider_volume()" ontouchmove="slider_volume()">
|
|
<button id="toggle_chat" onclick="toggle_chat_func()">hide chat</button>
|
|
|
|
Welcome to Johan's stream at asciiradio.johanv.net! Soon this will be open for anyone to sign up and stream text+audio.
|
|
main site: <a target="_blank" href="https://johanv.net">johanv.net</a>
|
|
| old streams: <a target="_blank" href="https://odysee.com/@johanv">odysee (VODs)</a>
|
|
| stream announcements:
|
|
<a target="_blank" href="https://fosstodon.org/@johanv">mastodon (stream announcements)</a>
|
|
| this site is <a href="https://codeberg.org/johanvandegriff/asciiradio">open source.</a>
|
|
<div id="terminal"></div>
|
|
</div>
|
|
<div id="chat">
|
|
<ul id="messages"></ul>
|
|
<form id="form" action="">
|
|
name: <input id="name" autocomplete="off" /><br/>
|
|
<input id="m" autocomplete="off" autofocus />
|
|
<button>send</button>
|
|
</form>
|
|
</div>
|
|
|
|
<script src="/socket.io/socket.io.js"></script>
|
|
<script>
|
|
var term = new Terminal();
|
|
term.resize(127, 35); //large laptop, 3 zooms
|
|
//term.resize(135, 40); //small laptop 3 zooms
|
|
//term.resize(112, 33); //small laptop, 2 zooms
|
|
//term.setOption("fontSize", 12);
|
|
term.open(document.getElementById('terminal'));
|
|
|
|
var socket = io();
|
|
socket.on('terminal', function (data) {
|
|
console.log('terminal data received, length:', data.length)
|
|
term.write(data.replace(/\n/g, '\n\r'));
|
|
});
|
|
|
|
|
|
|
|
|
|
var a = document.getElementById("audio");
|
|
var mute_button = document.getElementById('mute-button');
|
|
var oldVol = 50;
|
|
|
|
mute_button.onclick = function() {
|
|
if (mute_button.checked) {
|
|
oldVol = document.getElementById('volume').value;
|
|
document.getElementById('volume').value = 0;
|
|
} else {
|
|
document.getElementById('volume').value = oldVol;
|
|
a.volume=document.getElementById('volume').value/100;
|
|
a.muted = false;
|
|
}
|
|
set_volume();
|
|
};
|
|
|
|
|
|
//a.autoplay = true;
|
|
a.oncanplay=() => {a.play()};
|
|
|
|
function unmute_func() {
|
|
a.muted = false;
|
|
mute_button.click();
|
|
document.getElementById('volume').value = oldVol;
|
|
a.volume=document.getElementById('volume').value/100;
|
|
set_volume();
|
|
//if (a.buffered.length > 0) {
|
|
// a.currentTime = a.buffered.end(a.buffered.length-1);
|
|
//}
|
|
a.play();
|
|
console.log("unmuted");
|
|
|
|
document.getElementById("overlay").style.display = "none";
|
|
}
|
|
|
|
function slider_volume() {
|
|
set_volume();
|
|
if (a.volume == 0) oldVol = 5;
|
|
}
|
|
|
|
function set_volume() {
|
|
a.volume=document.getElementById('volume').value/100;
|
|
mute_button.checked = a.volume == 0
|
|
if (a.volume > 0) oldVol = document.getElementById('volume').value;
|
|
}
|
|
set_volume();
|
|
|
|
var toggle_chat = document.getElementById("toggle_chat");
|
|
var chat = document.getElementById("chat");
|
|
function toggle_chat_func() {
|
|
if(toggle_chat.innerText == "hide chat") {
|
|
chat.style.display = "none";
|
|
toggle_chat.innerText = "show chat";
|
|
} else {
|
|
chat.style.display = "initial";
|
|
toggle_chat.innerText = "hide chat";
|
|
}
|
|
}
|
|
</script>
|
|
<script src="/chat.js"></script>
|
|
</body>
|
|
|
|
</html>
|