User:Nardog/PlayAudioNow

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.

Add the following to your common.js:

mw.loader.load('//en.wikipedia.org/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.

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;

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;
}

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

• commons:Commons:File types#Sound
• commons:Commons:Project scope/Allowable file types
• phab:T229169