[AnkiMobile] Auto-advance vs. html audio element?

Anki Card Design
20

Thank you so much Damien, now it works beautifully on Anki Mobile ! :slight_smile:

A few details for others who might need to do the same :

On front side I replaced the flipToBack function from my last example to :

<script>
	// flipToBack reference to https://github.com/git9527/anki-awesome-select
	function flipToBack() {
		if (typeof pycmd !== "undefined") {
			pycmd("ans")
		} else if (typeof study !== "undefined") {
			study.drawAnswer()
		} else if (typeof AnkiDroidJS !== "undefined") {
			showAnswer()
		} else {		webkit.messageHandlers.cb.postMessage(JSON.stringify({scheme:"ankitap", msg:"midCenter"}));
		}
	}


</script>

This auto flips to Back card in Anki Mobile !

Now some problem remained for me on the back card. For some reason, I couldnā€™t immediately re-use that webkit function. But it works if you add some delay.
(Also make sure to have your AnkiMobile tap settings set similarly to my screenshot in previous post, the mid center tap needs to be set to answer good or hard)

First I tried using the following, which works ok :

<script>
		setTimeout(() => {    		webkit.messageHandlers.cb.postMessage(JSON.stringify({scheme:"ankitap", msg:"midCenter"}));
		}, 2000);   /// change delay time in milliseconds here
</script>

It was fine but in my case, I wanted to adjust the exact timing based on the audio length of the previous card. So I just copied the code from my front card, and adapted it to only play a single time the audio, but muted.

So my back templated ended up looking like this :

<audio controls id="player">
<script>
	{
        const audios = Array(1).fill(`{{Audio}}`);
        const player = document.getElementById("player");
        let index = 0;
        player.addEventListener("ended", () => {
            if (++index < audios.length) {
                player.src = audios[index];
              player.muted = index % 2;
              player.playbackRate = {{Speed}};
              player.play();
            } else {
               flipToBack()
            }
        });
        player.src = audios[index];
		   player.muted = 1;
        player.playbackRate = {{Speed}}
        player.play();
    }
</script>

Anyway, thatā€™s a huge lifesaver, with this I can now refine parameters for my pseudo-Glossika system, start importing my own sentences, experiment with playback parametersā€¦

Many thanks again @dae :slight_smile: !