Onclick is not working on Android

Card Design
1

I have a code snippet as follows:
When I click on any word, Anki will automatically play the corresponding audio clip.
However, the problem is that my code works fine on Windows but not on Android phones. When I click on a word, there is no audio played. Can you please guide me on where I might have gone wrong?

Here is an example of one of my flashcards. I would really appreciate it if you could take the time to test it:
Deck1

THANKS FOR READING!

This is my code (front card).

<div class="container-front">
  <hr style="width: 90%" />
  <div class="word" onclick="playAudio();">
    <div class="sound" style="display: none"><source src="{{Sound}}"</div>
    <div class="word">{{Word}}</div>
  </div>
  <div class="IPA">{{IPA}}</div>
  <hr style="width: 90%" />
  <div class="title">4000 Essentinal Words</div>
</div>

<script>
function playAudio() { 
  var audioDivs = document.querySelectorAll(".sound");
  audioDivs.forEach(function (audioDiv) {
    var audio = audioDiv.getElementsByTagName("*"); 
    audio[0].click();
  });
}
</script>

This is the back:

<div class="container-back">
  <div class="image">{{ Image }}</div>
  <div class="word-back" onclick="playAudioWord();">
    <div class="sound" style="display: none"><source src="{{ Sound }}"</div>
    <span>{{ Word }}</span>
  </div>
  <div class="IPA-back">{{ IPA }}</div>
  <div class="link">
    <a href="https://dictionary.cambridge.org/dictionary/english/{{ Word }}"
      >Cambridge</a
    >
    |
    <a
      href="http://tratu.coviet.vn/hoc-tieng-anh/tu-dien/lac-viet/A-V/{{
        Word
      }}.html"
      >Lac Viet</a
    >
    |
    <a
      href="https://translate.google.com/?sl=en&tl=vi&text={{
        Word
      }}&op=translate"
      >Google Translate</a
    >
		|
    <a
      href="https://www.ldoceonline.com/dictionary/{{
        Word
      }}\"
      >Longman</a
    >
  </div>
  <hr style="width: 90%" />
  <div class="meaning" onclick="playAudioMeaning();">
    <div class="sound_meaning" style="display: none">
      <source src="{{ Sound_Meaning }}"
    </div>
    <span>{{ Meaning }}</span>
  </div>
  <div class="example" onclick="playAudioExample();">
    <div class="sound_example" style="display: none">
      <source src="{{ Sound_Example }}"
    </div>
    <span>{{ Example }}</span>
  </div>
  <hr style="width: 90%" />
  <div class="title">4000 Essentinal Words</div>
</div>

<script>
  function playAudioWord() {
    var audioDivs = document.querySelectorAll(".sound");
    audioDivs.forEach(function (audioDiv) {
      var audio = audioDiv.getElementsByTagName("*");
      audio[0].click();
    });
  }
  function playAudioMeaning() {
    var audioDivs = document.querySelectorAll(".sound_meaning");
    audioDivs.forEach(function (audioDiv) {
      var audio = audioDiv.getElementsByTagName("*");
      audio[0].click();
    });
  }
  function playAudioExample() {
    var audioDivs = document.querySelectorAll(".sound_example");
    audioDivs.forEach(function (audioDiv) {
      var audio = audioDiv.getElementsByTagName("*");
      audio[0].click();
    });
  }
</script>

<script>
  function playAudio() {
    var audioDiv = document.getElementById("sound");
    var audio = audioDiv.getElementsByTagName("*");
    audio[0].click();
  }
</script>

And my css:

/*-------------- Windows --------------*/
/*-------------- Front --------------*/
/*Front container*/
.win .title {
	font-family: myfont;
	src: url("AnonymousPro-Regular.ttf");
  padding-right: 20px;
	text-align: right;
}

@font-face {
  font-family: myfont;
  src: url("FiraCode-Regular.ttf");
}

.win .container-front {
	padding: 20px;
	border-radius: 24px;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
	width: 400px;
	background: #2C3333;
  margin: 0 auto;
}

/*Từ tiếng Anh*/
.win .word {
	color: #0E8388;
	font-size: 24px;
	text-align: center;
	font-family: Arial;
	font-size: 55px;
	cursor: pointer;
}

/*Từ tiếng Việt*/
.win .IPA {
	color: white;
	text-align: center;
	font-size: 45px;
	padding-top: 0px;
	padding-bottom: 5px
	font-family: 'Poppin', cursive;
}

/*Đường kẻ ngang*/
hr {
	border: none;
	border-top: 2px solid white;
}
/*-------------- Back --------------*/
.win .container-back {
  margin-top: 100px;
  padding: 20px;
  border-radius: 24px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
  width: 400px;
  background: #2C3333;
  margin: 0 auto;
}


.win .word-back {
	color: #0E8388;
	font-size: 24px;
	text-align: center;
	font-family: Arial; 
	font-size: 55px;
	cursor: pointer;
}

/*Từ tiếng Việt*/
.win .IPA-back {
	color: white;
	text-align: center;
	font-size: 35px;
	padding-top: 0px;
	padding-bottom: 5px
	font-family: 'Poppin', cursive;
	cursor: pointer;
}

.win .image {
	width: 100%;  	
  margin: 0 auto;
}

.win .image img {
  border-radius: 10px;
  width: 100%;

}

.win .meaning {
	font-size: 20px;
	text-align: left;
	padding-left: 30px;
	cursor: pointer;
	font-weight: 500
}

.win .example {
	font-size: 20px;
	padding-left: 30px;
	font-style: italic;
	cursor: pointer;

}

.win .link {
	display: flex;
  justify-content: center;
	gap: 8px;
	font-weight: 400;
	font-size: 12px;
	line-height: 24px;
	letter-spacing: 0.01em;
	color:#BDBDBD;
}

.win .link a{
	color:#2D6A6A;
}

.win .link a:hover{
	transform: translateY(1px);
}

.win .nightMode .link a {
	color:#7CC6D6;
}


/*-------------- Android --------------*/
/*-------------- Front --------------*/
/*Front container*/
.android .title {
	font-family: myfont;
	src: url("AnonymousPro-Regular.ttf");
  padding-right: 20px;
	text-align: right;
}

@font-face {
  font-family: myfont;
  src: url("FiraCode-Regular.ttf");
}

.android .container-front {
	padding: 20px;
	border-radius: 24px;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
	width: 412px;
	background: #2C3333;
  margin: 0 auto;
}

/*Từ tiếng Anh*/
.android .word {
	color: #0E8388;
	font-size: 24px;
	text-align: center;
	font-family: Arial;
	font-size: 55px;
}

/*Từ tiếng Việt*/
.android .IPA {
	color: white;
	text-align: center;
	font-size: 45px;
	padding-top: 0px;
	padding-bottom: 5px
	font-family: 'Poppin', cursive;
}

/*Đường kẻ ngang*/
hr {
	border: none;
	border-top: 2px solid white;
}
/*-------------- Back --------------*/
.android .container-back {
  margin-top: 100px;
  padding: 20px;
  border-radius: 24px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
  width: 412px;
  background: #2C3333;
  margin: 0 auto;
}


.android .word-back {
	color: #0E8388;
	font-size: 24px;
	text-align: center;
	font-family: Arial; 
	font-size: 55px;
}

/*Từ tiếng Việt*/
.android .IPA-back {
	color: white;
	text-align: center;
	font-size: 35px;
	padding-top: 0px;
	padding-bottom: 5px
	font-family: 'Poppin', cursive;
	cursor: pointer;
}

.android .image {
	width: 100%;  	
  margin: 0 auto;
}

.android .image img {
  border-radius: 10px;
  width: 100%;

}

.android .meaning {
	font-size: 20px;
	text-align: left;
	padding-left: 30px;
	cursor: pointer;
	font-weight: 500
}

.android .example {
	font-size: 20px;
	padding-left: 30px;
	font-style: italic;
	cursor: pointer;

}

.android .link {
	display: flex;
  justify-content: center;
	gap: 8px;
	font-weight: 400;
	font-size: 12px;
	line-height: 24px;
	letter-spacing: 0.01em;
	color:#BDBDBD;
}

.android .link a{
	color:#2D6A6A;
}

.android .link a:hover{
	transform: translateY(1px);
}

.android .nightMode .link a {
	color:#7CC6D6;
}
2

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.