We need a proper playback solution for inline ipa pronunciations and spoken articles badges.
Means hiding the native player initially and giving a very customized playback control.
Description
Description
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Resolved | None | T5726 Internal audio links need a loudspeaker icon | |||
| Declined | Feature | None | T122901 Prototype a badged player (for inline ipa pronunciations; hide native player initially) |
Event Timeline
Comment Actions
<audio> block with 0 width. Idea is to use something similar to popup. --data-player=popup. The --data-player=popup triggers a 1em styling with a line-height of 1 to prevent FOUC and reflow.
When loading the JS, replace with a container span/div with the same looks. <audio> is an invisible child of this, of the normal 3em high and 230px wide (double check browser defaults).
Upon hover, focus or click of the container, unhide the <audio> player and show it above or below the current line. (floating over the other content). if the player is shown by a click on the container, then start playback immediately.
Comment Actions
What I would like to see is a very small speaker icon, not a play icon (which is ambiguous in this context), which when clicked, opens a modal or floating player (which includes a link to the file page). So something very similar to what you see in the first sentence of https://en.wikipedia.org/wiki/France, but opening a player instead of linking directly to the audio.