Adds time information (duration, currentTime, etc.), adjusts for playback speed, highlights the active speed button, toggle for hiding/showing the control panel, and font size control.
// ==UserScript==
// @name Enhanced Audio Speed Controller with Time Info, Speed Highlight, Font Size Control, and Toggle
// @namespace http://tampermonkey.net/
// @version 3.3
// @description Adds time information (duration, currentTime, etc.), adjusts for playback speed, highlights the active speed button, toggle for hiding/showing the control panel, and font size control.
// @author You
// @match *://*/*
// @grant none
// @license MIT
// ==/UserScript==
(function () {
'use strict';
let startTime = Date.now(); // Track the real-time start
let isPanelVisible = true; // Track panel visibility
let currentFontSize = 7; // Initial font size in pt
const odIcon = '🕰️';
const adIcon = '⏰';
const ctIcon = '⌚';
const pcIcon = '➗';
const trIcon = '⏳';
const wcIcon = '🕛';
// Helper function to convert fractional minutes into hh:mm:ss format
function convertToTimeFormat(minutes) {
const totalSeconds = Math.floor(minutes * 60); // Convert minutes to seconds
const hours = Math.floor(totalSeconds / 3600); // Calculate full hours
const remainingSeconds = totalSeconds % 3600; // Remaining seconds after hours
const mins = Math.floor(remainingSeconds / 60); // Full minutes
const secs = remainingSeconds % 60; // Remaining seconds
const formattedTime =
(hours > 9 ? hours : '0' + hours) + ':' +
(mins > 9 ? mins : '0' + mins) + ':' +
(secs > 9 ? secs : '0' + secs);
return formattedTime;
}
// Function to calculate and update time stats
function updateTimeStats() {
const audioElement = document.querySelector('audio');
if (audioElement && audioElement.duration && !isNaN(audioElement.duration)) {
const duration = audioElement.duration;
const adjustedDuration = audioElement.duration / audioElement.playbackRate / 60;
const currentTime = audioElement.currentTime;
const playbackRate = audioElement.playbackRate;
const currentTimeDisp = currentTime / 60 / playbackRate;
const percentComplete = (currentTime / duration) * 100;
const timeRemaining = (adjustedDuration - currentTimeDisp);
const elapsedWallClockTime = (Date.now() - startTime) / 1000 / 60;
document.getElementById('original-duration').innerHTML = `${odIcon}<br>${convertToTimeFormat(duration / 60)}`;
document.getElementById('adjusted-duration').innerHTML = `${adIcon}<br>${convertToTimeFormat(adjustedDuration)}`;
document.getElementById('current-time').innerHTML = `${ctIcon}<br>${convertToTimeFormat(currentTimeDisp)}`;
document.getElementById('percent-complete').innerHTML = `<span class="rotate">${pcIcon}</span><br>${percentComplete.toFixed(2)}%`;
document.getElementById('time-remaining').innerHTML = `${trIcon}<br>${convertToTimeFormat(timeRemaining)}`;
document.getElementById('elapsed-wall-clock').innerHTML = `${wcIcon}<br>${convertToTimeFormat(elapsedWallClockTime)}`;
}
}
// Function to create the control panel with buttons and time information
function createControlPanel() {
if (document.getElementById('audio-speed-control')) return;
const controlDiv = document.createElement('div');
controlDiv.id = 'audio-speed-control';
controlDiv.style.position = 'fixed';
controlDiv.style.top = '20%';
controlDiv.style.right = '0';
controlDiv.style.background = 'rgba(0, 0, 0, 0.05)';
controlDiv.style.padding = '5px';
controlDiv.style.borderRadius = '5px';
controlDiv.style.zIndex = '999999';
controlDiv.style.display = 'flex';
controlDiv.style.flexDirection = 'column';
controlDiv.style.fontSize = `${currentFontSize}pt`;
controlDiv.style.transition = 'transform 0.5s ease';
const timeStats = document.createElement('div');
timeStats.style.marginBottom = '4px';
timeStats.style.fontSize = '6pt';
timeStats.style.color = 'black';
timeStats.style.fontWeight = "bold";
timeStats.style.textAlign = 'center';
const timeStatsData = [
{ id: 'original-duration', label: odIcon },
{ id: 'adjusted-duration', label: adIcon },
{ id: 'current-time', label: ctIcon },
{ id: 'percent-complete', label: pcIcon },
{ id: 'time-remaining', label: trIcon },
{ id: 'elapsed-wall-clock', label: wcIcon }
];
timeStatsData.forEach(stat => {
const statDiv = document.createElement('div');
statDiv.id = stat.id;
statDiv.innerHTML = stat.label + "<br>--:--:--";
timeStats.appendChild(statDiv);
});
controlDiv.appendChild(timeStats);
// Create PLAY button
const playButton = document.createElement('button');
playButton.innerText = '▶'; // Label with play symbol
playButton.style.padding = '3px 5px';
playButton.style.marginBottom = '2px';
playButton.style.backgroundColor = '#bada55';
playButton.style.border = 'none';
playButton.style.borderRadius = '3px';
playButton.style.cursor = 'pointer';
playButton.style.fontSize = '8px';
playButton.style.fontWeight = 'bold';
playButton.style.color = '#222';
playButton.style.width = '36px';
playButton.addEventListener('click', function () {
const audioElement = document.querySelector('audio');
if (audioElement) {
let attempts = 25;
audioElement.play(); // Initial attempt
const playInterval = setInterval(() => {
if (attempts > 0) {
audioElement.play(); // Force play again
attempts--;
} else {
clearInterval(playInterval);
}
}, 125);
}
});
controlDiv.appendChild(playButton);
// Create PAUSE button
const pauseButton = document.createElement('button');
pauseButton.innerText = '||'; // Label with pause symbol
pauseButton.style.padding = '3px 5px';
pauseButton.style.marginBottom = '2px';
pauseButton.style.backgroundColor = '#bada55';
pauseButton.style.border = 'none';
pauseButton.style.borderRadius = '3px';
pauseButton.style.cursor = 'pointer';
pauseButton.style.fontSize = '8px';
pauseButton.style.fontWeight = 'bold';
pauseButton.style.color = '#222';
pauseButton.style.width = '36px';
pauseButton.addEventListener('click', function () {
const audioElement = document.querySelector('audio');
if (audioElement) {
let attempts = 25;
audioElement.pause(); // Initial attempt
const pauseInterval = setInterval(() => {
if (attempts > 0) {
audioElement.pause(); // Force pause again
attempts--;
} else {
clearInterval(pauseInterval);
}
}, 125);
}
});
controlDiv.appendChild(pauseButton);
/*
// Ceate PAUoE button
cst pauseButton = document.createElement('button');
pauseButton.innerText = '||'; // Label with pause symbol
pauseButton.style.padding = '3px 5px';
pauseButton.style.marginBottom = '2px';
pauseButton.style.backgroundColor = '#bada55';
pauseButton.style.border = 'none';
pauseButton.style.borderRadius = '3px';
pauseButton.style.cursor = 'pointer';
pauseButton.style.fontSize = '8px';
= 'bold';
= '#222';
');
if (audioElement) {
const targetState = audioElement.paused; // Determine the desired state
function tryTogglePlayPause() {
if (targetState) {
audioElement.play().catch(error => {
console.error("Error playing audio:", error);
setTimeout(tryTogglePlayPause, 100);
});
pauseButton.innerText = '||';
} else {
audioElement.pause();
pauseButton.innerText = '▶';
}
}
tryTogglePlayPause(); // Initial attempt
if (targetState) {
// If the target state is playing, schedule retries
setTimeout(tryTogglePlayPause, 100);
}
}
});
// pauseButton.addEventListener('click', function () {
// const audioElement = document.querySelector('audio');
// if (audioElement) {
// if (audioElement.paused) {
// audioElement.play();
// pauseButton.innerText = '||';
// } else {
// audioElement.pause();
// pauseButton.innerText = '▶';
// }
// }
// });
// controlDiv.appendChild(pauseButton);
*/
const speeds = [1.0, 1.25, 1.5, 1.75, 2.0, 2.25, 2.5, 2.75, 3.0, 3.25, 3.5, 3.75, 4.0, 4.5, 5.0];
let activeButton = null;
speeds.forEach(speed => {
const button = document.createElement('button');
button.innerText = speed.toFixed(2);
button.style.padding = '3px 5px';
button.style.marginBottom = '2px';
button.style.backgroundColor = '#bada55';
button.style.border = 'none';
button.style.borderRadius = '3px';
button.style.cursor = 'pointer';
button.style.fontSize = '8px';
button.style.fontWeight = 'bold';
button.style.color = '#222';
button.style.width = '36px';
function setActiveButton() {
if (activeButton) {
activeButton.style.backgroundColor = '#bada55';
activeButton.style.color = '#222';
activeButton.style.fontWeight = 'normal';
}
button.style.backgroundColor = '#006400';
button.style.color = '#fff';
button.style.fontWeight = 'bold';
activeButton = button;
}
button.addEventListener('click', function () {
const audioElement = document.querySelector('audio');
if (audioElement) {
audioElement.playbackRate = speed;
setActiveButton();
}
});
controlDiv.appendChild(button);
});
const toggleButton = document.createElement('button');
toggleButton.innerText = '◀';
toggleButton.style.position = 'absolute';
toggleButton.style.top = '5px';
toggleButton.style.left = '-15px';
toggleButton.style.backgroundColor = '#bada55';
toggleButton.style.border = 'none';
toggleButton.style.borderRadius = '20%';
toggleButton.style.cursor = 'pointer';
toggleButton.style.padding = '2px';
toggleButton.style.zIndex = '1000';
toggleButton.addEventListener('click', () => {
if (isPanelVisible) {
controlDiv.style.transform = 'translateX(100%)';
toggleButton.innerText = '▶';
} else {
controlDiv.style.transform = 'translateX(0)';
toggleButton.innerText = '◀';
}
isPanelVisible = !isPanelVisible;
});
controlDiv.appendChild(toggleButton);
// Font size control
const fontSizeControl = document.createElement('div');
fontSizeControl.style.marginTop = '4px';
const fontIncreaseButton = document.createElement('button');
fontIncreaseButton.innerText = '⬆';
fontIncreaseButton.style.margin = '2px';
fontIncreaseButton.style.padding = '3px';
fontIncreaseButton.style.cursor = 'pointer';
fontIncreaseButton.addEventListener('click', () => {
currentFontSize += 2;
console.log("Size: " + currentFontSize);
controlDiv.style.fontSize = `${currentFontSize}pt`;
});
const fontDecreaseButton = document.createElement('button');
fontDecreaseButton.innerText = '⬇';
fontDecreaseButton.style.margin = '2px';
fontDecreaseButton.style.padding = '3px';
fontDecreaseButton.style.cursor = 'pointer';
fontDecreaseButton.addEventListener('click', () => {
currentFontSize = Math.max(4, currentFontSize - 2); // Prevent font size from going too small
controlDiv.style.fontSize = `${currentFontSize}pt`;
});
fontSizeControl.appendChild(fontIncreaseButton);
fontSizeControl.appendChild(fontDecreaseButton);
controlDiv.appendChild(fontSizeControl);
document.body.appendChild(controlDiv);
}
const style = document.createElement('style');
style.innerHTML = `
.rotate {
display: inline-block;
transform: rotate(45deg); /* Rotates emoji */
}
`;
document.head.appendChild(style);
// Update the time stats periodically
setInterval(updateTimeStats, 1000); // Update every second
// Wait for the document to fully load and ensure audio element exists
const observer = new MutationObserver((mutations, observer) => {
const audioElement = document.querySelector('audio');
if (audioElement) {
console.log("Chapter duration:");
console.log(audioElement.duration / 60);
audioElement.addEventListener('loadedmetadata', () => {
audioElement.playbackRate = 2.0; // Set default playback speed to 2.0
createControlPanel();
updateTimeStats();
});
observer.disconnect(); // Stop observing once the audio is found
}
});
// Start observing the document for changes
observer.observe(document, {
childList: true,
subtree: true
});
})();