☰

| YouTube Music - Speed Control |

Adds a nice looking ah speed control bar to YouTube Music with real smooth playback adjustments

  1. // ==UserScript==
  2. // @name         | YouTube Music - Speed Control |
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2.0
  5. // @description  Adds a nice looking ah speed control bar to YouTube Music with real smooth playback adjustments
  6. // @author       Emree.el
  7. // @match        https://music.youtube.com/*
  8. // @grant        none
  9. // @license      MIT
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // CSS for modern dark UI
  16.     const style = document.createElement('style');
  17.     style.innerHTML = `
  18.         .speed-control-container {
  19.             position: fixed;
  20.             top: 50%;
  21.             right: 15px;
  22.             z-index: 9999;
  23.             transform: translateY(-50%);
  24.             background: rgba(20, 20, 30, 0.95);
  25.             padding: 20px;
  26.             border-radius: 12px;
  27.             box-shadow: 0 4px 15px rgba(128, 0, 255, 0.8); /* Purple aura glow */
  28.             display: none;
  29.             flex-direction: column;
  30.             align-items: center;
  31.             animation: fadeIn 0.3s ease-in-out;
  32.             font-family: 'Arial', sans-serif;
  33.         }
  34.  
  35.         .speed-checkbox {
  36.             position: fixed;
  37.             top: 50%;
  38.             right: 15px;
  39.             width: 25px;
  40.             height: 25px;
  41.             cursor: pointer;
  42.             background: #1c1c1c;
  43.             border: 2px solid rgba(128, 0, 255, 0.8);
  44.             border-radius: 5px;
  45.             z-index: 10000;
  46.             box-shadow: 0 0 10px rgba(128, 0, 255, 0.5);
  47.             transition: box-shadow 0.3s ease-in-out;
  48.         }
  49.  
  50.         .speed-checkbox:hover {
  51.             box-shadow: 0 0 20px rgba(128, 0, 255, 1); /* Glow effect on hover */
  52.         }
  53.  
  54.         .speed-bar {
  55.             width: 150px;
  56.             height: 10px;
  57.             margin-top: 10px;
  58.             background: #333;
  59.             border-radius: 10px;
  60.             position: relative;
  61.         }
  62.  
  63.         .speed-bar input[type="range"] {
  64.             width: 100%;
  65.             appearance: none;
  66.             background: transparent;
  67.             position: absolute;
  68.             top: 0;
  69.             margin: 0;
  70.         }
  71.  
  72.         .speed-bar input[type="range"]::-webkit-slider-thumb {
  73.             appearance: none;
  74.             width: 14px;
  75.             height: 14px;
  76.             border-radius: 50%;
  77.             background: rgba(255, 255, 255, 0.9);
  78.             cursor: pointer;
  79.             border: 2px solid rgba(128, 0, 255, 0.8);
  80.         }
  81.  
  82.         .speed-label {
  83.             color: #fff;
  84.             font-weight: bold;
  85.             font-size: 14px;
  86.             margin-bottom: 5px;
  87.         }
  88.  
  89.         @keyframes fadeIn {
  90.             from { opacity: 0; }
  91.             to { opacity: 1; }
  92.         }
  93.     `;
  94.     document.head.appendChild(style);
  95.  
  96.     // Create the checkbox
  97.     const checkbox = document.createElement('div');
  98.     checkbox.classList.add('speed-checkbox');
  99.     document.body.appendChild(checkbox);
  100.  
  101.     // Create the control container
  102.     const container = document.createElement('div');
  103.     container.classList.add('speed-control-container');
  104.     container.innerHTML = `
  105.         <div class="speed-label">Playback Speed</div>
  106.         <div class="speed-bar">
  107.             <input type="range" min="0.5" max="2" step="0.1" value="1" id="speed-slider">
  108.         </div>
  109.     `;
  110.     document.body.appendChild(container);
  111.  
  112.     // Toggle visibility
  113.     checkbox.addEventListener('click', () => {
  114.         container.style.display = container.style.display === 'flex' ? 'none' : 'flex';
  115.     });
  116.  
  117.     // Handle speed changes
  118.     const slider = document.getElementById('speed-slider');
  119.     slider.addEventListener('input', () => {
  120.         const player = document.querySelector('video, audio');
  121.         if (player) {
  122.             player.playbackRate = parseFloat(slider.value);
  123.         }
  124.     });
  125. })();