Custom volume slider for YouTube videos with increased length and precise control
// ==UserScript==
// @name YouTube Volume Booster
// @namespace https://github.com/ToLIManl
// @version 0.6
// @description:en Custom volume slider for YouTube videos with increased length and precise control
// @description:ru Пользовательский ползунок громкости для видео YouTube с увеличенной длиной и точным контролем.
// @description Custom volume slider for YouTube videos with increased length and precise control
// @author ToLIMan
// @match https://www.youtube.com/*
// @grant none
// @license MIT
// @name:ru Увелечитель громкости Ютуб
// @name:en Youtube Volume Booster
// ==/UserScript==
(function() {
'use strict';
// Function to calculate the volume based on slider position
function calculateVolume(position, sliderWidth) {
// Calculate volume percentage based on slider position
const volume = (position / sliderWidth) * 1400; // Increased maximum volume
// Return the volume percentage with 3 decimal places
return volume.toFixed(3);
}
// Function to update the volume display at the center of the screen
function updateVolumeDisplay(volume) {
// Create a div for the volume display
const volumeDisplay = document.createElement('div');
volumeDisplay.id = 'customVolumeDisplay';
volumeDisplay.style.position = 'fixed';
volumeDisplay.style.top = '50%';
volumeDisplay.style.left = '50%';
volumeDisplay.style.transform = 'translate(-50%, -50%)';
volumeDisplay.style.background = 'rgba(0, 0, 0, 0.7)';
volumeDisplay.style.color = '#fff';
volumeDisplay.style.padding = '10px';
volumeDisplay.style.borderRadius = '5px';
volumeDisplay.style.zIndex = '9999';
volumeDisplay.innerText = `Volume: ${volume}%`;
// Append the volume display to the body
document.body.appendChild(volumeDisplay);
// Remove the volume display after 1 second
setTimeout(() => {
volumeDisplay.remove();
}, 1000);
}
// Wait for the page to fully load
window.addEventListener('load', function() {
// Find the YouTube video player
const videoPlayer = document.querySelector('.video-stream');
// Create a custom volume slider
const customVolumeSlider = document.createElement('input');
customVolumeSlider.type = 'range';
customVolumeSlider.min = '0';
customVolumeSlider.max = '1400'; // Increased maximum volume
customVolumeSlider.step = '1';
customVolumeSlider.style.width = '700px'; // Set the width
customVolumeSlider.style.transform = 'scaleX(-1)'; // Flip the slider horizontally
customVolumeSlider.style.display = 'none'; // Hide initially
// Create an AudioContext once on page load
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const gainNode = audioContext.createGain();
gainNode.connect(audioContext.destination);
// Connect the video player to the gain node
const videoSource = audioContext.createMediaElementSource(videoPlayer);
videoSource.connect(gainNode);
// Add an event listener for the slider input
customVolumeSlider.addEventListener('input', function() {
// Calculate the volume based on the slider position
const volume = calculateVolume(this.value, this.max);
// Update the gain node's gain value
gainNode.gain.value = volume / 100;
// Update the volume display at the center of the screen
updateVolumeDisplay(volume);
});
// Add an event listener to reset the slider when a new video is opened
videoPlayer.addEventListener('timeupdate', function() {
if (videoPlayer.currentTime === 0) {
resetCustomVolumeSlider();
}
});
// Function to reset the custom volume slider
function resetCustomVolumeSlider() {
customVolumeSlider.value = '100'; // Set default value to 100%
const initialVolume = calculateVolume(100, customVolumeSlider.max);
gainNode.gain.value = initialVolume / 100;
updateVolumeDisplay(initialVolume);
}
// Function to toggle the visibility of the custom volume slider
function toggleCustomVolumeSlider() {
const isSliderHidden = customVolumeSlider.style.display === 'none';
customVolumeSlider.style.display = isSliderHidden ? 'block' : 'none';
}
// Create a custom button for volume boost
const volumeBoostButton = document.createElement('button');
volumeBoostButton.id = 'volumeBoostButton';
volumeBoostButton.style.background = 'none';
volumeBoostButton.style.border = 'none';
volumeBoostButton.style.cursor = 'pointer';
volumeBoostButton.style.marginRight = '10px';
volumeBoostButton.innerText = 'Volume Boost';
volumeBoostButton.style.color = '#fff';
volumeBoostButton.style.fontWeight = 'bold';
// Add an event listener to toggle the slider when the volume boost button is clicked
volumeBoostButton.addEventListener('click', function() {
toggleCustomVolumeSlider();
resetCustomVolumeSlider();
});
// Insert the custom volume slider and button into the YouTube video player controls
const controls = document.querySelector('.ytp-chrome-controls');
if (controls) {
controls.insertBefore(volumeBoostButton, controls.firstChild);
controls.appendChild(customVolumeSlider);
}
// Reset the custom volume slider on page load
resetCustomVolumeSlider();
});
})();