zigger wrote:

*** This bug has been marked as a duplicate of 1578 ***

The original description proposed using a particular solution (turning [[File:Audio.ogg]] internal links into [https://commons.wikimedia.org/wiki/File:Audo.ogg] external links, and then adding using CSS rules to provide a visible indication of the file extension.

However, the problem remains after all of these years: We need a way to link audio files on wiki with a "click here to listen to this" loudspeaker icon. It should be possible to specify that something is an audio file in wikitext [[File:Audio.ogg|audio]] and get a result that looks like a loudspeaker icon, and that plays the linked audio recording without taking the reader to another page.

To put it more simply: https://en.wiktionary.org/wiki/eins#Pronunciation shouldn't have a block with an arrow and a number of seconds and a menu on a separate line from the IPA pronunciation. It should be simply IPA: [aɪ̯ns] 🔊, and clicking on it should play the linked file. (If your font doesn't support it, then that's a loudspeaker at the end).

My current thinking forward of this is.
1: Insert plain audio tag
2: When loading JS player, hide the player and tag using CSS stylesheets and insert a 'button' before it.
3: On hover of button, make the 'player' popup, all hover cards.

I think that what we want is something that looks like the 'Word of the Day" at http://www.merriam-webster.com/ (shown below, just in case they change their website later). It shows the word, followed by an inline loudspeaker icon. You click the icon and hear the sound. That's it: clean, simple, easy to use.

The OED website also uses inline pronunciation icons (the blue arrow):