I'm making a tiny website to open it in KaiOS browser (firmware version 2.5.1). No matter how I do it, the script part does not work at all, although on my PC browser the code runs just fine.
My HTML and JS code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Radio relay for KaiOS</title>
</head>
<body>
<h2>Radio relay for KaiOS browser</h1>
<a href="https://www.silver.ru/">Серебряный дождь</a>
<audio class="audio-station" controls src="http://silverrain.hostingradio.ru/silver128.mp3"></audio>
<p>Now playing: TBD</p>
<a href="https://asebeia.su/radio">Асебия</a>
<audio class="audio-station" id="asebeia-station" controls src="https://azura.asebeia.su/listen/music/radio.mp3"></audio>
<p id="now-playing-asebeia">Now playing: </p>
<p>for personal use by A.N., last update 4 Sep 2023</p>
<script src="/script.js"></script>
</body>
</html>
// to test on the actual device if .js file loads up correctly
// it does not :(
let a = document.createElement("h1");
a.innerHTML = "Hello";
document.querySelector("body").prepend(a);
function stopOtherStations(currentAudioElement) {
let audioElements = document.getElementsByTagName("audio");
Array.from(audioElements).forEach(element => {
if (element !== currentAudioElement) element.pause();
});
};
async function getAsebeiaNowPlaying() {
let response = await fetch("https://azura.asebeia.su/api/nowplaying/1");
let nowPlaying = await response.json();
return nowPlaying.now_playing.song.text;
};
window.onload = function (event) {
let audioElements = document.getElementsByTagName("audio");
Array.from(audioElements).forEach(element => {
element.addEventListener("play", (event) => {
stopOtherStations(element);
});
});
// asebeia-specific code
let audioAsebeia = document.getElementById("asebeia-station");
let intervalId;
audioAsebeia.addEventListener("playing", async (event) => {
let nowPlayingAsebeia = document.getElementById("now-playing-asebeia");
nowPlayingAsebeia.innerHTML = `Now playing: ${await getAsebeiaNowPlaying()}`;
intervalId = setInterval(async () => {
console.log(await getAsebeiaNowPlaying());
nowPlayingAsebeia.innerHTML = `Now playing: ${await getAsebeiaNowPlaying()}`;
}, 10000);
});
audioAsebeia.addEventListener("pause", (event) => {
clearInterval(intervalId);
});
};
I've tried various ways to load the script, including writing it inline. Does not work. I see no compatibility issues - the KaiOS browser should support ES6. The web app is actually deployed here: monkfish-app-4larl.ondigitalocean.app
KaiOS 2.5.x based on Gecko 48 You cannot use such function like await, async, etc
Before use some functions on KaiOS, check do it supported on Gecko 48