4 files changed, 73 insertions, 0 deletions
diff --git a/anki-card-template/card.css b/anki-card-template/card.css
index 0506765..1c7444e 100644
--- a/anki-card-template/card.css
+++ b/anki-card-template/card.css
@@ -575,3 +575,39 @@ rt { user-select: none; }
 	width: 0;
 	white-space: nowrap;
 }
+
+/* make elements within this class display on one line */
+.vertical-layout .flex-line { flex-direction: column; }
+.horizontal-layout .flex-line { flex-direction: row; }
+.flex-line {
+	display: flex !important;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: center;
+	gap: 0;
+}
+
+/* display:none utility class */
+.display-none { display: none; }
+
+/* play audio button size */
+.mobile .replay-button svg {
+	width: 48px !important;
+	height: 48px !important;
+}
+.replay-button svg {
+	width: 24px !important;
+	height: 24px !important;
+}
+
+/* maximize size of touch target (for mobile) */
+.replay-button {
+	margin: 0px !important;
+	padding: 6px; /* max allowed padding w/o changing page layout */
+	color: var(--fg);
+}
+/* force play icon to be same as text color */
+.replay-button svg path {
+	fill: currentColor !important;
+}
+
diff --git a/anki-card-template/card.html b/anki-card-template/card.html
index 5e17eb9..866d0d9 100644
--- a/anki-card-template/card.html
+++ b/anki-card-template/card.html
@@ -16,6 +16,24 @@
 		bottom: 0;
 		margin: 1em;
 	}
+	/* from reviewer.css */
+	.replay-button {
+		text-decoration: none;
+		display: inline-flex;
+		vertical-align: middle;
+		margin: 3px;
+	}
+	.replay-button svg {
+		width: 40px;
+		height: 40px;
+	}
+	.replay-button svg circle {
+		fill: #fff;
+		stroke: #414141;
+	}
+	.replay-button svg path {
+		fill: #414141;
+	}
 	</style>
 </head>
 <body>
@@ -26,12 +44,17 @@
 </div>
 <hr id="separator">
 <div id="back">
+<span class="flex-line">
 <span id="target-word-reading" class="parse parse-format parse-reading parse-indicators parse-script foreign">見舞われる,他の書き方、書き方３【み・まわれる】[0] (note)</span>
+<span id="audio"><a class="replay-button soundLink" href="#" onclick="pycmd('play:a:0'); return false;"><svg class="playImage" viewBox="0 0 64 64" version="1.1"><circle cx="32" cy="32" r="29"></circle><path d="M56.502,32.301l-37.502,20.101l0.329,-40.804l37.173,20.703Z"></path></svg></a></span>
+</span>
 <span id="target-word-translation" class="parse parse-format parse-definitions parse-indicators parse-script native">[verb] To experi\ence {crisis}, [な-adj] to <span class="inline spoiler hidden parse">undergo</span>, [テスト] to suffer {test,テスト,test} (this is, a single item)\, and still is here, [ば\-test] but not here</span>
 <span id="sentence-translation" class="parse parse-format native spoiler parse-script hidden">This village is now in danger of *extinction* because of _Vah Ruta_, the water divine beast.</span>
 <span id="tags" class="parse parse-tags">ゼルダの伝説 ブレス・オブ・ザ・ワイルド</span>
 </div>
 
+<svg id="play-icon" class="display-none" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M8 6.82v10.36c0 .79.87 1.27 1.54.84l8.14-5.18c.62-.39.62-1.29 0-1.69L9.54 5.98C8.87 5.55 8 6.03 8 6.82z"/></svg>
+
 <style>
 #card.front #dev-button-flip::after { content: "front"; }
 #card.back #dev-button-flip::after { content: "back"; }
diff --git a/anki-card-template/card.js b/anki-card-template/card.js
index 23dab93..193e7fe 100644
--- a/anki-card-template/card.js
+++ b/anki-card-template/card.js
@@ -419,6 +419,15 @@ function run() {
 		document.getElementById("sentence-translation").classList.add("visible");
 	}
 
+	// replace ugly anki play icon with material design icon
+	for (var el of document.querySelectorAll("#audio .replay-button")) {
+		el.innerHTML = document.getElementById("play-icon").outerHTML;
+		el.children[0].classList.remove("display-none");
+	}
+
+	var audio = document.getElementById("audio");
+	if (audio.innerText.trim() == "noaudio") audio.classList.add("display-none");
+
 	layout();
 }
 
diff --git a/anki-card-template/template.html.m4 b/anki-card-template/template.html.m4
index 88e1f68..8ad0795 100644
--- a/anki-card-template/template.html.m4
+++ b/anki-card-template/template.html.m4
@@ -9,12 +9,17 @@ include(`common.m4')dnl
 </div>
 <hr id="separator">
 <div id="back">
+<span class="flex-line">
 <span id="target-word-reading" class="parse parse-format parse-reading parse-indicators parse-script foreign">{{Target word reading}}</span>
+<span id="audio">{{ Audio }}</span>
+</span>
 <span id="target-word-translation" class="parse parse-format parse-definitions parse-indicators parse-script native">{{Target word translation}}</span>
 <span id="sentence-translation" class="parse parse-format native spoiler parse-script hidden">{{Complete sentence translation}}</span>
 <span id="tags" class="parse parse-tags">{{Tags}}</span>
 </div>
 </div>
 
+<svg id="play-icon" class="display-none" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M8 6.82v10.36c0 .79.87 1.27 1.54.84l8.14-5.18c.62-.39.62-1.29 0-1.69L9.54 5.98C8.87 5.55 8 6.03 8 6.82z"/></svg>
+
 <style>undivert(`card.min.css')</style>
 <script defer>undivert(`card.min.js')</script>