mp3 files in mediawiki without flash

⇠ Back to Blog:Hacks

Flash is no longer supported, maybe the worst thing to happen in 2021 (and there's a pandemic going on). Among some of the best things to go, the fantastic lightweight, efficient and elegant dewplayer to play mp3, which served us so well all this time! (the site says that "Dewplayer n'est plus, mais renaîtra, un jour. «When it's done»)Screenshot 20210321 191223.png. You'd think mediawiki would offer tons of replacement. Strangely, it turns out to be quite difficult to find how to bring mp3 to your wiki! (see what's available). HTML5 is the solution.

There is an <audio> tag which lets your browser do the work (not flash). The best (and supported) extension to do that is not a direct, mp3-dedicated one but something which allows you to bring some raw HTML directly, namely, the Widgets extension.

Widgets provide the basis to power your site with various widgets, of which HTML5 media are the ones of interest to us, and in particular, audio files, for which we want Html5mediaAudio. To make it work, we also need to put

<script src="//api.html5media.info/1.2.2/html5media.min.js"></script><audio src="" controls preload></audio>

in the Widget:Html5mediaAudio file of the wiki (that is, in wiki/Widget:Html5mediaAudio). Then you can offer:

{{#widget:Html5mediaAudio
|url=https://www.soundhelix.com/examples/mp3/SoundHelix-Song-8.mp3
}}

If you want to play a local file, you still need to provide the full URL, so another template is needed, {{Audio}} that reads:


<includeonly>{{#widget:Html5mediaAudio|
url={{#if: {{{url|}}} |{{{url|}}} |{{filepath: {{{name|}}} }} }} }}</includeonly>

at which stage you can offer:

{{Audio|name=Sin-fabula--Elena-del-Valle-2019.mp3}}

You can now go back to listening to your music without fighting with plugins. On our web, the best place to go is Elena's songs. Enjoy!