MediaWiki:Common.js

/* Веб-проигрыватель для аудио на страницах вики.
 *
 * Использование в викитексте:
 *   <div class="cl-audio" data-title="Название" data-artist="Исполнитель">
 *   [[Media:Файл.mp3|Слушать трек]]</div>
 *
 * Ссылка [[Media:...]] нужна обязательно: скрипт берёт из неё адрес файла,
 * а если JavaScript отключён — посетитель просто увидит рабочую ссылку.
 * Трек НИКОГДА не запускается сам: без autoplay и с preload="none",
 * а preload="metadata" тянет только заголовок файла (длительность), а не сам трек.
 */
$( function () {
	$( '.cl-audio' ).each( function () {
		var $box = $( this );
		if ( $box.hasClass( 'cl-audio-ready' ) ) {
			return;
		}
		var $link = $box.find( 'a' ).first();
		var src = $box.attr( 'data-src' ) || ( $link.length ? $link.attr( 'href' ) : '' );
		if ( !src ) {
			return;
		}
		var title = $box.attr( 'data-title' ) || ( $link.length ? $link.text() : 'Аудиозапись' );
		var artist = $box.attr( 'data-artist' ) || '';

		var audio = document.createElement( 'audio' );
		audio.controls = true;
		audio.autoplay = false;
		audio.preload = 'metadata';
		audio.src = src;
		audio.className = 'cl-audio-el';

		var $head = $( '<div>' ).addClass( 'cl-audio-head' )
			.append( $( '<span>' ).addClass( 'cl-audio-title' ).text( title ) );
		if ( artist ) {
			$head.append( $( '<span>' ).addClass( 'cl-audio-artist' ).text( artist ) );
		}

		$box.empty()
			.addClass( 'cl-audio-ready' )
			.append( $( '<span>' ).addClass( 'cl-audio-ico' ).text( '♪' ) )
			.append(
				$( '<div>' ).addClass( 'cl-audio-meta' )
					.append( $head )
					.append( audio )
			);
	} );
} );