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-27 提交的版本,查看 最新版本

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

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址