Audio in back template is played on front template on Desktop 2.1.46

I used following in my back template. However it will play the audio when I review the front.

<audio controls autoplay>
  <source src="{{SoundUrl}}" type="audio/mp3">

I guess Anki is preloading the back side or something.

Try adding this script to your back template:

<script>
var qa = document.getElementById("qa");
var options = {
  childList: true
}
var observer = new MutationObserver(() => {
  var audio = document.getElementById("back-audio");
  audio.play();
});
observer.observe(qa, options);
</script>

And change your audio tag to this:

<audio controls id="back-audio">
  <source src="{{SoundUrl}}" type="audio/mp3">
</audio>
1 Like

This issue is caused by my Pull Request. I’ve just pushed a fix.

2 Likes

@ abdo, I tried your code, However Desktop V2.1.46 always prompt me that as following pic. I can make the change in old version V2.1.44. image.

What does the preview section of template 4 in the card layout screen show? it should show more information as the message says.

First, @abdo, thanks for your help.

It’s my mistake. I overlooked the prompt message. I switched card type to template 4 and found the issue. I used a non-existed field in template 4.

The final script I used is as following. It can play the audio automatically when back template is showing

<audio controls id="back-audio">
  <source src="{{SoundUrl}}" type="audio/mp3">
</audio>
<script>
 var audio = document.getElementById("back-audio");
 audio.play();
</script>