Music Bookmarklet

Developer
Chris Wachtman
Size
2,995 Kb
Views
22,264
  1. Music Bookmarklet Previews
  2. Music Bookmarklet HTML Codes
  3. Music Bookmarklet CSS Codes

How do I make an music bookmarklet?

All the good music player bookmarklets have disappeared in a cloud of 404 errors, so I made my own simple version with no dependencies. Lets see if I can host it here.. What is a music bookmarklet? How do you make a music bookmarklet? This script and codes were developed by Chris Wachtman on 17 October 2022, Monday.

Music Bookmarklet Previews
IQ Test

Music Bookmarklet - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Music Bookmarklet</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <p>All the good music player bookmarklets have disappeared in a cloud of 404 errors, so I made my own simple version with no dependencies. Lets see if I can host it here:</p>
<a class="bookmarklet" href="javascript:(function(){var a=document.links,c=[],d,e=0,f,g;for(g in a){var h=a[g].toString().toUpperCase();-1==h.indexOf('.MP3')&&-1==h.indexOf('.OGG')&&-1==h.indexOf('.WAV')||c.push(a[g])}function l(){d.pause();d=new Audio(c[e]);d.play();d.addEventListener('ended',function(){e++;l()},!1);m.innerHTML='';var b=decodeURIComponent(c[e].href);m.appendChild(document.createTextNode(b.substring(b.lastIndexOf('/')+1)));f=setInterval(function(){n()},100)}
function p(b,t,u,v,w){b=document.createElement(b);var k=document.createAttribute('style');k.value=t;b.setAttributeNode(k);k=document.createAttribute('data');k.value=v;b.setAttributeNode(k);b.appendChild(document.createTextNode(u));b.onclick=w;return b}var q=p('div','display:block;background:grey;position:fixed;bottom:0;left:0;height:50px;width:100%','','','');document.body.appendChild(q);var r=p('button','','|<','',function(){e--;l()});q.appendChild(r);
var s=p('button','','>','',function(){d.paused?(d.play(),f=setInterval(function(){n()},100)):(d.pause(),clearInterval(f));return!1});q.appendChild(s);var y=p('button','','>|','',function(){e++;l()});q.appendChild(y);var z=p('ul','width:300px;background:grey;position:absolute;bottom:100%;right:0;margin:0;','','','');q.appendChild(z);for(g in c){var A=decodeURIComponent(c[g].href),B=p('li','',A.substring(A.lastIndexOf('/')+1),g,function(){e=parseInt(this.getAttribute('data'));l()});z.appendChild(B)}
var m=p('div','position: absolute;bottom: 0;white-space: nowrap;height: 50%;background: skyblue;border-right:9999px solid grey;','','',function(b){x=b.clientX;x/=document.width;d.currentTime=d.duration*x});q.appendChild(m);function n(){m.style.width=100*(d.currentTime/d.duration)+'%'}d=new Audio;l();
})();">Music Bookmarklet</a>
<ul> <li>Drag the bookmarklet into your bookmarks.</li> <li>Load a webpage containing links to mp3 files.</li> <li>Click the bookmark.</li> <li>If it worked, then you’ll see buttons beside the mp3 links.</li> <li>Clicking the buttons will start the music.</li>
</ul>
<p>If it isnt working quite right, then replace the URL of the bookmark with this:</p>
<span class="code">javascript:(function(){var a=document.links,c=[],d,e=0,f,g;for(g in a){var h=a[g].toString().toUpperCase();-1==h.indexOf('.MP3')&&-1==h.indexOf('.OGG')&&-1==h.indexOf('.WAV')||c.push(a[g])}function l(){d.pause();d=new Audio(c[e]);d.play();d.addEventListener('ended',function(){e++;l()},!1);m.innerHTML='';var b=decodeURIComponent(c[e].href);m.appendChild(document.createTextNode(b.substring(b.lastIndexOf('/')+1)));f=setInterval(function(){n()},100)}
function p(b,t,u,v,w){b=document.createElement(b);var k=document.createAttribute('style');k.value=t;b.setAttributeNode(k);k=document.createAttribute('data');k.value=v;b.setAttributeNode(k);b.appendChild(document.createTextNode(u));b.onclick=w;return b}var q=p('div','display:block;background:grey;position:fixed;bottom:0;left:0;height:50px;width:100%','','','');document.body.appendChild(q);var r=p('button','','|<','',function(){e--;l()});q.appendChild(r);
var s=p('button','','>','',function(){d.paused?(d.play(),f=setInterval(function(){n()},100)):(d.pause(),clearInterval(f));return!1});q.appendChild(s);var y=p('button','','>|','',function(){e++;l()});q.appendChild(y);var z=p('ul','width:300px;background:grey;position:absolute;bottom:100%;right:0;margin:0;','','','');q.appendChild(z);for(g in c){var A=decodeURIComponent(c[g].href),B=p('li','',A.substring(A.lastIndexOf('/')+1),g,function(){e=parseInt(this.getAttribute('data'));l()});z.appendChild(B)}
var m=p('div','position: absolute;bottom: 0;white-space: nowrap;height: 50%;background: skyblue;border-right:9999px solid grey;','','',function(b){x=b.clientX;x/=document.width;d.currentTime=d.duration*x});q.appendChild(m);function n(){m.style.width=100*(d.currentTime/d.duration)+'%'}d=new Audio;l();
})();</span>
<p>Find music to try it out <a href="http://www.googlemusicsearch.com/">here</a>.</p>
</body>
</html>

Music Bookmarklet - Script Codes CSS Codes

body{text-align: center;background-color: #619ec2;font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
color: #fff;
-webkit-font-smoothing: antialiased;
text-shadow: 0 1px 1px rgba(0,0,0,0.3);
max-width: 600px;margin:auto}
ul{text-align: left;max-width: 400px;margin:auto}
.bookmarklet,.code {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
font-size: 1.25em;
position: relative;
cursor: move;
color: #fff;
text-decoration: none;
background: rgba(0,0,0,0.25);
padding: 10px 20px 8px;
margin: 0 0 10px 0;
display: inline-block;
}
.code{
cursor: initial; max-width: 560px; max-height: 100px;
overflow: scroll;
text-align: left;
}
Music Bookmarklet - Script Codes
Music Bookmarklet - Script Codes
Home Page Home
Developer Chris Wachtman
Username cwacht
Uploaded October 17, 2022
Rating 3
Size 2,995 Kb
Views 22,264
Do you need developer help for Music Bookmarklet?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chris Wachtman (cwacht) Script Codes
Name
Icon Orb
Personal Webpage Brainstorm
Font Awesome Forever
Minimal Menu
Destiny Weapon Inventory
Single Element ChromeCast Icon
NASA Concept
What Does the Fox Say Soundboard
A Pen by Chris Wachtman
Halo 5 REQ Guide Bookmarklet
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!