☰

YouTube - Volume Badge

Displays a badge on the volume button showing the current volume percentage.

スクリプトをインストール?
作者が勧める他のスクリプト

YouTube - Playback Speed Sliderも気に入るかもしれません。

スクリプトをインストール
このスクリプトの質問や評価の投稿はこちら、通報はこちらへお寄せください。 
  1. // ==UserScript==
  2. // @name               YouTube - Volume Badge
  3. // @name:fr            YouTube - Badge de Volume
  4. // @name:es            YouTube - Indicador de volumen
  5. // @name:de            YouTube - Lautstärke-Anzeige
  6. // @name:it            YouTube - Etichetta del volume
  7. // @name:zh-CN         YouTube - 音量徽章
  8. // @namespace          https://gist.github.com/4lrick/89f4efb2fb0a3c48cc3411edeb6a7339
  9. // @version            1.0
  10. // @description        Displays a badge on the volume button showing the current volume percentage.
  11. // @description:fr     Affiche un badge sur le bouton de volume indiquant le pourcentage actuel.
  12. // @description:es     Muestra una insignia en el botón de volumen con el porcentaje actual.
  13. // @description:de     Zeigt ein Abzeichen auf dem Lautstärkeknopf mit dem aktuellen Prozentsatz an.
  14. // @description:it     Mostra un'etichetta sul pulsante del volume con la percentuale attuale.
  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.     const VOLUME_BADGE_ID = 'ytp-volume-badge';
  27.     const VOLUME_BADGE_STYLE = {
  28.         position: 'absolute',
  29.         top: '12px',
  30.         right: '10px',
  31.         padding: '1px 3px',
  32.         backgroundColor: 'var(--yt-spec-red-indicator, #e1002d)',
  33.         fontFamily: 'Verdana,sans-serif',
  34.         fontSize: '11px',
  35.         fontWeight: 'bold',
  36.         color: 'white',
  37.         textShadow: '0 2px 0 rgba(0,0,0,.6)',
  38.         backgroundImage: 'none',
  39.         borderRadius: '1.5px',
  40.         height: 'auto',
  41.         width: 'auto',
  42.         lineHeight: 'normal',
  43.         transition: 'opacity 0.2s ease',
  44.         opacity: '0',
  45.     };
  46.  
  47.     function createBadge() {
  48.         const badge = document.createElement('div');
  49.  
  50.         badge.id = VOLUME_BADGE_ID;
  51.         Object.assign(badge.style, VOLUME_BADGE_STYLE);
  52.  
  53.         return badge;
  54.     }
  55.  
  56.     function injectBadge() {
  57.         const muteBtn = document.querySelector('.ytp-mute-button');
  58.         if (!muteBtn || document.getElementById(VOLUME_BADGE_ID)) return;
  59.  
  60.         const badge = createBadge();
  61.         muteBtn.style.position = 'relative';
  62.         muteBtn.appendChild(badge);
  63.         return badge;
  64.     }
  65.  
  66.     function updateBadgeSize() {
  67.         const badge = document.getElementById(VOLUME_BADGE_ID);
  68.         if (!badge) return;
  69.  
  70.         const fullscreenEl = document.fullscreenElement;
  71.         const video = document.querySelector('video');
  72.         const isVideoFullscreen = fullscreenEl && fullscreenEl.contains(video);
  73.  
  74.         if (isVideoFullscreen) {
  75.             badge.style.fontSize = '11px';
  76.         } else {
  77.             badge.style.fontSize = '9px';
  78.         }
  79.     }
  80.  
  81.     function displayBadge(player) {
  82.         let badge = document.getElementById(VOLUME_BADGE_ID) || injectBadge();
  83.         if (!badge || !player) return;
  84.  
  85.         const volume = player.getVolume();
  86.         const isMuted = player.isMuted() || volume === 0;
  87.         updateBadgeSize();
  88.  
  89.         badge.textContent = volume;
  90.         badge.style.opacity = isMuted ? '0' : '1';
  91.     }
  92.  
  93.     function checkVideoExists() {
  94.         const video = document.querySelector('video');
  95.         const player = document.getElementById('movie_player');
  96.         if (!video || !player) return;
  97.  
  98.         displayBadge(player);
  99.  
  100.         video.addEventListener('volumechange', () => {
  101.             displayBadge(player);
  102.         });
  103.  
  104.         observer.disconnect();
  105.     }
  106.  
  107.     const observer = new MutationObserver(checkVideoExists);
  108.     observer.observe(document.body, { childList: true, subtree: true });
  109.     document.addEventListener('fullscreenchange', updateBadgeSize);
  110. })();