We decided to as a first version, this will not use an API. This means we can't do this as an AJAX request for now.

After trying a few different approaches, I think the way to go is to use a FormSpecialPage. That gives us an easy way to submit the data to a custom function.

What we lose is that the audio element can't be added on page generation. This should be fine since it can't be used unless the Javascript module is loaded anyway. To avoid the UI jumping around, I think the preview should just be a button (can be done quite nicely with HTMLTextFieldWithButton) rather than audio controls. Clicking the button should send the request and play it when response is received. Clicking it again should replay it or send a new request if the transcription has changed.

Until the module has loaded, the preview button should be disabled, with some sort of help text telling the user that it requires Javascript. Further down the line we may be able to generate previews using form requests, but that's out of scope for this task.

Change 673233 had a related patch set uploaded (by Sebastian Berlin (WMSE); owner: L10n-bot):
[mediawiki/extensions/Wikispeech@master] Use FormSpecialPage for Special:EditLexicon

https://gerrit.wikimedia.org/r/673233

This required me to look into service wiring since I needed to use LexiconHandler as a service for the special page. It's not that tricky once you figure out what the syntax looks like, though there is a bit sing and dance to get it working. I'll probably break that out into a separate patch.

Change 673233 merged by jenkins-bot:
[mediawiki/extensions/Wikispeech@master] Use FormSpecialPage for Special:EditLexicon

https://gerrit.wikimedia.org/r/673233