Conditional Audio Playback

Anki Card Design
27

Oddly enough, your {{Back}} field is the issue. It shows the following in HTML view:

acabar<br>
terminar

This breaks the code though, because I didn’t think multiline strings would be needed here. For reference, the following wouldn’t break the code:

acabar<br>terminar

I solved this issue. I also substituted the missing language files with test files to verify that audio playback works. It now works fine for me using your example deck.
I only changed the var count =… line to multiline. But for reference, here is the entire front template:

<div class="background-layer {{Tags}}"></div>
<div class="word-type">{{WType}}</div>
<hr>
<span class="word {{F_Classes}}">{{Front}}</span> {{F_Audio}}

<script>
	// count how many <br> there are. Also see: https://stackoverflow.com/a/4009768
	var count = (`{{Back}}`.match(/<br>/g) || []).length;
	
	// check if item "did_run" exists in sessionStorage. This is necessary to make
	// the variable persist. Also see: https://forums.ankiweb.net/t/is-it-even-possible-to-persist-javascript-variables-on-ankidroid/19820/2?u=anon_0000
	// if it doesn't exist, then the audio in the front never played.
	if (!sessionStorage.getItem("did_run")) {
		// if count is above 0, then there is a synonym
		if (count > 0) {
			var audio = new Audio('_ding.ogg');
			audio.play();
		}
		
		// now set the "did_run" in sessionStorage. This makes it so that
		// the audio won't be replayed again, if the backside is viewed.
		sessionStorage.setItem("did_run", JSON.stringify("yes"));
	} else {
		// The sessionStorage entry exists, which means the audio played before.
		// The audio might have played in a previous card though (e.g. if you
		// review card A and then B, B wouldn't play the audio anymore because
		// "did_run" is set. That's an issue). To solve this, we clear the
		// storage every time.
		sessionStorage.clear();
	}
</script>

Except for updating the front card, there is nothing more you have to do. It should work this time.

1 Like