☰

Syntax Library Audio Player

A syntax library audio player - play audio straight from the audio page!

  1. // ==UserScript==
  2. // @name         Syntax Library Audio Player
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2024-01-25
  5. // @description  A syntax library audio player - play audio straight from the audio page!
  6. // @author       You
  7. // @match        https://www.syntax.eco/library/*
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=syntax.eco
  9. // @grant        none
  10. // @license      MIT
  11. // ==/UserScript==
  12.  
  13. (async function() {
  14.     'use strict';
  15.  
  16.     const assetInfo = document.querySelector('#asset-info');
  17.     const assetID = assetInfo.getAttribute('data-asset-id');
  18.     var isaudio = false;
  19.  
  20.     function makeid(length) {
  21.         let result = '';
  22.         const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
  23.         const charactersLength = characters.length;
  24.         let counter = 0;
  25.         while (counter < length) {
  26.             result += characters.charAt(Math.floor(Math.random() * charactersLength));
  27.             counter += 1;
  28.         }
  29.         return result;
  30.     }
  31.     const btnid = makeid(20);
  32.     const audid = makeid(20);
  33.  
  34.     async function getAssetType() {
  35.         const response = await fetch('https://www.syntax.eco/public-api/v1/asset/' + assetID);
  36.         const data = await response.json();
  37.         return data.data.asset_type;
  38.     }
  39.  
  40.     async function th() {
  41.         const assetType = await getAssetType();
  42.         if (assetType !== 0) {
  43.             if (assetType === "Audio") {
  44.                 isaudio = true;
  45.             }
  46.         }
  47.     }
  48.  
  49.     await th();
  50.     if (isaudio) {
  51.         var button;
  52.         var audio;
  53.  
  54.         const img = document.querySelector(`img[src*="/Thumbs/Asset.ashx?assetId=` + assetID + `&x=420&y=420"]`);
  55.         var html = '<btn id="' + btnid + '" style="right: 1rem; bottom: 1rem;" class="position-absolute bottom-right btn btn-primary fw-bold w-30 btn-sm">Play</btn>';
  56.         img.insertAdjacentHTML('afterend', html);
  57.  
  58.         button = document.querySelector(`#` + btnid);
  59.         var html2 = '<audio id="' + audid + '" src="https://www.syntax.eco/asset?id=' + assetID + '" alt="My Audio"></audio>';
  60.         img.insertAdjacentHTML('afterend', html2);
  61.  
  62.         audio = document.querySelector(`#` + audid);
  63.         var isPlaying = false;
  64.  
  65.         function togglePlay() {
  66.             isPlaying ? audio.pause() : audio.play();
  67.         };
  68.  
  69.         audio.onplaying = function() {
  70.             isPlaying = true;
  71.             button.innerText = "Pause";
  72.         };
  73.         audio.onpause = function() {
  74.             isPlaying = false;
  75.             button.innerText = "Play";
  76.         };
  77.  
  78.         button.addEventListener('click', togglePlay);
  79.  
  80.         // Prevent the audio from autoplaying
  81.         audio.addEventListener('loadedmetadata', () => {
  82.             audio.playbackState = 'paused';
  83.         });
  84.     }
  85.  
  86. })();