Inline Audio Player

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.
当前为 2015-02-26 提交的版本，查看最新版本。
安装此脚本？
提问、发表评价或者举报此脚本。
换行
// ==UserScript==
// @name         Inline Audio Player
// @version      1.10
// @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      *
// @exclude      http?://www.inoreader.com/*
// @grant        none
// @require 	 http://code.jquery.com/jquery-2.1.3.js
// @namespace https://gf.qytechs.cn/users/8668
// ==/UserScript==
 
	$("body").before ("<style>" +
                      ".buttonPlay {font-size: 11px; background-color: #fff0a0; font-family: Trebuchet MS; padding: 2px 5px; margin-right: 6px;}" +
                      ".infoSong { margin: 4px; font-size: 11px; font-family: Trebuchet MS; font-style: italic;}" +
                      "</style>");
 
    var audio_links = $("a[href*='.mp3'], a[href*='.wav'], a[href*='.ogg'], a[href*='.m4a'], a[href*='.mp4']");
    var hasMp3 =  audio_links.length > 0;
	var NrAudio  =  audio_links.length;
	// 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+"' class=\"buttonPlay\">Play</Button>");
            $("#B"+i).attr("formaction", audio_links[i].href);
            $("#B"+i).click (startPlay);  
            } 
    } //if hasMp3
 
function DestroyPlayer() {
        if ( $("#NewAudioPlayer").size() > 0) { 
             var buttonId = $("#NewAudioPlayer").attr("buttonId");
             $("#"+buttonId).html("Play")
             $("#"+buttonId).css ("background-color","#fff0a0");  
    		 $("#"+buttonId).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).css ("background-color","#ffa0f0");  
    $("#" + this.id).click(stopPlay)
    $("#NewAudioPlayer").attr("controls", "controls");
    $("#NewAudioPlayer").attr("src", $("#"+this.id).attr("formaction"));
    $("#NewAudioPlayer").attr("buttonId", this.id);
    $("#NewAudioPlayer").bind('durationchange', function() { WritePlayInfo(this); } );
    $("#NewAudioPlayer").bind('ended'		  , function() { PlayNext(this); 	  } );
    $("#NewAudioPlayer").get(0).play();
}
 
function WritePlayInfo(NAP) {
    durata = NAP.duration; 
    // console.debug (NAP.src, durata);
    durata_min = parseInt(durata/60); 
    durata_sec = parseInt(durata-(parseInt(durata/60)*60));
    durataf = durata_min + ":" + durata_sec;
    buttonId = $("#"+NAP.id).attr("buttonId");
    divId = "#div" + buttonId;
    // console.debug (buttonId, divId);
    urlplayed = $("#" + buttonId + " + a").attr("href");
    $ (divId).append("<br/><div class='infoSong'>url: " + decodeURI (urlplayed) + " - durata:" + durataf + "</div>");
}
 
function PlayNext(NAP) {
    buttonId = $("#"+NAP.id).attr("buttonId");
    nId = parseInt( buttonId.substring (1,buttonId.length) );
    if (nId >= NrAudio-1) {
        console.debug ("Stop Playing"); return false 
    } 
    nId = nId+1;
    console.debug ("---- Play next. Song n.", nId+1, " of ", NrAudio);
    $("#B" + nId).click();
}
 
function stopPlay() {
    DestroyPlayer();
    $("#" + this.id).html("Play")
    $("#" + this.id).click(startPlay)
}
欢迎访问Greasy Fork镜像
