Anki cards are created without audio

[KiRa937]

Description
Hi! I've set up the Yomichan extension with Anki mining deck, but Anki cards are made without audio.

I've followed this guide to setup Yomichan: got the extension, dictionaries, AnkiConnect, template mining deck and guide's handlebars. Yomichan itself works fine and I can hear audio from the pop ups. But when I add the card, there is nothing in the Audio field.
I'm also using mpv script from the same site and it imports subtitles' audio just fine.

I've tried recreating cards over and over - nothing.
Double checked "{audio}" in the field - nothing.
Checked both Card and Field of the deck - everything is in place.
I've used Jisho and both of JPods as audio sources without TtS - nothing.
I've tried adding 読む and 人 (these definitely should have audio, right?) - nothing.
I've tried default handlebars just in case - nothing.

Browser version
Chrome 101.0.4951.67 (Official Build) (64-bit)

Yomichan version
Yomichan 22.4.4.0

Exported settings file
yomichan-settings-2022-05-22.zip

[toasted-nutbread]

Tested using your settings and it seems to work for me. Do you see any error in the popup after adding the card?

For debugging, you could try adding the following template:

{{#*inline "test2"}}{{#dumpObject}}{{{.}}}{{/dumpObject}}{{/inline}}

And then set one of the fields to {test2}, generate a card, and share what this field value outputs.

[KiRa937]

No errors.

Here's the result of {test2}:

{
  "marker": "test2",
  "definition": {
    "type": "termGrouped",
    "source": "読め",
    "rawSource": "読め",
    "sourceTerm": "読む",
    "reasons": [
      "imperative"
    ],
    "score": 724,
    "sequence": -1,
    "dictionary": "JMdict",
    "dictionaryOrder": {
      "index": 0,
      "priority": 2
    },
    "dictionaryNames": [
      "JMdict",
      "新和英"
    ],
    "expression": "読む",
    "reading": "よむ",
    "expressions": [
      {
        "sourceTerm": "読む",
        "expression": "読む",
        "reading": "よむ",
        "termTags": [],
        "frequencies": [
          {
            "index": 0,
            "expressionIndex": 0,
            "dictionary": "小説を読もう Top100 Stars",
            "dictionaryOrder": {
              "index": 4,
              "priority": 0
            },
            "expression": "読む",
            "reading": "よむ",
            "hasReading": false,
            "frequency": "★★★★★ (592)"
          }
        ],
        "pitches": [
          {
            "index": 0,
            "expressionIndex": 0,
            "dictionary": "Kanjium Pitch Accents",
            "dictionaryOrder": {
              "index": 3,
              "priority": 0
            },
            "expression": "読む",
            "reading": "よむ",
            "pitches": [
              {
                "position": 1,
                "tags": []
              }
            ]
          }
        ],
        "furiganaSegments": [
          {
            "text": "読",
            "furigana": "よ"
          },
          {
            "text": "む",
            "furigana": ""
          }
        ],
        "termFrequency": "normal",
        "wordClasses": [
          "v5"
        ]
      }
    ],
    "termTags": [],
    "definitions": [
      {
        "sequence": 62322,
        "dictionary": "JMdict",
        "glossary": [
          "よむ【読む】\n〘v5m・vt〙\n1 to read.\n2 to count.\n→さばを読む\n3 to guess; to predict; to read (someone's thoughts); to see (e.g. into someone's heart); to divine."
        ],
        "definitionTags": []
      },
      {
        "sequence": 130531,
        "dictionary": "新和英",
        "glossary": [
          "よむ２【読む】 [ローマ字](yomu)\n1 〔本などを〕 read; peruse; 〔誦する〕 recite; chant 《a sutra》; recite 《an ode》. [⇒よめる]\n2 〔意味を理解する〕 read 《the Morse code, a barometer》; 〔(人の心などを)読み取る〕 read 《sb's face, heart》; see; 〔予測する〕 guess; divine; predict.\n3 〔数を数える〕 count; reckon the numbers 《of…》.\n"
        ],
        "definitionTags": []
      }
    ],
    "frequencies": [
      {
        "index": 0,
        "expressionIndex": 0,
        "dictionary": "小説を読もう Top100 Stars",
        "dictionaryOrder": {
          "index": 4,
          "priority": 0
        },
        "expression": "読む",
        "reading": "よむ",
        "hasReading": false,
        "frequency": "★★★★★ (592)"
      }
    ],
    "pitches": [
      {
        "index": 0,
        "expressionIndex": 0,
        "dictionary": "Kanjium Pitch Accents",
        "dictionaryOrder": {
          "index": 3,
          "priority": 0
        },
        "expression": "読む",
        "reading": "よむ",
        "pitches": [
          {
            "position": 1,
            "tags": []
          }
        ]
      }
    ],
    "sourceTermExactMatchCount": 1,
    "url": "chrome-extension://ogmnaimimemjmbakcfefmnahgdfhfami/popup-preview.html",
    "cloze": {
      "sentence": "読め",
      "prefix": "",
      "body": "読め",
      "suffix": ""
    }
  },
  "glossaryLayoutMode": "default",
  "compactTags": false,
  "group": true,
  "merge": false,
  "modeTermKanji": true,
  "modeTermKana": false,
  "modeKanji": false,
  "compactGlossaries": false,
  "uniqueExpressions": [
    "読む"
  ],
  "uniqueReadings": [
    "よむ"
  ],
  "pitches": [
    {
      "dictionary": "Kanjium Pitch Accents",
      "pitches": [
        {
          "expressions": [
            "読む"
          ],
          "reading": "よむ",
          "position": 1,
          "nasalPositions": [],
          "devoicePositions": [],
          "tags": [],
          "exclusiveExpressions": [],
          "exclusiveReadings": []
        }
      ]
    }
  ],
  "pitchCount": 1,
  "context": {
    "query": "読め",
    "fullQuery": "読め",
    "document": {
      "title": "Yomichan Popup Preview"
    }
  },
  "media": {
    "audio": null,
    "screenshot": null,
    "clipboardImage": null,
    "clipboardText": null,
    "selectionText": null,
    "textFurigana": [],
    "dictionaryMedia": {}
  }
}

[toasted-nutbread]

Indeed the audio file name is null in that JSON data, but it's unclear why. It would have to come from here somewhere:

yomichan/ext/js/background/backend.js

Lines 1784 to 1817 in 756cfc0

	async _injectAnkiNoteAudio(ankiConnect, timestamp, definitionDetails, details) {
	const {type, term, reading} = definitionDetails;
	if (
	type === 'kanji' ||
	typeof term !== 'string' ||
	typeof reading !== 'string' ||
	(term.length === 0 && reading.length === 0)
	) {
	return null;
	}
	const {sources, preferredAudioIndex} = details;
	let data;
	let contentType;
	try {
	({data, contentType} = await this._audioDownloader.downloadTermAudio(
	sources,
	preferredAudioIndex,
	term,
	reading
	));
	} catch (e) {
	// No audio
	return null;
	}
	let extension = MediaUtil.getFileExtensionFromAudioMediaType(contentType);
	if (extension === null) { extension = '.mp3'; }
	let fileName = this._generateAnkiNoteMediaFileName('yomichan_audio', extension, timestamp, definitionDetails);
	fileName = fileName.replace(/\]/g, '');
	fileName = await ankiConnect.storeMediaFile(fileName, data);
	return fileName;
	}

For more debugging:

• Go to chrome://extensions/
• Enable Developer mode on the top right
• On Yomichan's card, Inspect views > background.html (click # more... if not visible)
• Go to the Network tab
• Then, open a tab with Japanese content and scan some text and add it to Anki
• Go back to the Network tab and screenshot it and share it here
• You should see an entry for Yomichan attempting to download an audio file, like this

[KiRa937]

CORS error: MissingAllowOriginHeader

[toasted-nutbread]

Can you click on that entry and then open the Headers tab on the right and screenshot all of it's content?

[KiRa937]

[KiRa937]

Here's console just in case.

[toasted-nutbread]

So interestingly, your request doesn't look all that different from what I'm seeing, aside from not showing the request headers, probably due to the error. I also don't have the Access-Control-Allow-Origin header. A few users have had similar issues before where the see a different, strange behaviour that nobody else has, so there may be a configuration difference in Chrome which is causing yours to behave differently.

I can try to make a debug release with a fix which might address the issue, but I'm not sure if it will work or not.

[KiRa937]

I've installed Firefox with Yomichan. The audio imported on the first try. So yeah, it's definitely Chrome problem.

[toasted-nutbread]

I've created a branch which I've added some debugging to, to see where the issue might be occurring.
https://github.com/toasted-nutbread/yomichan/commits/test-issue-2157

Here is a dev build: yomichan-chrome-dev-944c408888a91bc58c14c882c576732a69a7b231.zip
You can install it by opening chrome://extensions/ and dragging the .zip onto the window. Then, go through the same process of opening the console for the background.html tab and try adding a card + audio to Anki. Share a screenshot what info is logged after clicking the "▸" to expand any {...} objects.

[KiRa937]

Got the dev build. I've imported my old settings and installed the dictionaries. Made a card, it has audio now. On the first try.
Screenshot:

[KiRa937]

I think I've got it! My extension was setup with Site access On click. Then I've changed it to All sites and now my extension imports audio.

[KiRa937]

Recreated it on the dev build with Site access On click.

[toasted-nutbread]

Nice find, thanks for helping debug this! I believe Chrome is trying to move all extensions towards using that setting as the default, so it's helpful to know that it can cause this. Leave this issue open, I'll try to set up an error message with more information about the issue in case other users encounter this.

[toasted-nutbread]

#2161 and #2163 make changes to show an error if the download fails due to reasons which are (presumably) permissions-related. The following error message will be shown, with a link to a new page which contains more info.

Audio download failed due to possible extension permissions error. More info