☰

YouTube - 显示当前音量

显示音量变化。

安装此脚本?
作者推荐脚本

您可能也喜欢YouTube - 音量调节 5%。

安装此脚本 
  1. // ==UserScript==
  2. // @name               YouTube - Display current volume
  3. // @name:fr            YouTube - Afficher le volume actuel
  4. // @name:es            YouTube - Mostrar el volumen actual
  5. // @name:de            YouTube - Aktuelle Lautstärke anzeigen
  6. // @name:it            YouTube - Visualizza il volume corrente
  7. // @name:zh-CN         YouTube - 显示当前音量
  8. // @namespace          https://gist.github.com/4lrick/7a069ce704be9ac95f00d8fb9c2c9bb2
  9. // @version            1.4
  10. // @description        Displays the volume when it's changing.
  11. // @description:fr     Affiche le volume lorsqu'il change.
  12. // @description:es     Muestra el volumen cuando cambia.
  13. // @description:de     Zeigt die Lautstärke an, wenn sie sich ändert.
  14. // @description:it     Visualizza il volume quando cambia.
  15. // @description:zh-CN  显示音量变化。
  16. // @author             4lrick
  17. // @match              https://www.youtube.com/*
  18. // @icon               https://www.google.com/s2/favicons?sz=64&domain=youtube.com
  19. // @grant              none
  20. // @license            GPL-3.0-only
  21. // ==/UserScript==
  22.  
  23. (function() {
  24.     'use strict';
  25.  
  26.     let volumeDisplayTimeout;
  27.     let lastMutedState;
  28.  
  29.     const VOLUME_DISPLAY_ID = 'ytp-video-volume';
  30.     const VOLUME_DISPLAY_DURATION = 1000;
  31.     const VOLUME_DISPLAY_STYLE = {
  32.         position: 'absolute',
  33.         top: '10%',
  34.         left: '50%',
  35.         transform: 'translateX(-50%)',
  36.         textAlign: 'center',
  37.         background: 'rgba(0, 0, 0, 0.5)',
  38.         color: '#eee',
  39.         fontSize: '175%',
  40.         zIndex: '19',
  41.         padding: '10px 20px',
  42.         borderRadius: '3%'
  43.     };
  44.  
  45.     function createVolumeDisplay() {
  46.         const volumeDisplay = document.createElement('div');
  47.  
  48.         volumeDisplay.id = VOLUME_DISPLAY_ID;
  49.         Object.assign(volumeDisplay.style, VOLUME_DISPLAY_STYLE);
  50.  
  51.         return volumeDisplay;
  52.     }
  53.  
  54.     function displayVolume(player) {
  55.         let volumeDisplay = document.getElementById(VOLUME_DISPLAY_ID) || player.appendChild(createVolumeDisplay());
  56.  
  57.         if (player.isMuted() !== lastMutedState) {
  58.             lastMutedState = player.isMuted();
  59.             volumeDisplay.style.display = 'none';
  60.             return;
  61.         }
  62.  
  63.         volumeDisplay.textContent = `${player.getVolume()}%`;
  64.         volumeDisplay.style.display = 'block';
  65.  
  66.         clearTimeout(volumeDisplayTimeout);
  67.         volumeDisplayTimeout = setTimeout(() => {
  68.             volumeDisplay.style.display = 'none';
  69.         }, VOLUME_DISPLAY_DURATION);
  70.     }
  71.  
  72.     function checkVideoExists() {
  73.         const videoElement = document.querySelector('video');
  74.         const player = document.getElementById('movie_player');
  75.  
  76.         if (!videoElement || !player) return;
  77.  
  78.         lastMutedState = player.isMuted();
  79.         videoElement.addEventListener('volumechange', () => displayVolume(player));
  80.         observer.disconnect();
  81.     }
  82.  
  83.     const observer = new MutationObserver(checkVideoExists);
  84.     observer.observe(document.body, { childList: true, subtree: true });
  85. })();