Autoplay audio from URL (on card side changes, no other clicks)

[patarapolw]

Is your feature request related to a problem? Please describe.

It is possible to use TTS from JavaScript API, but the voice is not native. Also, sometimes AnkiDroidJS.ankiTtsSpeak is not defined for some reasons.

I can indeed use AwesomeTTS to generate audio files, but syncing large media folder is quite problematic, as well as it is impossible to do in large batch with gTTS. Instead, I chose to run gTTS on demand on an external server, but of course, it is not uploaded to AnkiDroid that way.

HTML5 Audio element can be created, but autoplay doesn't work. Clicking via JavaScript doesn't work either unless there is an actual click.

Describe the solution you'd like

AnkiDroidJS.ankiPlayAudio to play audio on Java/Kotlin side would pretty much be the surefire way.

Describe alternatives you've considered

I can also trap the first click, so this works.

<script>
(function() {
  function doAutoplay() { document.querySelector('[autoplay]').click(); document.removeEventListener('click', doAutoplay) }
  document.addEventListener('click', doAutoplay)
})()
</script>

Additional context

TTS / audio files in Anki are a very big culprit of sync size, especially on the first sync. I think it is always better to allow online shared resources.

[welcome]

Hello! 👋 Thanks for logging this issue. Please remember we are all volunteers here, so some patience may be required before we can get to the issue. Also remember that the fastest way to get resolution on an issue is to propose a change directly, https://github.com/ankidroid/Anki-Android/wiki/Contributing

[krmanik]

The TTS JS API is implemented on top of java/kotlin. It uses the TTS engine on the device.
View more about it in this PR #8812

Anki-Android/AnkiDroid/src/main/java/com/ichi2/anki/JavaScriptTTS.java

Line 31 in 67d29b4

public class JavaScriptTTS implements TextToSpeech.OnInitListener {

Also autoplay can be implemented using following JS code in card template, add following code inside window.onload

function autoPlayAudio() {
    var audioDiv = document.getElementById('audio');
    var audio = audioDiv.getElementsByTagName("*");
    audio[0].click();
}

[patarapolw]

Also autoplay can be implemented using following JS code in card template, add following code inside window.onload

Any real code? This doesn't work for me.

<audio autoplay controls>
<source src="https://download.samplelib.com/mp3/sample-3s.mp3">
</audio>

<script>
window.onload = function() {
    var audio = document.getElementsByTagName("audio");
    audio[0].click();
}
</script>

As a matter of fact, it says nothing in the console, nor the audio is played. No errors, just silence.

In contrast, there is an error message for this.

<audio autoplay controls>
<source src="https://download.samplelib.com/mp3/sample-3s.mp3">
</audio>

<script>
window.onload = function() {
    var audio = document.getElementsByTagName("audio");
    audio[0].play();
}
</script>

Uncaught (in promise) DOMException: play() can only be initiated by a user gesture.

[krmanik]

I tested above two code snippets. The autoplay works correctly.

Also I didn't get the following Exception

Uncaught (in promise) DOMException: play() can only be initiated by a user gesture.

May be it is device specific issues. Can you add Debug Info?

Debug info

Refer to the support page if you are unsure where to get the "debug info".

[patarapolw]

Debug Info

AnkiDroid Version = 2.15.6

Android Version = 11

Manufacturer = samsung

Model = SM-P610

Hardware = exynos9611

Webview User Agent = Mozilla/5.0 (Linux; Android 11; SM-P610 Build/RP1A.200720.012; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/98.0.4758.87 Safari/537.36

ACRA UUID = 276df1ab-2494-4fbb-9dca-05d55d3472f4

Scheduler = std2

Crash Reports Enabled = true

DatabaseV2 Enabled = true

[patarapolw]

My bad. It seems that [sound:https://download.samplelib.com/mp3/sample-3s.mp3] actually works. (As well as, [sound:https://***.com/api/tts/tts.mp3?q={{Japanese}}] from my TTS server.) Of course, Automatically play audio has to be on.

It doesn't play nor clickable on desktop, but both can be done in Android.

Furthermore, I don't know if it can be manipulated with JavaScript, like document.querySelector...

Anyway, for now, my plan is [sound:https://***.com/api/tts/tts.mp3?q={{Japanese}}&forvo=***]. Like, saving MP3 files from Forvo and gTTS in my TTS server, in the way that won't be rate limited by either APIs. So, my problem should probably be solved by now.

[github-actions]

Hello 👋, this issue has been opened for more than 2 months with no activity on it. If the issue is still here, please keep in mind that we need community support and help to fix it! Just comment something like still searching for solutions and if you found one, please open a pull request! You have 7 days until this gets closed automatically