User:Vitrinekast/Snatch these snippets: Difference between revisions

From XPUB & Lens-Based wiki
No edit summary
No edit summary
 
Line 3: Line 3:
== Remix Mixcloud ==
== Remix Mixcloud ==
(copy paste it into the console of your browser when visiting mixcloud.com)
(copy paste it into the console of your browser when visiting mixcloud.com)
<code>
<syntaxhighlight>
var remixCloud = function () {
var remixCloud = function () {
   var audio = document.querySelector("audio");
   var audio = document.querySelector("audio");
Line 10: Line 10:
   var as = document.querySelectorAll("a");
   var as = document.querySelectorAll("a");
   var timeout;
   var timeout;
   document.addEventListener("mousemove", function (e) {
   document.addEventListener("mousemove", function (e) {
     if (!timeout) {
     if (!timeout) {
Line 39: Line 38:


remixCloud();
remixCloud();
</code>
</syntaxhighlight >
== Adding audio elements to index files ==
== Adding audio elements to index files ==
<syntaxhighlight lang="javascript">
<syntaxhighlight lang="javascript">

Latest revision as of 14: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)
    }
});