yxw
/
AudioHTML
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

refix

main
yxw 2023-10-31 19:06:14 +08:00
parent 3b04680856
commit 0ed8578625
2 changed files with 84 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
css/app.css
View File

@ -528,12 +528,31 @@ body {
background-image: url(../images/button.png); background-image: url(../images/button.png);
} }
.slider-value{
border: none;
background: #000;
box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.35), 0 2px 0 rgba(255, 255, 255, 0.15);
color: #fff;
border-radius: 5px;
}
.slider-value:focus{
border: none;
background: #000;
box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.35), 0 2px 0 rgba(255, 255, 255, 0.15);
color: #fff;
border-radius: 5px;
outline: none;
}
.volume-ruler { .volume-ruler {
position: relative; position: relative;
width: 14px; width: 14px;
height: 300px; height: 250px;
margin-top: 20px;
margin-bottom: 20px;
} }
.volume-ruler .cm { .volume-ruler .cm {
@ -565,56 +584,40 @@ body {
top: 0%; top: 0%;
} }
.volume-ruler .cm:nth-of-type(1):after {
content: "0";
}
.volume-ruler .cm:nth-of-type(2) { .volume-ruler .cm:nth-of-type(2) {
top: 16.6666%; top: 16.6666%;
} }
.volume-ruler .cm:nth-of-type(2):after {
content: "1";
}
.volume-ruler .cm:nth-of-type(3) { .volume-ruler .cm:nth-of-type(3) {
top: 33.3333%; top: 33.3333%;
} }
.volume-ruler .cm:nth-of-type(3):after {
content: "2";
}
.volume-ruler .cm:nth-of-type(4) { .volume-ruler .cm:nth-of-type(4) {
top: 50%; top: 50%;
} }
.volume-ruler .cm:nth-of-type(4):after {
content: "3";
}
.volume-ruler .cm:nth-of-type(5) { .volume-ruler .cm:nth-of-type(5) {
top: 66.6666%; top: 66.6666%;
} }
.volume-ruler .cm:nth-of-type(5):after {
content: "4";
}
.volume-ruler .cm:nth-of-type(6) { .volume-ruler .cm:nth-of-type(6) {
top: 83.3333%; top: 83.3333%;
} }
.volume-ruler .cm:nth-of-type(6):after {
content: "5";
}
.volume-ruler .cm:nth-of-type(7) { .volume-ruler .cm:nth-of-type(7) {
top: 100%; top: 100%;
} }
.volume-ruler .cm:nth-of-type(7):after {
content: "6"; .volume-ruler .cm>span{
position: absolute;
right: -25px;
top: -7px;
font: 11px/1 sans-serif;
color: #555;
} }

96
volume.html
View File

@ -38,7 +38,7 @@
<div class="divider-text"><span class="fw-bold">MIC 1</span></div> <div class="divider-text"><span class="fw-bold">MIC 1</span></div>
</div> </div>
<div class="p-3 d-flex justify-content-center"> <div class="p-3 d-flex justify-content-center">
<div style="width: 350px;"> <div style="width: 320px;">
<div class="d-flex justify-content-center align-items-center"> <div class="d-flex justify-content-center align-items-center">
<div class="me-3">48V Phantom</div> <div class="me-3">48V Phantom</div>
<div class="d-flex redio-switche"> <div class="d-flex redio-switche">
@ -51,53 +51,66 @@
<label class="btn" for="option6">OFF</label> <label class="btn" for="option6">OFF</label>
</div> </div>
</div> </div>
<div class="d-flex justify-content-center mt-3" style="height: 350px;"> <div class="volume-slider-container">
<div class="d-flex"> <div class="d-flex justify-content-center mt-3">
<div class="volume-slider-box"> <div class="d-flex">
<div class="volume-slider" data-slider-value="50"> <div class="volume-slider-box">
<input type="range" orient="vertical" min="0" max="100" value="50"> <div class="volume-slider" data-slider-value="50">
<div class="range-slider-bar" style="height: calc(45% + 15px);"></div> <input type="range" orient="vertical" min="0" max="60" step="0.1" value="30">
<div class="range-slider-thumb" style="bottom: 45%;"></div> <div class="range-slider-bar" style="height: calc(45% + 15px);"></div>
<div class="range-slider-thumb" style="bottom: 45%;"></div>
</div>
</div>
<div>
<section class="volume-ruler">
<section class="cm">
<span>0</span>
<section class="mm"></section>
</section>
<section class="cm">
<span>-10</span>
<section class="mm"></section>
</section>
<section class="cm">
<span>-20</span>
<section class="mm"></section>
</section>
<section class="cm">
<span>-30</span>
<section class="mm"></section>
</section>
<section class="cm">
<span>-40</span>
<section class="mm"></section>
</section>
<section class="cm">
<span>-50</span>
<section class="mm"></section>
</section>
<section class="cm">
<span>-60</span>
</section>
</section>
</div> </div>
</div> </div>
<div> <div>
<section class="volume-ruler">
<section class="cm">
<section class="mm"></section>
</section>
<section class="cm">
<section class="mm"></section>
</section>
<section class="cm">
<section class="mm"></section>
</section>
<section class="cm">
<section class="mm"></section>
</section>
<section class="cm">
<section class="mm"></section>
</section>
<section class="cm">
<section class="mm"></section>
</section>
<section class="cm">
</section>
</section>
</div> </div>
</div> </div>
<div> <div>
<div class="slider-value-box">
<input class="slider-value" style="width: 50px;" />
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="form"> <div class="form">
<div> <div>
<div class="progress-4"></div> <div class="progress-4"></div>
</div> </div>
<div> <div>
</div> </div>
<div> <div>
@ -182,21 +195,26 @@
function updateSlider(element) { function updateSlider(element) {
if (element) { if (element) {
let parent = element.parentElement, let parent = element.parentElement,
lastValue = parent.getAttribute('data-slider-value'); lastValue = parent.getAttribute('data-slider-value');
let container = parent.parentElement.parentElement.parentElement.parentElement;
if (lastValue === element.value) { console.log(`${lastValue}===${element.value}}`)
return; // No value change, no need to update then // if (lastValue === element.value) {
} // return; // No value change, no need to update then
// }
parent.setAttribute('data-slider-value', element.value); parent.setAttribute('data-slider-value', element.value);
let $thumb = parent.querySelector('.range-slider-thumb'), let $thumb = parent.querySelector('.range-slider-thumb'),
$bar = parent.querySelector('.range-slider-bar'), $bar = parent.querySelector('.range-slider-bar'),
pct = element.value * ((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight); $value = container.querySelector('.slider-value')
console.log(`${element.value},${parent.clientHeight},${$thumb.clientHeight}}`)
pct = element.value * ((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight);
$thumb.style.bottom = `${pct}%`; $thumb.style.bottom = `${pct}%`;
$bar.style.height = `calc(${pct}% + ${$thumb.clientHeight / 2}px)`; $bar.style.height = `calc(${pct}% + ${$thumb.clientHeight / 2}px)`;
// $thumb.textContent = `${element.value}%`; $value.value = `${element.value-60}`;
} }
} }
return { return {
@ -206,7 +224,7 @@
})(); })();
(function initAndSetupTheSliders() { (function initAndSetupTheSliders() {
const inputs = [].slice.call(document.querySelectorAll('.volume-slider input')); const inputs = [].slice.call(document.querySelectorAll('.volume-slider-container .volume-slider input'));
inputs.forEach(input => input.setAttribute('value', '50')); inputs.forEach(input => input.setAttribute('value', '50'));
inputs.forEach(input => app.updateSlider(input)); inputs.forEach(input => app.updateSlider(input));
// Cross-browser support where value changes instantly as you drag the handle, therefore two event types. // Cross-browser support where value changes instantly as you drag the handle, therefore two event types.