User:Nardog/PlayAudioNow

PlayAudioNow
Description	Makes {{audio}} links playable while staying on the page, without having to open or save the raw file, regardless of the format
Updated	September 27, 2023; (13 months ago)
Browsers	Chrome, Firefox, etc.
Source	User:Nardog/PlayAudioNow.js

This user subpage is currently inactive and is retained for historical reference.
If you want to revive discussion regarding the subject, you might try contacting the user in question or seeking broader input via a forum such as the village pump.

This script allows you to click on any link made via the {{audio}} template (like this^ⓘ) and listen to the audio without having to move to another page, save the file or open another app, no matter the format—be it Ogg Vorbis, MP3, WebM, FLAC, WAV, or even MIDI, which most browsers don't support natively.^[a]^[b]

Try it at Help:IPA/Polish, Help:IPA/Swedish, List of chords, etc.

Installation

Add the following to your common.js:

mw.loader.load('//wiki.riteme.site/w/index.php?title=User:Nardog/PlayAudioNow.js&action=raw&ctype=text/javascript');

Or you may enable the script installer in Preferences → Gadgets and click "Install" in the infobox on this page.

Customization

Behavior

By default, clicking on an audio link while the audio is still playing pauses the audio, and clicking on it again resumes it from where it was paused. If you add the following to your common.js, clicking on a paused link will not resume the audio but play it from the beginning:

window.playaudionowRewind = true;

If you add the following, clicking on a playing link will not pause the audio but play it from the beginning:

window.playaudionowPause = false;
window.playaudionowRewind = true;

If you add the following, you will not be able to pause or stop audio while it's playing:

window.playaudionowPause = false;

By default, clicking on a play link while another file is playing pauses (and if the remaining time is less than one second, rewinds) the playing file before playing the new one. Adding the following will allow you to play multiple files at once:

window.playaudionowAllowMulti = true;

Appearance

By default, the script shows to indicate that a link has been processed by the script so it can be played while staying on the page (and or while it's playing; and MaterialThrobber.svg, an animated SVG using SMIL, while it's loading). This can be modified in your common.css. Since the script's CSS is usually loaded after your custom CSS, a selector for an ancestor element like #bodyContent or body may be necessary to override the defaults.

The following example replaces the default icons with // and shows for a paused link that will resume the audio, and for a playing link that will rewind the audio:

body .playaudionow {
	background-image: url(//upload.wikimedia.org/wikipedia/commons/7/7d/Emoji_u25b6.svg);
}

body .playaudionow-playing {
	background-image: url(//upload.wikimedia.org/wikipedia/commons/4/43/Emoji_u23f8.svg);
}

body .playaudionow-playing.playaudionow-pausable.playaudionow-rewindable {
	background-image: url(//upload.wikimedia.org/wikipedia/commons/5/51/Emoji_u23f9.svg);
}

.playaudionow-paused:not(.playaudionow-rewindable) {
	background-image: url(//upload.wikimedia.org/wikipedia/commons/f/f6/Emoji_u23ef.svg);
}

.playaudionow-playing.playaudionow-rewindable {
	background-image: url(//upload.wikimedia.org/wikipedia/commons/4/41/Emoji_u23ea.svg);
}

This cancels the display of icons entirely:

body .playaudionow {
	background: none;
	padding-right: 0;
}

Limitations

The number of audio files to be processed on a single page is capped at 500 (ten API queries).

Notes

^ To be fair, it's not the script that's doing the heavy lifting. The servers have already transcoded the files for us, but templates like {{audio}} by themselves have no way of allowing users to access them, let alone play them in situ.
^ The script also gives priority to formats like Ogg and MP3 over the lossless FLAC/WAV, saving you some traffic.

[1] To be fair, it's not the script that's doing the heavy lifting. The servers have already transcoded the files for us, but templates like {{audio}} by themselves have no way of allowing users to access them, let alone play them in situ.

[2] The script also gives priority to formats like Ogg and MP3 over the lossless FLAC/WAV, saving you some traffic.

[a]

[b]