MediaWiki:Gadget-audioplayer-core.js
Revision as of 19:14, 3 October 2022 by Jacmob (talk | contribs) (Created page with "$(function() { →* Replace audio track links with the audio file when clicked *: function playTrack(e, playlist) { if ($(this).attr('target') == '_blank') { // do not play another track if the link opens in a new tab. return; } e.preventDefault(); var filename = $(e.target).closest('a').attr('href').match(/File:(.*\.ogg)/)[1]; var $audio = $('<audio>').attr({ src: '/w/Special:Redirect?wptype=file&wpvalue=' + filename, autoplay: playlist !== true,...")
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
1 $(function() {
2 /** Replace audio track links with the audio file when clicked **/
3 function playTrack(e, playlist) {
4 if ($(this).attr('target') == '_blank') {
5 // do not play another track if the link opens in a new tab.
6 return;
7 }
8 e.preventDefault();
9 var filename = $(e.target).closest('a').attr('href').match(/File:(.*\.ogg)/)[1];
10 var $audio = $('<audio>').attr({
11 src: '/w/Special:Redirect?wptype=file&wpvalue=' + filename,
12 autoplay: playlist !== true,
13 controls: true,
14 }).addClass('rsw-music-player'); // .rsw-music-player { height: 2em; vertical-align: middle; }
15 $('.rsw-music-player').each(function() {
16 if (playlist && $(this).is('#music-playlist audio')) {
17 // do not pause the playlist player when listening to a list
18 return;
19 }
20 // pause all other songs that are currently playing
21 if (!this.paused) {
22 this.pause();
23 }
24 });
25 // load and start playing activated song
26 $(e.target).replaceWith($audio);
27 return $audio.attr('src');
28 }
29
30 // Apply onclick to audio links inside .embed-audio-links class
31 $('body').on('click', '.embed-audio-links a[href^="/w/File:"][href$=".ogg"]', playTrack)
32
33 /** Script for handling playlists added through [[Template:Playlist]]. **/
34 var $div = $('#music-playlist:not(.musicMap-playlist)');
35 if ($div.length !== 0) {
36 $div.show();
37 var unlocked = $div.data('unlocked-button')
38 var $play = $('<button>').attr('id', 'music-play').addClass('mw-ui-button').html('Shuffle play'+(unlocked?' all':'')).appendTo($div);
39 if (unlocked) {
40 var $playunlocked = $('<button>').attr('id', 'music-playunlocked').addClass('mw-ui-button').html('Shuffle play unlocked').appendTo($div)
41 }
42 $('<br/>').appendTo($div);
43 var $playing = $('<span>').attr('id', 'music-playing').appendTo($div);
44 var $scroll = $('<span>').addClass('music-scroll-to').appendTo($div);
45 $('<a>').attr('href', '#music-current-song').html('Scroll to song').appendTo($scroll).before(' (').after(')');
46 $('<br/>').appendTo($div);
47 var $player = $('<audio>').attr({
48 id: 'music-player',
49 autoplay: true,
50 controls: true,
51 }).addClass('rsw-music-player').appendTo($div);
52
53 // Event handlers
54 $play.click(function(e) {
55 if (playRandom.call($player.get(0), false, true)) {
56 $(this).html('Shuffle playing').prop('disabled', true);
57 if (unlocked) {
58 $playunlocked.html('Shuffle play unlocked').prop('disabled', false);
59 }
60 // queue the next song after the previous one ends:
61 $player.on('ended', playRandom.bind($player.get(0), false));
62 }
63 });
64 if (unlocked) {
65 $playunlocked.click(function(e) {
66 if (playRandom.call($player.get(0), true, true)) {
67 $(this).html('Shuffle playing unlocked').prop('disabled', true);
68 $play.html('Shuffle play'+(unlocked?' all':'')).prop('disabled', false);
69 }
70 // queue the next song after the previous one ends:
71 $player.on('ended', playRandom.bind($player.get(0), true));
72 });
73 }
74 }
75
76 // Play a random song from the tables on the current page
77 function playRandom(unlocked, firstsong) {
78 var $player = $(this);
79 var $songs = $('a[href^="/w/File:"][href$=".ogg"]')
80 if (unlocked) {
81 $songs = $songs.filter('.highlight-on a');
82 }
83 if ($songs.length == 0) {
84 if (firstsong === true) {// give no-songs alert only when it was the user who started the song. If autoplay can't find more, end silently.
85 alert('Could not find any '+(unlocked?'unlocked ':'')+'music tracks to play. Reload the page to allow previous songs to be played again.');
86 } else {
87 $('#music-play').html('Shuffle play'+(unlocked?' all':'')).prop('disabled', false);
88 if (unlocked) {
89 $playunlocked.html('Shuffle play unlocked').prop('disabled', false);
90 }
91 }
92 return false;
93 }
94 var song = $songs.get(Math.floor(Math.random() * $songs.length));
95 $('#music-current-song').removeAttr('id');
96 $(song).closest('tr').attr('id', 'music-current-song');
97 var $songlink = $(song).parents('tr').find('td:first-child a').eq(0).clone();
98 $songlink.attr('target', '_blank');
99 var e = {
100 preventDefault: function() {},
101 target: song,
102 };
103 var url = playTrack(e, true); // replace the link in the list with the music player
104 $player.attr('src', url); // play the track in the playlist player at the top; autoplay-attribute makes this play automatically.
105
106 var $playing = $('#music-playing');
107 $playing.html("Now playing: ") // Indicate which song is playing
108 $songlink.appendTo($playing); // link to song
109
110 return true;
111 }
112 });