javascripthtmlkaios

Loading JavaScript on a website in KaiOS browser

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

Solution

  • 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