☰

Greasy Fork 还支持 简体中文。

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-25 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name         Inline Audio Player
  3. // @version      1.01
  4. // @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.
  5. // @author       Restpeace
  6. // @match        *
  7. // @include      *
  8. // @exclude      http?://www.inoreader.com/*
  9. // @grant        none
  10. // @require 	 http://code.jquery.com/jquery-2.1.3.js
  11. // @namespace https://greasyfork.org/users/8668
  12. // ==/UserScript==
  13.  
  14.     var audio_links = $("a[href*='.mp3'], a[href*='.wav'], a[href*='.ogg'], a[href*='.m4a'], a[href*='.mp4']");
  15.     var hasMp3 =  audio_links.length > 0;
  16. 	// console.log("Inline Mp3 Player start.... N. page links: " + audio_links.length);
  17. 	if (hasMp3) {
  18. 		for (var i = 0; i < audio_links.length; i++) {
  19.             $(audio_links[i]).before ("<button id='B"+i+"'>Play</Button>");
  20.             $("#B"+i).css("fontSize", "11px");
  21.             $("#B"+i).css("fontFamily", "Trebuchet MS");
  22.             $("#B"+i).css("padding", "2px 5px");
  23.             $("#B"+i).css("marginRight", "6px");
  24.             $("#B"+i).attr("formaction", audio_links[i].href);
  25.             $("#B"+i).click (startPlay);  
  26.             } 
  27.     } //if hasMp3
  28.  
  29. function DestroyPlayer() {
  30.         if ( $("#NewAudioPlayer").size() > 0) { 
  31.              var buttonSelId = $("#NewAudioPlayer").attr("buttonSelId");
  32.              $(buttonSelId).html("Play")
  33.     		 $(buttonSelId).click(startPlay)
  34.              $("#NewAudioPlayer").parent().remove()
  35.         }
  36. }            
  37.  
  38. function startPlay() {
  39.     if (!hasMp3) {return false}
  40. 	DestroyPlayer();
  41. 	$ ("#" + this.id + " + a").after ("<div id='div" + this.id + "'></div>");
  42.     
  43. 	$ ("#div"+this.id).append("<audio id='NewAudioPlayer'></audio>");
  44.     $("#" + this.id).html("Stop")
  45.     $("#" + this.id).click(stopPlay)
  46.     $("#NewAudioPlayer").attr("controls", "controls");
  47.     $("#NewAudioPlayer").attr("src", $("#"+this.id).attr("formaction"));
  48.     $("#NewAudioPlayer").attr("buttonSelId", "#" + this.id);
  49.     $("#NewAudioPlayer").get(0).play();
  50. }
  51.  
  52. function stopPlay() {
  53.     DestroyPlayer();
  54.     $("#" + this.id).html("Play")
  55.     $("#" + this.id).click(startPlay)
  56. }