Html audio tag not working

Anki Help
1

Hello,

I’m currently developing a web-app I use to fetch various data in order to learn Japanese, which I then proceed to render within anki, using the following:

<style>
	#siteloader {
		height: 100vh;
	}

	#siteloader > object {
		min-height: 100%;
		width: 100%;
	}
</style>

<div id="siteloader"></div>​
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
    $("#siteloader").html('<object data="http://localhost:3000/word/する">');
</script>

As a result, I do render my localhost App (nextJs / React) within anki, as you can see bellow:

image
image2560×1440 272 KB

However the audio tag remains grayed out, while it works perfectly on the browser:

image
image1247×753 41 KB

The media that should be loaded is accessible from anywhere: https://media.kanjialive.com/examples_audio/audio-aac/ma-miga(ku)_06_a.aac so the issue does not come from there.

Anki does recieve the data, as shown below:
image

So my guesses are that anki either disabled audio tags, or that they can only work with local files.

Does anyone know whether there’s a way to fix this ? I’ll try some npm package, see if custom made audio players do the trick, but if I could avoid using external libraries that’d be great.

The perfect solution would be if there already were an anki plugin to fix that very specific issue.

Thanks in advance.

2

I have lesson notes that I import from JapanesePod101 and link to the audio files there. Anki works fine for me. These are standard MP3 files though.

I tested and it seems like the embedded browser in Anki does not support AAC files.

This will play in Anki

<audio controls> 
<source src="https://cdn.innovativelanguage.com/japanesepod101/learningcenter/audio/vocabulary/sample/8940.mp3" type="audio/mp3">
</audio>

This will NOT play in Anki (but worked fine in Chrome)

<audio controls> 
<source src="https://dl.espressif.com/dl/audio/ff-16b-2c-44100hz.aac" type="audio/aac">
</audio>
2 Likes
3

More details. I displayed window.navigator.userAgent and Anki shows:

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_16_0) AppleWebKit/537.36 (KHTML, like Gecko) QtWebEngine/5.14.2 Chrome/77.0.3865.129 Safari/537.36

Chrome Desktop

Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.150 Safari/537.36

Safari Desktop

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Safari/605.1.15

Surprisingly, both Chrome and Anki show the same versions for AppleWebKit. So not sure how to reliably determine what capabilities the QtWebEngine supports.

Based on some cursory Googling, it seems like AAC support is mainly a licensing issue.

Things that make you go hmm… :thinking:

3 Likes
4

As always, I thought about pretty much everything BUT the file format.

I now fetch the audio files in mp3 format and it does work flawlessly. I assumed that since Anki is based on Chromium, it would be able to handle pretty much anything I’d throw at it, provided it worked in the browser.

5

Thanks a lot for your answer <3

6

Audio codec support across browser engines have not been 1:1, it’s all about licensing, internet politics and so on. At least MP3 is accepted by Mozilla today.