We're developing a language learning course that allows learners to click on a word and hear it pronounced. You can see an example on the front page of https://srstlci.moodlecloud.com. Click the phrase "Taŋyáŋ yahípi" and you'll hear the mp3 in the background.
var audio = document.getElementById("audio");
And then individual words are marked up in the HTML like this:
<span onclick="play('https://example.com/sound_file.mp3')">Taŋyáŋ yahípi!</span>
So... what are the alternatives out there? Would AngularJS be picked up by the app? Are there even HTML/CSS solutions that I'm overlooking?
We're also open to (and in fact kind of prefer) a play icon immediately after the word, rather than clicking on the word itself. Some kind of tiny audio player that sits inline with the text?
I'm aware of the Poodll miniplayer but have discovered it is just falls back to a standard audio bar in the app. This might not be a problem for most but is an issue for us because of the number of words (therefore audio bars) on each page. We're looking to associate every word presented in the target language with an mp3 file.
Thank you for any pointers!