Fix audio records in android app

aecsocket · aecsocket · commit d4cdc9808100 · 2025-06-14T04:20:35.000Z
diff --git a/crates/wordbase-cli/src/query.rs b/crates/wordbase-cli/src/query.rs
@@ -1,12 +1,8 @@
 use {
     anyhow::{Context, Result},
-    itertools::Itertools,
     std::time::Instant,
     tracing::info,
-    wordbase::{
-        Engine, Profile, RecordId, RecordKind,
-        render::{HtmlRender, RenderConfig},
-    },
+    wordbase::{Engine, Profile, RecordKind, render::RenderConfig},
 };
 
 pub fn deinflect(engine: &Engine, text: &str) {
@@ -33,36 +29,22 @@ pub async fn render(engine: &Engine, profile: &Profile, text: &str) -> Result<()
     info!("Fetched records in {:?}", end.duration_since(start));
 
     let start = Instant::now();
-    let HtmlRender { body, audio_blobs } = engine
-        .render_html(
+    let body = engine
+        .render_html_body(
             &records,
             &RenderConfig {
                 s_add_note: "Add Card".into(),
                 fn_add_note: Some("unimplemented".into()),
-                fn_audio_blob: "Wordbase.audio_blob".into(),
             },
         )
         .context("failed to render HTML")?;
 
-    let audio_blobs = audio_blobs
-        .into_iter()
-        .map(|(RecordId(record_id), blob)| format!("{record_id}: '{blob}'"))
-        .join(",");
-
-    let js = format!(
-        "Wordbase.audio_blob = function(record_id) {{
-            const audio_blobs = {{ {audio_blobs} }};
-            return audio_blobs[record_id];
-        }}"
-    );
-
     let document = format!(
         "
 <!doctype html>
 <html>
     <body>
         {body}
-        <script>{js}</script>
         <style>{EXTRA_CSS}</style>
     </body>
 </html>
diff --git a/crates/wordbase/src/records.html b/crates/wordbase/src/records.html
@@ -245,34 +245,11 @@
   }
 </style>
 {% endmacro style %}
-
+</html></title></head>
 <!-- {# content #} -->
 
 {{ self::style() }}
 
-<script>
-  class Wordbase {
-    static audio = {};
-
-    static audio_for_record(record_id) {
-      if (this.audio[record_id]) {
-        return this.audio[record_id];
-      } else {
-        const blob = {{ config.fn_audio_blob }}(record_id);
-        const audio = new Audio(blob);
-        this.audio[record_id] = audio;
-        return audio;
-      }
-    }
-
-    static play_audio_for_record(record_id) {
-      const audio = this.audio_for_record(record_id);
-      audio.currentTime = 0;
-      audio.play();
-    }
-  }
-</script>
-
 <div style="display: none">
   <svg
     id="speakers-symbolic"
@@ -339,11 +316,13 @@
           {%- endfor -%}
         </span>
         {% for audio in pitch.audio %}
+        <audio src="{{ audio.blob | safe }}"></audio>
+
         <button
           class="pill"
           style="width: 2em; height: 2em; padding: 4px"
           title="{{ self::audio_kind_name(kind=audio.kind) }}"
-          onclick="Wordbase.play_audio_for_record({{ audio.record_id }})"
+          onclick="this.previousElementSibling.play()"
         >
           <svg class="icon">
             <use href="#speakers-symbolic"></use>
@@ -357,7 +336,9 @@
 
       {% for source, audio_group in group.audio_no_pitch %} {% for audio in
       audio_group %}
-      <button onclick="Wordbase.play_audio_for_record({{ audio.record_id }})">
+      <audio src="{{ audio.blob | safe }}"></audio>
+
+      <button onclick="this.previousElementSibling.play()">
         <svg class="icon">
           <use href="#speakers-symbolic"></use>
         </svg>
diff --git a/crates/wordbase/src/render.rs b/crates/wordbase/src/render.rs
@@ -1,12 +1,10 @@
-use std::collections::HashMap;
-
 use anyhow::{Context, Result};
 use arc_swap::ArcSwap;
 use data_encoding::BASE64;
 use foldhash::HashSet;
 use serde::Serialize;
 use tera::Tera;
-use wordbase_api::{DictionaryId, Record, RecordEntry, RecordId, RecordKind, Term, dict};
+use wordbase_api::{DictionaryId, Record, RecordEntry, RecordKind, Term, dict};
 
 use crate::{Engine, IndexMap, lang};
 
@@ -27,20 +25,29 @@ impl Renderer {
 }
 
 impl Engine {
-    /// Renders the results of [`Engine::lookup`] to parts of an HTML document,
-    /// so you can display it to the user in a web view or similar.
+    /// Renders the results of [`Engine::lookup`] to the `<body>` contents of
+    /// an HTML document, so you can display it to the user in a web view or
+    /// similar.
+    ///
+    /// To get a valid HTML document, you will need to add:
+    /// - `<!doctype html>`
+    /// - `<html></html>`
+    /// - `<body></body>`
+    ///
+    /// You can also include your own HTML to further customize the output,
+    /// such as adding your own `<style>` block.
     ///
     /// # Errors
     ///
     /// Errors if the HTML template cannot be rendered by [`tera`]. This should
     /// not happen normally, but if you are modifying the template and
     /// hot-reloading it, then this may error. It is usually safe to just
     /// `expect` this to be [`Ok`].
-    pub fn render_html(
+    pub fn render_html_body(
         &self,
         entries: &[RecordEntry],
         config: &RenderConfig,
-    ) -> Result<HtmlRender> {
+    ) -> Result<String> {
         let terms = group_terms(entries);
 
         let mut context = tera::Context::new();
@@ -49,57 +56,10 @@ impl Engine {
         context.insert("config", config);
         let body = self.renderer.tera.load().render("records.html", &context)?;
 
-        Ok(HtmlRender {
-            body,
-            audio_blobs: render_audio_blobs(entries),
-        })
+        Ok(body)
     }
 }
 
-/// Parts of an HTML document rendered by [`Engine::render_html`].
-///
-/// This intentionally does not contain a complete HTML document, since you must
-/// do some extra platform-specific things to be able to render this in a web
-/// view.
-///
-/// [`HtmlRender::body`] holds the main HTML content of the rendering, but it
-/// does not contain some assets such as audio blobs. This is because the
-/// base 64 audio blobs may be very large, and platforms such as Android's
-/// default web view cannot handle that much data in an HTML document.
-///
-/// Finally, you must wrap the HTML content in:
-/// - `<!doctype html>`
-/// - `<html>`
-/// - `<body>`
-#[derive(Debug, Clone)]
-#[cfg_attr(feature = "uniffi", derive(uniffi::Record))]
-pub struct HtmlRender {
-    /// Main HTML body content of the render.
-    pub body: String,
-    pub audio_blobs: HashMap<RecordId, String>,
-}
-
-fn render_audio_blobs(entries: &[RecordEntry]) -> HashMap<RecordId, String> {
-    entries
-        .iter()
-        .filter_map(|record| {
-            if let Record::YomichanAudioForvo(dict::yomichan_audio::Forvo { audio, .. })
-            | Record::YomichanAudioJpod(dict::yomichan_audio::Jpod { audio })
-            | Record::YomichanAudioNhk16(dict::yomichan_audio::Nhk16 { audio, .. })
-            | Record::YomichanAudioShinmeikai8(dict::yomichan_audio::Shinmeikai8 {
-                audio,
-                ..
-            }) = &record.record
-            {
-                let blob = audio_blob(audio);
-                Some((record.record_id, blob))
-            } else {
-                None
-            }
-        })
-        .collect()
-}
-
 #[derive(Debug, Clone, Serialize)]
 #[cfg_attr(feature = "uniffi", derive(uniffi::Record))]
 pub struct RenderConfig {
@@ -111,15 +71,6 @@ pub struct RenderConfig {
     /// - `headword`: `string?`
     /// - `reading`: `string?`
     pub fn_add_note: Option<String>,
-    /// JavaScript function name to return a [`HtmlRender::audio_blobs`] string
-    /// for a given record ID.
-    ///
-    /// Arguments:
-    /// - `record_id`: `number`
-    ///
-    /// Returns:
-    /// - `string` - corresponding audio blob from [`HtmlRender::audio_blobs`].
-    pub fn_audio_blob: String,
 }
 
 pub fn group_terms(entries: &[RecordEntry]) -> Vec<RecordTerm> {
@@ -172,22 +123,19 @@ pub fn group_terms(entries: &[RecordEntry]) -> Vec<RecordTerm> {
             Record::YomichanAudioForvo(audio) => {
                 info.audio_no_pitch.entry(source).or_default().push(Audio {
                     kind: RecordKind::YomichanAudioForvo,
-                    mime_type: audio_mime_type(&audio.audio),
-                    record_id: record.record_id,
+                    blob: audio_blob(&audio.audio),
                 });
             }
             Record::YomichanAudioJpod(audio) => {
                 info.audio_no_pitch.entry(source).or_default().push(Audio {
                     kind: RecordKind::YomichanAudioJpod,
-                    mime_type: audio_mime_type(&audio.audio),
-                    record_id: record.record_id,
+                    blob: audio_blob(&audio.audio),
                 });
             }
             Record::YomichanAudioNhk16(audio) => {
                 let conv = Audio {
                     kind: RecordKind::YomichanAudioNhk16,
-                    mime_type: audio_mime_type(&audio.audio),
-                    record_id: record.record_id,
+                    blob: audio_blob(&audio.audio),
                 };
                 if audio.pitch_positions.is_empty() {
                     info.audio_no_pitch.entry(source).or_default().push(conv);
@@ -210,8 +158,7 @@ pub fn group_terms(entries: &[RecordEntry]) -> Vec<RecordTerm> {
             Record::YomichanAudioShinmeikai8(audio) => {
                 let conv = Audio {
                     kind: RecordKind::YomichanAudioShinmeikai8,
-                    mime_type: audio_mime_type(&audio.audio),
-                    record_id: record.record_id,
+                    blob: audio_blob(&audio.audio),
                 };
                 if let Some(pos) = audio.pitch_number {
                     info.pitches
@@ -285,8 +232,7 @@ pub fn base_pitch<'a>(term: &Term, downstep: dict::jpn::PitchPosition) -> Pitch<
 #[derive(Debug, Clone, Serialize)]
 pub struct Audio {
     pub kind: RecordKind,
-    pub mime_type: &'static str,
-    pub record_id: RecordId,
+    pub blob: String,
 }
 
 fn audio_mime_type(audio: &dict::yomichan_audio::Audio) -> &'static str {
@@ -308,12 +254,12 @@ const _: () = {
 
     #[uniffi::export]
     impl Wordbase {
-        pub fn render_html(
+        pub fn render_html_body(
             &self,
             entries: &[RecordEntry],
             config: &RenderConfig,
-        ) -> FfiResult<HtmlRender> {
-            Ok(self.0.render_html(entries, config)?)
+        ) -> FfiResult<String> {
+            Ok(self.0.render_html_body(entries, config)?)
         }
     }
 };
diff --git a/wordbase-android/app/src/main/java/io/github/aecsocket/wordbase/RecordsView.kt b/wordbase-android/app/src/main/java/io/github/aecsocket/wordbase/RecordsView.kt
@@ -227,15 +227,13 @@ fun RawRecordsView(
         }
     }
 
-
     val sAddNote = stringResource(R.string.add_note)
     val document by derivedStateOf {
-        val html = wordbase.renderHtml(
+        val body = wordbase.renderHtmlBody(
             entries = entries,
             config = RenderConfig(
                 sAddNote = sAddNote,
                 fnAddNote = "WordbaseAndroid.addNote",
-                fnAudioBlob = "WordbaseAndroid.audioBlob",
             ),
         )
 
@@ -245,7 +243,7 @@ fun RawRecordsView(
         <!doctype html>
         <html>
             <body>
-                ${html.body}
+                $body
                 <style>$extraCss</style>
             </body>
         </html>
