Add to every link to an audio file (.mp3 .wav .ogg .m4a .mp4) on page a tiny button for play music with inline player. Use Html5 <audio> tag.
// ==UserScript==
// @name Inline Audio Player
// @version 1.0
// @description Add to every link to an audio file (.mp3 .wav .ogg .m4a .mp4) on page a tiny button for play music with inline player. Use Html5 <audio> tag.
// @author Restpeace
// @match *
// @include *
// @grant none
// @require http://code.jquery.com/jquery-2.1.3.js
// @namespace https://greasyfork.org/users/8668
// ==/UserScript==
var audio_links = $("a[href*='.mp3'], a[href*='.wav'], a[href*='.ogg'], a[href*='.m4a'], a[href*='.mp4']");
var hasMp3 = audio_links.length > 0;
// console.log("Inline Mp3 Player start.... N. page links: " + audio_links.length);
if (hasMp3) {
for (var i = 0; i < audio_links.length; i++) {
$(audio_links[i]).before ("<button id='B"+i+"'>Play</Button>");
$("#B"+i).css("fontSize", "11px");
$("#B"+i).css("fontFamily", "Trebuchet MS");
$("#B"+i).css("padding", "2px 5px");
$("#B"+i).css("marginRight", "6px");
$("#B"+i).attr("formaction", audio_links[i].href);
$("#B"+i).click (startPlay);
}
} //if hasMp3
function DestroyPlayer() {
if ( $("#NewAudioPlayer").size() > 0) {
var buttonSelId = $("#NewAudioPlayer").attr("buttonSelId");
$(buttonSelId).html("Play")
$(buttonSelId).click(startPlay)
$("#NewAudioPlayer").parent().remove()
}
}
function startPlay() {
if (!hasMp3) {return false}
DestroyPlayer();
$ ("#" + this.id + " + a").after ("<div id='div" + this.id + "'></div>");
$ ("#div"+this.id).append("<audio id='NewAudioPlayer'></audio>");
$("#" + this.id).html("Stop")
$("#" + this.id).click(stopPlay)
$("#NewAudioPlayer").attr("controls", "controls");
$("#NewAudioPlayer").attr("src", $("#"+this.id).attr("formaction"));
$("#NewAudioPlayer").attr("buttonSelId", "#" + this.id);
$("#NewAudioPlayer").get(0).play();
}
function stopPlay() {
DestroyPlayer();
$("#" + this.id).html("Play")
$("#" + this.id).click(startPlay)
}