Question 244120 in Html Question posted in
Some basic documentation can be found here.

Html – 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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks everyone! As pointed out by Tatyana Korshakova, the problem was KaiOS 2.5.1 browser using Gecko 48 browser engine. It is more outdated than I assumed. I learned that at some point Firefox and Gecko versions were synced, so to determine incompatible code I was able to refer to Firefox 48 on caniuse.com. Indeed, it does not support async/await, fetch API and many other things.


  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search