MediaWiki:Gadget-audioplayer-core.js: Difference between revisions
Jump to navigation
Jump to search
Content added Content deleted
(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: '/images/' + filename + '?11111', autoplay: playlist !== true, controls: true,...") |
No edit summary Tag: Reverted |
||
Line 1: | Line 1: | ||
$(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: '/images/' + filename + '?11111', autoplay: playlist !== true, controls: true, }).addClass('rsw-music-player'); // .rsw-music-player { height: 2em; vertical-align: middle; } $('.rsw-music-player').each(function() { if (playlist && $(this).is('#music-playlist audio')) { // do not pause the playlist player when listening to a list return; } // pause all other songs that are currently playing if (!this.paused) { this.pause(); } }); // load and start playing activated song $(e.target).replaceWith($audio); return $audio.attr('src'); } // Apply onclick to audio links inside .embed-audio-links class $('body').on('click', '.embed-audio-links a[href^="/w/File:"][href$=".ogg"]', playTrack) /** Script for handling playlists added through [[Template:Playlist]]. **/ var $div = $('#music-playlist:not(.musicMap-playlist)'); if ($div.length !== 0) { $div.show(); var unlocked = $div.data('unlocked-button') var $play = $('<button>').attr('id', 'music-play').addClass('cdx-button').html('Shuffle play'+(unlocked?' all':'')).appendTo($div); if (unlocked) { var $playunlocked = $('<button>').attr('id', 'music-playunlocked').addClass('cdx-button').html('Shuffle play unlocked').appendTo($div) } $('<br/>').appendTo($div); var $playing = $('<span>').attr('id', 'music-playing').appendTo($div); var $scroll = $('<span>').addClass('music-scroll-to').appendTo($div); $('<a>').attr('href', '#music-current-song').html('Scroll to song').appendTo($scroll).before(' (').after(')'); $('<br/>').appendTo($div); var $player = $('<audio>').attr({ id: 'music-player', autoplay: true, controls: true, }).addClass('rsw-music-player').appendTo($div); // Event handlers $play.click(function(e) { if (playRandom.call($player.get(0), false, true)) { $(this).html('Shuffle playing').prop('disabled', true); if (unlocked) { $playunlocked.html('Shuffle play unlocked').prop('disabled', false); } // queue the next song after the previous one ends: $player.on('ended', playRandom.bind($player.get(0), false)); } }); if (unlocked) { $playunlocked.click(function(e) { if (playRandom.call($player.get(0), true, true)) { $(this).html('Shuffle playing unlocked').prop('disabled', true); $play.html('Shuffle play'+(unlocked?' all':'')).prop('disabled', false); } // queue the next song after the previous one ends: $player.on('ended', playRandom.bind($player.get(0), true)); }); } } // Play a random song from the tables on the current page function playRandom(unlocked, firstsong) { var $player = $(this); var $songs = $('a[href^="/w/File:"][href$=".ogg"]') if (unlocked) { $songs = $songs.filter('.highlight-on a'); } if ($songs.length == 0) { 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. alert('Could not find any '+(unlocked?'unlocked ':'')+'music tracks to play. Reload the page to allow previous songs to be played again.'); } else { $('#music-play').html('Shuffle play'+(unlocked?' all':'')).prop('disabled', false); if (unlocked) { $playunlocked.html('Shuffle play unlocked').prop('disabled', false); } } return false; } var song = $songs.get(Math.floor(Math.random() * $songs.length)); $('#music-current-song').removeAttr('id'); $(song).closest('tr').attr('id', 'music-current-song'); var $songlink = $(song).parents('tr').find('td:first-child a').eq(0).clone(); $songlink.attr('target', '_blank'); var e = { preventDefault: function() {}, target: song, }; var url = playTrack(e, true); // replace the link in the list with the music player $player.attr('src', url); // play the track in the playlist player at the top; autoplay-attribute makes this play automatically. var $playing = $('#music-playing'); $playing.html("Now playing: "); // Indicate which song is playing $songlink.appendTo($playing); // link to song return true; }}); |
|||
$(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: '/images/' + filename + '?11111', |
|||
autoplay: playlist !== true, |
|||
controls: true, |
|||
}).addClass('rsw-music-player'); // .rsw-music-player { height: 2em; vertical-align: middle; } |
|||
$('.rsw-music-player').each(function() { |
|||
if (playlist && $(this).is('#music-playlist audio')) { |
|||
// do not pause the playlist player when listening to a list |
|||
return; |
|||
} |
|||
// pause all other songs that are currently playing |
|||
if (!this.paused) { |
|||
this.pause(); |
|||
} |
|||
}); |
|||
// load and start playing activated song |
|||
$(e.target).replaceWith($audio); |
|||
return $audio.attr('src'); |
|||
} |
|||
// Apply onclick to audio links inside .embed-audio-links class |
|||
$('body').on('click', '.embed-audio-links a[href^="/w/File:"][href$=".ogg"]', playTrack) |
|||
/** Script for handling playlists added through [[Template:Playlist]]. **/ |
|||
var $div = $('#music-playlist:not(.musicMap-playlist)'); |
|||
if ($div.length !== 0) { |
|||
$div.show(); |
|||
var unlocked = $div.data('unlocked-button') |
|||
var $play = $('<button>').attr('id', 'music-play').addClass('cdx-button').html('Shuffle play'+(unlocked?' all':'')).appendTo($div); |
|||
if (unlocked) { |
|||
var $playunlocked = $('<button>').attr('id', 'music-playunlocked').addClass('cdx-button').html('Shuffle play unlocked').appendTo($div) |
|||
} |
|||
$('<br/>').appendTo($div); |
|||
var $playing = $('<span>').attr('id', 'music-playing').appendTo($div); |
|||
var $scroll = $('<span>').addClass('music-scroll-to').appendTo($div); |
|||
$('<a>').attr('href', '#music-current-song').html('Scroll to song').appendTo($scroll).before(' (').after(')'); |
|||
$('<br/>').appendTo($div); |
|||
var $player = $('<audio>').attr({ |
|||
id: 'music-player', |
|||
autoplay: true, |
|||
controls: true, |
|||
}).addClass('rsw-music-player').appendTo($div); |
|||
// Event handlers |
|||
$play.click(function(e) { |
|||
if (playRandom.call($player.get(0), false, true)) { |
|||
$(this).html('Shuffle playing').prop('disabled', true); |
|||
if (unlocked) { |
|||
$playunlocked.html('Shuffle play unlocked').prop('disabled', false); |
|||
} |
|||
// queue the next song after the previous one ends: |
|||
$player.on('ended', playRandom.bind($player.get(0), false)); |
|||
} |
|||
}); |
|||
if (unlocked) { |
|||
$playunlocked.click(function(e) { |
|||
if (playRandom.call($player.get(0), true, true)) { |
|||
$(this).html('Shuffle playing unlocked').prop('disabled', true); |
|||
$play.html('Shuffle play'+(unlocked?' all':'')).prop('disabled', false); |
|||
} |
|||
// queue the next song after the previous one ends: |
|||
$player.on('ended', playRandom.bind($player.get(0), true)); |
|||
}); |
|||
} |
|||
} |
|||
// Play a random song from the tables on the current page |
|||
function playRandom(unlocked, firstsong) { |
|||
var $player = $(this); |
|||
var $songs = $('a[href^="/w/File:"][href$=".ogg"]') |
|||
if (unlocked) { |
|||
$songs = $songs.filter('.highlight-on a'); |
|||
} |
|||
if ($songs.length == 0) { |
|||
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. |
|||
alert('Could not find any '+(unlocked?'unlocked ':'')+'music tracks to play. Reload the page to allow previous songs to be played again.'); |
|||
} else { |
|||
$('#music-play').html('Shuffle play'+(unlocked?' all':'')).prop('disabled', false); |
|||
if (unlocked) { |
|||
$playunlocked.html('Shuffle play unlocked').prop('disabled', false); |
|||
} |
|||
} |
|||
return false; |
|||
} |
|||
var song = $songs.get(Math.floor(Math.random() * $songs.length)); |
|||
$('#music-current-song').removeAttr('id'); |
|||
$(song).closest('tr').attr('id', 'music-current-song'); |
|||
var $songlink = $(song).parents('tr').find('td:first-child a').eq(0).clone(); |
|||
$songlink.attr('target', '_blank'); |
|||
var e = { |
|||
preventDefault: function() {}, |
|||
target: song, |
|||
}; |
|||
var url = playTrack(e, true); // replace the link in the list with the music player |
|||
$player.attr('src', url); // play the track in the playlist player at the top; autoplay-attribute makes this play automatically. |
|||
var $playing = $('#music-playing'); |
|||
$playing.html("Now playing: "); // Indicate which song is playing |
|||
$songlink.appendTo($playing); // link to song |
|||
return true; |
|||
} |
|||
}); |
Revision as of 17:12, 17 October 2024
$(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: '/images/' + filename + '?11111', autoplay: playlist !== true, controls: true, }).addClass('rsw-music-player'); // .rsw-music-player { height: 2em; vertical-align: middle; } $('.rsw-music-player').each(function() { if (playlist && $(this).is('#music-playlist audio')) { // do not pause the playlist player when listening to a list return; } // pause all other songs that are currently playing if (!this.paused) { this.pause(); } }); // load and start playing activated song $(e.target).replaceWith($audio); return $audio.attr('src'); } // Apply onclick to audio links inside .embed-audio-links class $('body').on('click', '.embed-audio-links a[href^="/w/File:"][href$=".ogg"]', playTrack) /** Script for handling playlists added through [[Template:Playlist]]. **/ var $div = $('#music-playlist:not(.musicMap-playlist)'); if ($div.length !== 0) { $div.show(); var unlocked = $div.data('unlocked-button') var $play = $('<button>').attr('id', 'music-play').addClass('cdx-button').html('Shuffle play'+(unlocked?' all':'')).appendTo($div); if (unlocked) { var $playunlocked = $('<button>').attr('id', 'music-playunlocked').addClass('cdx-button').html('Shuffle play unlocked').appendTo($div) } $('<br/>').appendTo($div); var $playing = $('<span>').attr('id', 'music-playing').appendTo($div); var $scroll = $('<span>').addClass('music-scroll-to').appendTo($div); $('<a>').attr('href', '#music-current-song').html('Scroll to song').appendTo($scroll).before(' (').after(')'); $('<br/>').appendTo($div); var $player = $('<audio>').attr({ id: 'music-player', autoplay: true, controls: true, }).addClass('rsw-music-player').appendTo($div); // Event handlers $play.click(function(e) { if (playRandom.call($player.get(0), false, true)) { $(this).html('Shuffle playing').prop('disabled', true); if (unlocked) { $playunlocked.html('Shuffle play unlocked').prop('disabled', false); } // queue the next song after the previous one ends: $player.on('ended', playRandom.bind($player.get(0), false)); } }); if (unlocked) { $playunlocked.click(function(e) { if (playRandom.call($player.get(0), true, true)) { $(this).html('Shuffle playing unlocked').prop('disabled', true); $play.html('Shuffle play'+(unlocked?' all':'')).prop('disabled', false); } // queue the next song after the previous one ends: $player.on('ended', playRandom.bind($player.get(0), true)); }); } } // Play a random song from the tables on the current page function playRandom(unlocked, firstsong) { var $player = $(this); var $songs = $('a[href^="/w/File:"][href$=".ogg"]') if (unlocked) { $songs = $songs.filter('.highlight-on a'); } if ($songs.length == 0) { 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. alert('Could not find any '+(unlocked?'unlocked ':'')+'music tracks to play. Reload the page to allow previous songs to be played again.'); } else { $('#music-play').html('Shuffle play'+(unlocked?' all':'')).prop('disabled', false); if (unlocked) { $playunlocked.html('Shuffle play unlocked').prop('disabled', false); } } return false; } var song = $songs.get(Math.floor(Math.random() * $songs.length)); $('#music-current-song').removeAttr('id'); $(song).closest('tr').attr('id', 'music-current-song'); var $songlink = $(song).parents('tr').find('td:first-child a').eq(0).clone(); $songlink.attr('target', '_blank'); var e = { preventDefault: function() {}, target: song, }; var url = playTrack(e, true); // replace the link in the list with the music player $player.attr('src', url); // play the track in the playlist player at the top; autoplay-attribute makes this play automatically. var $playing = $('#music-playing'); $playing.html("Now playing: "); // Indicate which song is playing $songlink.appendTo($playing); // link to song return true; }});