Turn Audio Links into inline audio players

This is a fork of https://greasyfork.org/users/8668, modified to work with a platform I’m working for. It adds a small Play button next to links to audio.

To use it, you load the page, and then wait several seconds. This is required because the page loads in parts and may take more than a couple seconds to render. A button at the top of the screen will, when clicked, add play buttons to all the audio links.

To run this, you need Greasemonkey or Tampermonkey. Copy-paste the code below, and reload the page you want modified.

// ==UserScript==
// @name         Inline Audio Player
// @version      1.3
// @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        https://app.dataannotation.tech/*
// @include      https://app.dataannotation.tech/*
// @exclude      http://www.inoreader.com/*
// @exclude      https://www.inoreader.com/*
// @exclude      http://instagram.com/*
// @exclude      https://instagram.com/*
// @grant        none
// @require 	   http://code.jquery.com/jquery-2.1.3.js
// @namespace    https://greasyfork.org/users/8668
// ==/UserScript==


function the_main_deal() {
    $("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>");

		window.audio_links = $("a[href*='.mp3'], a[href*='.wav'], a[href*='.ogg'], a[href*='.m4a'], a[href*='.mp4']");
  	console.log("Audio Links:", audio_links);
    window.hasMp3 =  window.audio_links.length > 0;
    window.NrAudio  =  window.audio_links.length;
    if (window.hasMp3) {
    	console.log("Adding ButtStartIAP")
      $("body").children().first().before("<div id='ButtStartIAP'>" + 
                                            " * <button style='background-color: #b0e0e6;'>" +
                                            window.NrAudio + " Audio links. Click for start inline play</button> * </div>");
      $("#ButtStartIAP").click(InsPlayButtons);
    }
}
$(document).ready(function () {
  setTimeout(the_main_deal, 4000);
});

     
function InsPlayButtons() {
    	console.log("Inline Mp3 Player start.... N. page links: " + audio_links.length);
      $("#ButtStartIAP").remove();
    	if (window.hasMp3) {
    		for (var i = 0; i < window.audio_links.length; i++) {
                $(window.audio_links[i]).before ("<button id='B"+i+"' class=\"buttonPlay\">Play</Button>");
                $("#B"+i).attr("formaction", window.audio_links[i].href);
                $("#B"+i).click(startPlay);  
                } 
        } //if hasMp3
    }            
     
function DestroyPlayer() {
		console.log("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(evt) {
  evt.preventDefault();
  if (!window.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").bind('error'		  , function() { ErrorEvent("error"  );  } );
  $("#NewAudioPlayer").bind('stalled'		  , function() { ErrorEvent("stalled");  } );
  $("#NewAudioPlayer").get(0).play();
}
     
function ErrorEvent(evento) {
  console.debug ("Error! (Event:" + evento + ")", divId );
  if (evento == "error") { evento = evento + " during the loading" }
  $("#NewAudioPlayer").parent().after("<div>*** Error! (Event:" + evento + ") ***</div>");
  stopPlay();
}


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 >= window.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)
}

Was this helpful?

YesNo

0 / 0