API tools faq
paste
Advertisement
solaire

customizable playlist

solaire
Feb 17th, 2018
1,609
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.22 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <!--
  3.  
  4. This page is made to customize your music player.
  5.  
  6. Below are the set of options that can be overridden.
  7.  
  8. See for help
  9. https://nouvae.tumblr.com/codes/playlist/install
  10.  
  11. customizable playlist by nouvae
  12.  
  13. -->
  14. <head>
  15. <meta charset=utf-8>
  16. <link href="https://fonts.googleapis.com/css?family=Karla|Inconsolata|Yrsa" rel="stylesheet">
  17. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  18. <script src="https://static.tumblr.com/qbey5ak/ZyJp4b53n/nouplay.js"></script>
  19. <link href="https://static.tumblr.com/qbey5ak/ie5p4bbjw/nouplay.css" type="text/css" rel="stylesheet">
  20. <script>
  21.  
  22. /**
  23. *
  24. * CUSTOMIZE YOUR MUSIC PLAYER
  25. *
  26. **/
  27.  
  28. // REQUIRED
  29.  
  30. // your username
  31. // i.e. username = "nouvae";
  32. username = "";
  33.  
  34. // the tag where the audio is under
  35. // if your tag has a space, replace the spaces
  36. // with a + sign.
  37. // i.e. tag = "music"; or tag = "my+playlist"
  38. tag = "";
  39.  
  40.  
  41. // OPTIONAL (will rely on default player)
  42.  
  43. // the width of your playlist (in pixels)
  44. // i.e. width = "240px";
  45. width = "125px";
  46.  
  47. // the title of your playlist
  48. // i.e. title = "favorite songs";
  49. title = "untitled";
  50.  
  51. // the type of text
  52. // i.e. fontfam = "arial";
  53. // you can upload fonts via fonts.google.com or with css @font-face
  54. // or use the fonts I have downloaded "karla", "inconsolata", or "yrsa"
  55. fontfam = "karla";
  56.  
  57. // the size of the text (in pixels)
  58. // i.e. fontsize = "15px";
  59. fontsize = "12px";
  60.  
  61. // the background of your album cover
  62. // for color i.e. cover = "#cccccc";
  63. // for background image i.e. cover = "url('https://thelinkofyourimage.com')";
  64. cover = "#f2f2f2";
  65.  
  66. // first part changes color of the player
  67. // second part changes the color of the buttons and text (if true, it changes the color of the buttons and text to white)
  68. // basic skins: playercolor = ["#000000", true]; (black player)
  69. // playercolor = ["#ffffff", false]; (white player)
  70. playercolor = ["#ffffff", false];
  71.  
  72. // the color of the borders
  73. // i.e. border = "#d2d2d2";
  74. border = "#f3f3f3";
  75.  
  76. // the color of the progress bar
  77. // i.e. progresscolor = "#000000";
  78. progresscolor = "blue";
  79.  
  80. // the height of your progress bar (in pixels)
  81. // i.e. hotofprog = "3px";
  82. // if you don't want it, just make it equal to "0px"
  83. hofprog = "2px";
  84.  
  85. // the alignment of the text
  86. // i.e. align = "center";
  87. align = "left";
  88.  
  89. // write 'true' if you want the following on your playlist.
  90. // otherwise, write 'false'
  91. // i.e. hascover = true;
  92.  
  93. // displays the album cover
  94. hascover = false;
  95.  
  96. // displays the playlist title
  97. hastitle = false;
  98.  
  99. // displays the name of the tracks
  100. hastrack = false;
  101.  
  102. // displays the list of tracks
  103. // if 'hastrack' is true
  104. iflist = false;
  105.  
  106. // carousels the current song
  107. ifscr = false;
  108.  
  109. // displays text as all uppercase
  110. ifuppercase = false;
  111.  
  112. // rounds the corners of the player
  113. ifrounded = false;
  114.  
  115. // removes next and previous buttons
  116. ifsinglebutt = false;
  117.  
  118. // displays tracks as a sidebar
  119. // if 'hastrack' is true
  120. horizon = false;
  121.  
  122. </script>
  123. </head>
  124.  
  125. <body>
  126. <div id="playlist">
  127. <div id="aside">
  128. <div id="title"></div>
  129. <div id="cover"></div>
  130. <div id="progressbg"></div>
  131. <div id="progress"></div>
  132. <div id="player"></div>
  133. <div id="buttons">
  134. <div class="prev">
  135. <svg height="1.4em" id="Layer_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="25px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M256,128L32,256l224,128V260.8L480,384V128L256,251.2V128L256,128z"/></svg>
  136. </div>
  137.  
  138. <div class="active">
  139. <div class="play"><svg height="1.4em" id="Layer_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="25px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M128,96v320l256-160L128,96L128,96z"/></g></svg></div>
  140. <div class="pause"><svg height="1.4em" id="Layer_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="25px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><rect height="320" width="79" x="128" y="96"/><rect height="320" width="79" x="305" y="96"/></g></svg></div>
  141. </div>
  142.  
  143. <div class="next">
  144. <svg height="1.4em" id="Layer_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="25px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M256,128v123.2L32,128v256l224-123.2V384l224-128L256,128L256,128z"/></svg>
  145. </div>
  146. </div>
  147. </div>
  148.  
  149. <div id="tracks"></div>
  150. </div>
  151. <script src="https://static.tumblr.com/qbey5ak/uI7p4py2h/nouplay2.js"></script>
  152.  
  153. <script>
  154. /**
  155. * code that generates the iframe
  156. **/
  157. function gen() {
  158. $("head").append("<style>body {text-align:right;font-family:inconsolata,monospace;font-size:14px;}a{text-decoration:none;color:blue;}a:hover{color:darkblue;}#genwrap a {margin-right:1.5em;} #genwrap{padding:2em;background:#ffffff;transition:0.5s;opacity:0.5;position:fixed;bottom:0px;right:0px;}#genwrap:hover {opacity:0.9;transition:0.5s;} #gen {font-family:inconsolata;font-size:1em;cursor:pointer;border:0;outline:0;background:#eeeeee;color:#000000;padding:1em 1.2em;margin-bottom:10px;}#gen:hover {background:#333333;color:#ffffff;} #magic{outline:0;padding:1em;width:600px;display:block;height:80px;}#genbuttons{text-align:left;margin:1em 0em;display:block;}</style>");
  159. $("body").append("<div id='genwrap'><textarea onClick='this.select()' id='magic'></textarea><br><div id='genbuttons'><a id='gen'>Generate iframe</a><a href='https://nouvae.tumblr.com'>#</a><a href='https://nouvae.tumblr.com/codes/playlist/install'>manual</a></div></div>");
  160. $("#gen").click(function() {
  161. var plink = window.location.href + "?g=hidden";
  162. document.getElementById("magic").textContent = '<iframe src="' + plink +'" width="' + framew + '" height="' + frameh + '" style="overflow:hidden!important;border:0!important;" scrolling="no"></iframe>';
  163. });
  164. };
  165.  
  166. $(document).ready(function() {
  167. var hasIndex = window.location.href.indexOf("?g=hidden");
  168. if (hasIndex !== -1) {
  169. return;
  170. }
  171. else {
  172. gen();
  173. }
  174.  
  175. });
  176. </script>
  177.  
  178. </body>
  179. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!