☰

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.

  1. // ==UserScript==
  2. // @name         Inline Audio Player
  3. // @version      1.3
  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. // @exclude      https://www.inoreader.com/*
  10. // @exclude      http://instagram.com/*
  11. // @exclude      https://instagram.com/*
  12. // @grant        none
  13. // @require 	 http://code.jquery.com/jquery-2.1.3.js
  14. // @namespace https://greatest.deepsurf.us/users/8668
  15. // ==/UserScript==
  16.  
  17. 	$("body").before ("<style>" +
  18.                       ".buttonPlay {font-size: 11px; background-color: #fff0a0; font-family: Trebuchet MS; padding: 2px 5px; margin-right: 6px;}" +
  19.                       ".infoSong { margin: 4px; font-size: 11px; font-family: Trebuchet MS; font-style: italic;}" +
  20.                       "</style>");
  21.  
  22.     var audio_links = $("a[href*='.mp3'], a[href*='.wav'], a[href*='.ogg'], a[href*='.m4a'], a[href*='.mp4']");
  23.     var hasMp3 =  audio_links.length > 0;
  24. 	var NrAudio  =  audio_links.length;
  25. 	if (hasMp3) {
  26. 		$("body").children().first().before("<div id='ButtStartIAP'>" + 
  27.                   " * <button style='background-color: #b0e0e6;'>" +
  28.                   NrAudio + " Audio links. Click for start inline play</button> * </div>");
  29.         $("#ButtStartIAP").click (InsPlayButtons);
  30.     }
  31.  
  32. function InsPlayButtons() {
  33. 	// console.log("Inline Mp3 Player start.... N. page links: " + audio_links.length);
  34.     $("#ButtStartIAP").remove();
  35. 	if (hasMp3) {
  36. 		for (var i = 0; i < audio_links.length; i++) {
  37.             $(audio_links[i]).before ("<button id='B"+i+"' class=\"buttonPlay\">Play</Button>");
  38.             $("#B"+i).attr("formaction", audio_links[i].href);
  39.             $("#B"+i).click (startPlay);  
  40.             } 
  41.     } //if hasMp3
  42. }            
  43.  
  44. function DestroyPlayer() {
  45.         if ( $("#NewAudioPlayer").size() > 0) { 
  46.              var buttonId = $("#NewAudioPlayer").attr("buttonId");
  47.              $("#"+buttonId).html("Play")
  48.              $("#"+buttonId).css ("background-color","#fff0a0");  
  49.     		 $("#"+buttonId).click(startPlay)
  50.              $("#NewAudioPlayer").parent().remove()
  51.         }
  52. }            
  53.  
  54. function startPlay() {
  55.     if (!hasMp3) {return false}
  56. 	DestroyPlayer();
  57. 	$ ("#" + this.id + " + a").after ("<div id='div" + this.id + "'></div>");
  58.     $ ("#div"+this.id).append("<audio id='NewAudioPlayer'></audio>");
  59.     $("#" + this.id).html("Stop")
  60.     $("#" + this.id).css ("background-color","#ffa0f0");  
  61.     $("#" + this.id).click(stopPlay)
  62.     $("#NewAudioPlayer").attr("controls", "controls");
  63.     $("#NewAudioPlayer").attr("src", $("#"+this.id).attr("formaction"));
  64.     $("#NewAudioPlayer").attr("buttonId", this.id);
  65.     $("#NewAudioPlayer").bind('durationchange', function() { WritePlayInfo(this); } );
  66.     $("#NewAudioPlayer").bind('ended'		  , function() { PlayNext(this); 	  } );
  67.     $("#NewAudioPlayer").bind('error'		  , function() { ErrorEvent("error"  );  } );
  68.     $("#NewAudioPlayer").bind('stalled'		  , function() { ErrorEvent("stalled");  } );
  69.     $("#NewAudioPlayer").get(0).play();
  70. }
  71.  
  72. function ErrorEvent(evento) {
  73.    // console.debug ("Error! (Event:" + evento + ")", divId );
  74.    if (evento == "error") { evento = evento + " during the loading" }
  75.    $("#NewAudioPlayer").parent().after("<div>*** Error! (Event:" + evento + ") ***</div>");
  76.    stopPlay();
  77. }
  78.  
  79.  
  80. function WritePlayInfo(NAP) {
  81.     durata = NAP.duration; 
  82.     // console.debug (NAP.src, durata);
  83.     durata_min = parseInt(durata/60); 
  84.     durata_sec = parseInt(durata-(parseInt(durata/60)*60));
  85.     durataf = durata_min + ":" + durata_sec;
  86.     buttonId = $("#"+NAP.id).attr("buttonId");
  87.     divId = "#div" + buttonId;
  88.     // console.debug (buttonId, divId);
  89.     urlplayed = $("#" + buttonId + " + a").attr("href");
  90.     $ (divId).append("<br/><div class='infoSong'>url: " + decodeURI (urlplayed) + " - durata:" + durataf + "</div>");
  91. }
  92.  
  93. function PlayNext(NAP) {
  94.     buttonId = $("#"+NAP.id).attr("buttonId");
  95.     nId = parseInt( buttonId.substring (1,buttonId.length) );
  96.     if (nId >= NrAudio-1) {
  97.         console.debug ("Stop Playing"); return false 
  98.     } 
  99.     nId = nId+1;
  100.     console.debug ("---- Play next. Song n.", nId+1, " of ", NrAudio);
  101.     $("#B" + nId).click();
  102. }
  103.  
  104. function stopPlay() {
  105.     DestroyPlayer();
  106.     $("#" + this.id).html("Play")
  107.     $("#" + this.id).click(startPlay)
  108. }