User:Vitrinekast/Snatch these snippets: Difference between revisions
Vitrinekast (talk | contribs) No edit summary |
Vitrinekast (talk | contribs) No edit summary |
||
(2 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
Copy-paste this into your console! (Right click -> inspect elements > console) | Copy-paste this into your console! (Right click -> inspect elements > console) | ||
== Remix Mixcloud == | |||
(copy paste it into the console of your browser when visiting mixcloud.com) | |||
<syntaxhighlight> | |||
var remixCloud = function () { | |||
var audio = document.querySelector("audio"); | |||
var svgs = document.querySelectorAll("svg"); | |||
var h1s = document.querySelectorAll("h1, h2, h3,button,img"); | |||
var as = document.querySelectorAll("a"); | |||
var timeout; | |||
document.addEventListener("mousemove", function (e) { | |||
if (!timeout) { | |||
timeout = window.setTimeout(function () { | |||
timeout = false; | |||
var r = 3 * (e.clientY / window.innerWidth) + 0.25; | |||
audio.playbackRate = r; | |||
audio.currentTime = audio.duration * (e.clientX / window.innerWidth); | |||
svgs.forEach((el) => { | |||
el.style.transform = `scale(${(r, r)})`; | |||
}); | |||
as.forEach((el) => { | |||
el.style.transform = `rotate(${r * 20}deg)`; | |||
}); | |||
document.body.style.transform = `rotate(${r * -4}deg)`; | |||
h1s.forEach((el) => { | |||
el.style.transform = `rotate(${r * 10}deg)`; | |||
}); | |||
}, 100); | |||
} | |||
}); | |||
}; | |||
remixCloud(); | |||
</syntaxhighlight > | |||
== Adding audio elements to index files == | == Adding audio elements to index files == | ||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> |
Latest revision as of 13:09, 24 October 2023
Copy-paste this into your console! (Right click -> inspect elements > console)
Remix Mixcloud
(copy paste it into the console of your browser when visiting mixcloud.com)
var remixCloud = function () {
var audio = document.querySelector("audio");
var svgs = document.querySelectorAll("svg");
var h1s = document.querySelectorAll("h1, h2, h3,button,img");
var as = document.querySelectorAll("a");
var timeout;
document.addEventListener("mousemove", function (e) {
if (!timeout) {
timeout = window.setTimeout(function () {
timeout = false;
var r = 3 * (e.clientY / window.innerWidth) + 0.25;
audio.playbackRate = r;
audio.currentTime = audio.duration * (e.clientX / window.innerWidth);
svgs.forEach((el) => {
el.style.transform = `scale(${(r, r)})`;
});
as.forEach((el) => {
el.style.transform = `rotate(${r * 20}deg)`;
});
document.body.style.transform = `rotate(${r * -4}deg)`;
h1s.forEach((el) => {
el.style.transform = `rotate(${r * 10}deg)`;
});
}, 100);
}
});
};
remixCloud();
Adding audio elements to index files
// select all links
document.querySelectorAll("a").forEach((link) => {
// if it includes your audio format (regex)
if(link.href.match(/\.(?:wav|mp3)$/i)) {
// create an audio element and set its source to yourlink
var audioEl = document.createElement("audio");
audioEl.src = link.href;
audioEl.controls = true;
audioEl.style.display = "block";
link.insertAdjacentElement("afterend", audioEl)
};
// or an image
if(link.href.match(/\.(?:jpg|png)$/i)) {
var imgEl = document.createElement("img");
imgEl.src = link;
imgEl.style.display = "block";
link.insertAdjacentElement("afterend", imgEl)
}
});