Change AcFun's volume by scroll, imitate Bilibili's style.
// ==UserScript==
// @name AcFun-ScrollVolume
// @name:zh-CN AcFun-滚轮调音量
// @namespace https://github.com/TitanRGB
// @version 3.4
// @description Change AcFun's volume by scroll, imitate Bilibili's style.
// @description:zh-CN 滚动滚轮调节AcFun的音量，模仿B站样式。
// @author https://github.com/TitanRGB
// @icon data:image/png;base64,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
// @match http*://acfun.cn
// @match http*://acfun.cn/*
// @match http*://www.acfun.cn
// @match http*://www.acfun.cn/*
// @license MPL-2.0
// @license^ Mozilla Public License 2.0
// @grant unsafeWindow
// @charset UTF-8
// @homepageURL https://github.com/SynRGB/AcFun-ScrollVolume
// @contributionURL https://github.com/SynRGB/AcFun-ScrollVolume
// @copyright Copyright © 2022-PRESENT, TitanRGB (https://github.com/TitanRGB)
// ==/UserScript==
// ./icon/bilibili#bpx-svg-sprite-volume
let icon_volume = `
data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjIgMjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJNMTAuMTg4IDQuNjVMNiA4SDVhMiAyIDAgMDAtMiAydjJhMiAyIDAgMDAyIDJoMWw0LjE4OCAzLjM1YS41LjUgMCAwMC44MTItLjM5VjUuMDRhLjQ5OC40OTggMCAwMC0uODEyLS4zOXpNMTQuNDQ2IDMuNzc4YTEgMSAwIDAwLS44NjIgMS44MDQgNi4wMDIgNi4wMDIgMCAwMS0uMDA3IDEwLjgzOCAxIDEgMCAwMC44NiAxLjgwNkE4LjAwMSA4LjAwMSAwIDAwMTkgMTFhOC4wMDEgOC4wMDEgMCAwMC00LjU1NC03LjIyMnoiLz4KICAgIDxwYXRoIGQ9Ik0xNSAxMWEzLjk5OCAzLjk5OCAwIDAwLTItMy40NjV2Ni45M0EzLjk5OCAzLjk5OCAwIDAwMTUgMTF6Ii8+Cjwvc3ZnPg==
`;
// ./icon/bilibili#bpx-svg-sprite-volume-off
let icon_volume_off = `
data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjIgMjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJNMTUgMTFhMy45OTggMy45OTggMCAwMC0yLTMuNDY1djIuNjM2bDEuODY1IDEuODY1QTQuMDIgNC4wMiAwIDAwMTUgMTF6Ii8+CiAgICA8cGF0aCBkPSJNMTMuNTgzIDUuNTgzQTUuOTk4IDUuOTk4IDAgMDExNyAxMWE2IDYgMCAwMS0uNTg1IDIuNTg3bDEuNDc3IDEuNDc3YTguMDAxIDguMDAxIDAgMDAtMy40NDYtMTEuMjg2IDEgMSAwIDAwLS44NjMgMS44MDV6TTE4Ljc3OCAxOC43NzhsLTIuMTIxLTIuMTIxLTEuNDE0LTEuNDE0LTEuNDE1LTEuNDE1TDEzIDEzbC0yLTItMy44ODktMy44ODktMy44ODktMy44ODlhLjk5OS45OTkgMCAxMC0xLjQxNCAxLjQxNEw1LjE3MiA4SDVhMiAyIDAgMDAtMiAydjJhMiAyIDAgMDAyIDJoMWw0LjE4OCAzLjM1YS41LjUgMCAwMC44MTItLjM5di0zLjEzMWwyLjU4NyAyLjU4Ny0uMDEuMDA1YTEgMSAwIDAwLjg2IDEuODA2Yy4yMTUtLjEwMi40MjQtLjIxNC42MjctLjMzM2wyLjMgMi4zYTEuMDAxIDEuMDAxIDAgMDAxLjQxNC0xLjQxNnpNMTEgNS4wNGEuNS41IDAgMDAtLjgxMy0uMzlMOC42ODIgNS44NTQgMTEgOC4xNzJWNS4wNHoiLz4KPC9zdmc+
`;
// 当滚动滚轮, 模拟按下↑↓
let main = function (e) {
// 仅在全屏时生效
if (document.querySelector('[data-bind-attr="screen"]') !== null) {
if (e.wheelDelta) {
//// Chrome
// 向上滚动
if (e.wheelDelta > 0) {
unsafeWindow.player.volume++;
}
// 向下滚动
if (e.wheelDelta < 0) {
// pressKey(40);
unsafeWindow.player.volume--;
}
} else if (e.detail) {
//// Firefox
// 向上滚动
if (e.detail > 0) {
unsafeWindow.player.volume++;
}
// 向下滚动
if (e.detail < 0) {
unsafeWindow.player.volume--;
}
}
// 音量显示
try {
document.querySelector('#volumeDiv').remove();
} catch (e) {
}
let volume = unsafeWindow.player.volume;
//////////////////////////////////////////////////////////////
let volumeIcon = document.createElement('span');
let volumeIconInnerSpan = document.createElement('span');
let volumeIconImg = document.createElement('img');
if (volume < 1) {
volumeIconImg.setAttribute('src', icon_volume_off);
} else {
volumeIconImg.setAttribute('src', icon_volume);
}
volumeIconImg.setAttribute('style', `
width: 100%;
height: 100%;
-webkit-transition: fill .15s ease-in-out;
transition: fill .15s ease-in-out;
`);
volumeIconInnerSpan.setAttribute('style', `
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
width: 100%;
height: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
`);
volumeIcon.setAttribute('style', `
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
width: 34px;
height: 34px;
`);
volumeIcon.appendChild(volumeIconImg);
//////////////////////////////////////////////////////////////
let volumeSpan = document.createElement('span');
// 当volume实际为100时，返回值是大于99的小数
// 当volume实际为0时，返回值是小于1的小数
if (volume > 99) {
volumeSpan.innerHTML = '100%';
} else if (volume < 1) {
volumeSpan.innerHTML = '0%';
} else if (volume > 9) {
volumeSpan.innerHTML = volume.toString().substring(0, 2).replace('.', '') + '%';
} else {
volumeSpan.innerHTML = volume.toString().substring(0, 1).replace('.', '') + '%';
}
volumeSpan.setAttribute('style', `
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 0 2px;
line-height: 34px;
text-align: center;
`);
//////////////////////////////////////////////////////////////
let volumeDiv = document.createElement('div');
volumeDiv.setAttribute('id', 'volumeDiv');
volumeDiv.setAttribute('style', `
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
top: 50%;
left: 50%;
min-width: 84px;
height: 32px;
padding: 8px;
color: #000;
font-size: 20px;
border-radius: 4px;
background: hsla(0,0%,100%,.8);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
z-index: 77;
`);
volumeDiv.appendChild(volumeIcon);
volumeDiv.appendChild(volumeSpan);
//////////////////////////////////////////////////////////////
let screen = document.querySelector('[data-bind-attr="screen"]');
screen.appendChild(volumeDiv);
setTimeout(() => {
screen.removeChild(volumeDiv);
}, 500);
//////////////////////////////////////////////////////////////
}
};
document.addEventListener('wheel', main, false);
console.log("JS script AcFUN-ScrollVolume (AcFUN-滚轮调音量) loaded. See more details at https://github.com/SynRGB/AcFun-ScrollVolume");