Add 'Play` audio on the site template for entries with 'audio' metadata.

Author: knadh

site/lang.json

@@ -14,6 +14,7 @@
     "public.noResultsTitle": "No results",
     "public.searchTitle": "\"{query}\" meaning",
     "public.similarTitle": "Similar words",
+    "public.playAudio": "Play audio",
     "public.subTitle": "English-Malayalam dictionary",
     "public.submitEntry": "Suggest new entry",
     "public.submitEntryTitle": "Suggest new entry",

site/results.html

@@ -8,12 +8,17 @@
             <li class="entry" data-guid="{{ $r.GUID }}" data-head="{{ $r.Content | join ", " }}">
                 <header class="head">
                     <div>
-                        <h3 class="title">{{ $r.Content | join ", " }}
+                        <div class="title-wrap">
+                            <h3 class="title">{{ $r.Content | join ", " }}</h3>
+
+                            {{- if $r.Meta.audio -}}
+                                <a href="{{ $r.Meta.audio }}" class="audio" data-audio><img src="/static/audio.svg?v={{ $.AssetVer }}" alt="{{ $.L.T "public.playAudio" }}"></a>
+                            {{- end -}}
+
                             {{- if $.Consts.EnableSubmissions -}}
                                 <a href="#" data-from="{{ $r.GUID }}" class="edit" title="{{ $.L.Ts "public.suggestEdit" "word" (index $r.Content 0) }}">✏️</a>
                             {{- end -}}
-                        </h3>
-
+                        </div>
 
                         {{- if $r.Phones -}}
                             <span class="pronun">♪ {{ $r.Phones | join "," }}</span>

site/static/main.js

@@ -153,6 +153,19 @@ async function screenshotElement(element) {
   });
 })();
 
+// Play audio.
+(() => {
+  document.querySelectorAll("a[data-audio]").forEach((el) => {
+    el.onclick = (e) => {
+      e.preventDefault();
+      const audio = new Audio(el.getAttribute("href"));
+      audio.play().catch((err) => {
+        console.error("error playing audio:", err);
+        alert("error playing audio");
+      });
+    };
+  });
+})();
 
 // Submission form.
 (() => {

site/static/style.css

@@ -274,6 +274,22 @@ button:hover,
   margin: 0;
 }
 
+.entries .title-wrap {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.entries .audio {
+  display: inline-block;
+  vertical-align: middle;
+  cursor: pointer;
+  transition: ease-in-out 0.035s;
+}
+.entries .audio:hover {
+  transform: scale(1.1);
+}
+
 .entries .pronun {
   color: var(--light);
 }
@@ -356,10 +372,8 @@ button:hover,
 }
 
 .entry .edit {
-  color: var(--white);
-  padding: 3px 10px;
+  padding: 3px;
   display: none;
-  position: absolute;
   text-decoration: none;
   z-index: 1000;
   line-height: 1;