Page MenuHomePhabricator

Internal audio links need a loudspeaker icon
Open, MediumPublic


Author: ui2t5v002

For links directly to audio files, we are currently using templates with
loudspeaker icons in the Image: namespace. This is a bad solution, since most
people click on the image and end up at the image page.

The only difference is that we would like a way to link only the loudspeaker,
and not include any other text, for inline pronunciation examples and the like.

Audio templates:





Event Timeline

bzimport raised the priority of this task from to Medium.Nov 21 2014, 8:51 PM
bzimport added a project: MediaWiki-Parser.
bzimport set Reference to bz3726.
bzimport added a subscriber: Unknown Object (MLST).

zigger wrote:

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

Whatamidoing-WMF renamed this task from Audio links need a loudspeaker icon to Internal audio links need a loudspeaker icon.Aug 13 2015, 1:58 AM
Whatamidoing-WMF reopened this task as Open.
Whatamidoing-WMF updated the task description. (Show Details)
Whatamidoing-WMF set Security to None.

The original description proposed using a particular solution (turning [[File:Audio.ogg]] internal links into [] 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: 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 (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.

Screen Shot 2016-03-01 at 10.22.53 AM.png (335×396 px, 31 KB)

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

Screen Shot 2016-03-01 at 10.27.25 AM.png (277×598 px, 54 KB)