Page MenuHomePhabricator

Support inline links to audio with ability to play it in situ
Open, Needs TriagePublic

Description

For referencing audio files inline, such as pronunciation demonstrations, Wikipedia has relied on linking to the raw file using [[Media:...]], via templates like {{Audio}}.
This has many problems:

  • Not all browsers support playing the linked file (which can be Ogg Vorbis, WAV, FLAC, WebM, Opus, or MIDI), causing them to download the file instead of playing it, even though the servers automatically transcode audio files into Ogg and MP3 specifically so that browsers can play them.
  • And even when the browser supports it, it is not user-friendly to suddenly send them to a different page with nothing but a player on it (a violation of the principle of least astonishment).

Luckily we have HTML5 and <audio> now, so we can let browsers figure out which format to use without much hassle.
I'm wondering if something like the following is feasible:

<audio file="Example.ogg">Link</audio>

in wikitext will turn into something like:

<a id="unique-id-link" href="/wiki/File:Example.ogg" title="Example.ogg">
Link
</a>
<audio id="unique-id-audio" preload="none">
  <source src="//upload.wikimedia.org/wikipedia/commons/c/c8/Example.ogg" type="audio/ogg">
  <source src="//upload.wikimedia.org/wikipedia/commons/transcoded/c/c8/Example.ogg/Example.ogg.mp3" type="audio/mpeg">
</audio>

and a JS will trigger the playback of the audio upon clicking the link. For those with JS turned off, maybe we could preemptively attach controls to <audio>, which the JS would cancel upon being loaded (with the width of audio set to a few dozen pixels or a few ems in CSS so as to not disrupt the text before the JS is loaded or when it's disabled).

Event Timeline

I've written a user script that effectively achieves this. Still it would be nice if it was supported natively in wiki syntax, perhaps via a MW extension.

This task was mentioned at https://en.wikipedia.org/wiki/Template_talk:Audio#Clicking_shouldn't_open_up_an_entirely_new_page. I hope it gets some attention and doesn't just end up stuck in the backlog forever.

What is "situ" (mentioned in the task title)?

lionel.rowe rescinded a token.
lionel.rowe awarded a token.
lionel.rowe added a subscriber: lionel.rowe.

This would be a massive improvement to pages such as https://en.wikipedia.org/wiki/Help:IPA, with a large number of very short audio clips that you'd often want to replay or play back-to-back to compare sounds.

Here's another PoC user script I wrote, somewhat more minimal than @Nardog 's above (no additional UI):

https://en.wikipedia.org/wiki/User:Lionel.rowe/inline-audio.js

It checks for e.ctrlKey, so you can still choose to open in a new tab if you want.