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

fix

main
yxw 2023-11-09 10:24:26 +08:00
parent c7eb00c76e
commit 8fc57ae6c1
3 changed files with 153 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
filter.html
View File

@ -46,22 +46,22 @@
<div style="width: 200px;"> <div style="width: 200px;">
<div class="d-flex justify-content-center align-items-center" style="height: 30px;"> <div class="d-flex justify-content-center align-items-center" style="height: 30px;">
<div class="d-flex redio-switche"> <div class="d-flex redio-switche">
<input type="radio" class="btn-check" name="input1" id="inline1-on" <input type="radio" class="btn-check" name="mic1" id="mic1-on"
autocomplete="off"> value="enable">
<label class="btn btn-sm redio-btn on-btn" for="inline1-on">ENABLE</label> <label class="btn btn-sm redio-btn on-btn" for="mic1-on">ENABLE</label>
<input type="radio" class="btn-check" name="input1" id="inline1-off" <input type="radio" class="btn-check" name="mic1" id="mic1-off"
autocomplete="off"> value="disable">
<label class="btn btn-sm redio-btn off-btn" for="inline1-off">DISABLE</label> <label class="btn btn-sm redio-btn off-btn" for="mic1-off">DISABLE</label>
</div> </div>
</div> </div>
<div class="mt-3"> <div class="mt-3">
<label style="font-size:14px; color: #888;" class="me-2">Type</label> <label style="font-size:14px; color: #888;" class="me-2">Type</label>
<select class="select"> <select class="select" id="mic1-type">
<option>Bessel</option> <option value="Bessel">Bessel</option>
<option>Butterworth</option> <option value="Butterworth">Butterworth</option>
<option>Linkwitz-riley</option> <option value="Linkwitz-riley">Linkwitz-riley</option>
</select> </select>
</div> </div>
<div class="row _slider_customizations cus_handle mb-4"> <div class="row _slider_customizations cus_handle mb-4">
@ -72,16 +72,16 @@
<div id="handle1" class="roundSlider"></div> <div id="handle1" class="roundSlider"></div>
<div <div
style="top: 100px; left: -10px; width: 50px; position:relative;color: #888;"> style="top: 100px; left: -10px; width: 50px; position:relative;color: #888;">
2000 20000
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class=""> <div class="">
<input class="slider-value" style="width: 55px; text-align: center;" value="7FS" /> <input class="slider-value" id="handle1-value" style="width: 55px; text-align: center;" value="200Hz" />
</div> </div>
<div class="mt-1" style="color: #888;"> <div class="mt-1" style="color: #888;">
HPF(Hz) <!-- HPF(Hz) -->
</div> </div>
</div> </div>
</div> </div>
@ -95,35 +95,41 @@
<div style="width: 200px;"> <div style="width: 200px;">
<div class="d-flex justify-content-center align-items-center" style="height: 30px;"> <div class="d-flex justify-content-center align-items-center" style="height: 30px;">
<div class="d-flex redio-switche"> <div class="d-flex redio-switche">
<input type="radio" class="btn-check" name="input1" id="inline1-on" <input type="radio" class="btn-check" name="mic2" id="mic2-on"
autocomplete="off"> value="enable">
<label class="btn btn-sm redio-btn on-btn" for="inline1-on">ENABLE</label> <label class="btn btn-sm redio-btn on-btn" for="mic2-on">ENABLE</label>
<input type="radio" class="btn-check" name="input1" id="inline1-off" <input type="radio" class="btn-check" name="mic2" id="mic2-off"
autocomplete="off"> value="disable">
<label class="btn btn-sm redio-btn off-btn" for="inline1-off">DISABLE</label> <label class="btn btn-sm redio-btn off-btn" for="mic2-off">DISABLE</label>
</div> </div>
</div> </div>
<div class="mt-3"> <div class="mt-3">
<label style="font-size:14px; color: #888;" class="me-2">Type</label> <label style="font-size:14px; color: #888;" class="me-2">Type</label>
<select class="select"> <select class="select" id="mic2-type">
<option>Bessel</option> <option value="Bessel">Bessel</option>
<option>Butterworth</option> <option value="Butterworth">Butterworth</option>
<option>Linkwitz-riley</option> <option value="Linkwitz-riley">Linkwitz-riley</option>
</select> </select>
</div> </div>
<div class="row _slider_customizations cus_handle mb-4"> <div class="row _slider_customizations cus_handle mb-4">
<div class="block mt-4"> <div class="block mt-4">
<div class="cell d-flex justify-content-center"> <div class="cell d-flex justify-content-center">
<div style="top: 100px; right: -20; width: 50px; position:relative;color: #888;"
class="text-end">20</div>
<div id="handle2" class="roundSlider"></div> <div id="handle2" class="roundSlider"></div>
<div
style="top: 100px; left: -10px; width: 50px; position:relative;color: #888;">
20000
</div>
</div> </div>
</div> </div>
</div> </div>
<div class=""> <div class="">
<input class="slider-value" style="width: 55px; text-align: center;" value="7FS" /> <input class="slider-value" id="handle2-value" style="width: 55px; text-align: center;" value="200Hz" />
</div> </div>
<div class="mt-1" style="color: #888;"> <div class="mt-1" style="color: #888;">
HPF(Hz) <!-- HPF(Hz) -->
</div> </div>
</div> </div>
</div> </div>
@ -144,90 +150,82 @@
</body> </body>
<script> <script>
document.addEventListener("DOMContentLoaded", function () {
//初始化配置
loadData()
})
let app = (() => { $(document).ready(function () {
$("input[name='mic1']").on('change', function () {
let $value = $("input[name='mic1']:checked").val()
alert($value)
})
function updateSlider(element) { $("input[name='mic2']").on('change', function () {
if (element) { let $value = $("input[name='mic2']:checked").val()
alert($value)
})
let parent = element.parentElement, $("#mic1-type").on('change',function(){
lastValue = parent.getAttribute('data-slider-value'); alert($("#mic1-type").val())
let container = parent.parentElement.parentElement.parentElement.parentElement.parentElement; })
console.log(`${lastValue}===${element.value}}`) $("#mic2-type").on('change',function(){
// if (lastValue === element.value) { alert($("#mic2-type").val())
// return; // No value change, no need to update then })
// } })
parent.setAttribute('data-slider-value', element.value); function loadData(){
let $thumb = parent.querySelector('.range-slider-thumb'), $("input[name='mic1']").val(['enable'])
$bar = parent.querySelector('.range-slider-bar'), $("input[name='mic2']").val(['enable'])
$value = container.querySelector('.slider-value') $("#mic1-type").val(["Butterworth"])
console.log(`${element.value},${parent.clientHeight},${$thumb.clientHeight}}`) $("#mic2-type").val(["Bessel"])
console.log(`===${((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight)}===`)
pct = element.value * ((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight);
$thumb.style.bottom = `${pct}%`;
$bar.style.height = `calc(${pct}% + ${$thumb.clientHeight / 2}px)`;
$value.value = `${((element.value * (60 / 100)) - 60).toFixed(1)}dB`;
} }
}
return {
updateSlider: updateSlider
};
})();
(function initAndSetupTheSliders() {
const inputs = [].slice.call(document.querySelectorAll('.volume-slider-container .volume-slider input'));
inputs.forEach(input => input.setAttribute('value', '50'));
inputs.forEach(input => app.updateSlider(input));
// Cross-browser support where value changes instantly as you drag the handle, therefore two event types.
inputs.forEach(input => input.addEventListener('input', element => app.updateSlider(input)));
inputs.forEach(input => input.addEventListener('change', element => app.updateSlider(input)));
})();
$("#handle1").roundSlider({ $("#handle1").roundSlider({
sliderType: "min-range", sliderType: "min-range",
editableTooltip: false, editableTooltip: false,
radius: 60, radius: 60,
width: 10, width: 10,
value: 0, value: 200,
min:20, min: 20,
max:2000, max: 20000,
step:1, step: 1,
handleSize: 0, handleSize: 0,
handleShape: "square", handleShape: "square",
circleShape: "pie", circleShape: "pie",
startAngle: 315, startAngle: 315,
tooltipFormat: "changeTooltip", mouseScrollAction: true,
mouseScrollAction: true
drag: function (args) {
$("#handle1-value").val(`${args.value}Hz`);
},
change: function (args) {
$("#handle1-value").val(`${args.value}Hz`);
}
}); });
function changeTooltip(e) {
var val = e.value, speed;
// if (val < 20) speed = "Slow";
// else if (val < 40) speed = "Normal";
// else if (val < 70) speed = "Speed";
// else speed = "Very Speed";
// return val + " km/h" + "<div>" + speed + "<div>";
}
$("#handle2").roundSlider({ $("#handle2").roundSlider({
sliderType: "min-range", sliderType: "min-range",
editableTooltip: false, editableTooltip: false,
radius: 60, radius: 60,
width: 10, width: 10,
value: 0, value: 200,
min: 20,
max: 20000,
handleSize: 0, handleSize: 0,
handleShape: "square", handleShape: "square",
circleShape: "pie", circleShape: "pie",
startAngle: 315, startAngle: 315,
tooltipFormat: "changeTooltip", mouseScrollAction: true,
mouseScrollAction: true
drag: function (args) {
$("#handle2-value").val(`${args.value}Hz`);
},
change: function (args) {
$("#handle2-value").val(`${args.value}Hz`);
}
}); });
</script> </script>

1
fs.html
View File

@ -165,6 +165,7 @@
circleShape: "pie", circleShape: "pie",
startAngle: 315, startAngle: 315,
mouseScrollAction: true, mouseScrollAction: true,
drag: function (args) { drag: function (args) {
$("#handle1-value").val(`${args.value}Hz`); $("#handle1-value").val(`${args.value}Hz`);
}, },

107
home.html
View File

@ -261,7 +261,9 @@
<div> <div>
<div class="d-flex"> <div class="d-flex">
<div class="pinpu-box pe-4"> <div class="pinpu-box pe-4">
<div class="equalizer-bar"> <div class="equalizer-bar equalizer-bar-left">
<span style="opacity: 1;"></span>
<span style="opacity: 1;"></span>
<span style="opacity: 1;"></span> <span style="opacity: 1;"></span>
<span style="opacity: 1;"></span> <span style="opacity: 1;"></span>
<span style="opacity: 1;"></span> <span style="opacity: 1;"></span>
@ -289,7 +291,9 @@
</div> </div>
</div> </div>
<div class="pinpu-box pe-4"> <div class="pinpu-box pe-4">
<div class="equalizer-bar"> <div class="equalizer-bar equalizer-bar-right">
<span style="opacity: 1;"></span>
<span style="opacity: 1;"></span>
<span style="opacity: 1;"></span> <span style="opacity: 1;"></span>
<span style="opacity: 1;"></span> <span style="opacity: 1;"></span>
<span style="opacity: 1;"></span> <span style="opacity: 1;"></span>
@ -454,7 +458,9 @@
<div> <div>
<div class="d-flex"> <div class="d-flex">
<div class="pinpu-box pe-4"> <div class="pinpu-box pe-4">
<div class="equalizer-bar"> <div class="equalizer-bar equalizer-bar-left">
<span style="opacity: 1;"></span>
<span style="opacity: 1;"></span>
<span style="opacity: 1;"></span> <span style="opacity: 1;"></span>
<span style="opacity: 1;"></span> <span style="opacity: 1;"></span>
<span style="opacity: 1;"></span> <span style="opacity: 1;"></span>
@ -482,7 +488,9 @@
</div> </div>
</div> </div>
<div class="pinpu-box pe-4"> <div class="pinpu-box pe-4">
<div class="equalizer-bar"> <div class="equalizer-bar equalizer-bar-right">
<span style="opacity: 1;"></span>
<span style="opacity: 1;"></span>
<span style="opacity: 1;"></span> <span style="opacity: 1;"></span>
<span style="opacity: 1;"></span> <span style="opacity: 1;"></span>
<span style="opacity: 1;"></span> <span style="opacity: 1;"></span>
@ -643,7 +651,9 @@
<div> <div>
<div class="d-flex"> <div class="d-flex">
<div class="pinpu-box pe-4"> <div class="pinpu-box pe-4">
<div class="equalizer-bar"> <div class="equalizer-bar equalizer-bar-left">
<span style="opacity: 1;"></span>
<span style="opacity: 1;"></span>
<span style="opacity: 1;"></span> <span style="opacity: 1;"></span>
<span style="opacity: 1;"></span> <span style="opacity: 1;"></span>
<span style="opacity: 1;"></span> <span style="opacity: 1;"></span>
@ -671,7 +681,9 @@
</div> </div>
</div> </div>
<div class="pinpu-box pe-4"> <div class="pinpu-box pe-4">
<div class="equalizer-bar"> <div class="equalizer-bar equalizer-bar-right">
<span style="opacity: 1;"></span>
<span style="opacity: 1;"></span>
<span style="opacity: 1;"></span> <span style="opacity: 1;"></span>
<span style="opacity: 1;"></span> <span style="opacity: 1;"></span>
<span style="opacity: 1;"></span> <span style="opacity: 1;"></span>
@ -1025,40 +1037,51 @@
function LineInputLeftRandomBar(number) { function LineInputLeftRandomBar(number) {
const bars = $("#lineinput .equalizer-bar-left") const bars = $("#lineinput .equalizer-bar-left")
let row = (number + 72) / 3; updateBars(bars, number)
let red = (-6 + 72) / 3;
let yellow = (-18 + 72) / 3;
let spans = bars[0].getElementsByTagName('span');
for (let i = 0; i < spans.length; i++) {
if (row > i) {
if (row >= red && i >= red) {
spans[i].style.opacity = "1"
spans[i].style.backgroundColor = "#ff0000"
}
else if (row >= yellow && i < red && i >= yellow) {
spans[i].style.opacity = "1"
spans[i].style.backgroundColor = "#ff6600"
}
else {
spans[i].style.opacity = "1"
spans[i].style.backgroundColor = "#a7dce9"
}
}
else {
spans[i].style.opacity = "1"
spans[i].style.backgroundColor = "#333"
}
}
} }
function LineInputRightRandomBar(number) { function LineInputRightRandomBar(number) {
const bars = $("#lineinput .equalizer-bar-right") const bars = $("#lineinput .equalizer-bar-right")
updateBars(bars, number)
}
function Microphone1LeftRandomBar(number) {
const bars = $("#microphone1 .equalizer-bar-left")
updateBars(bars, number)
}
function Microphone1RightRandomBar(number) {
const bars = $("#microphone1 .equalizer-bar-right")
updateBars(bars, number)
}
function Microphone2LeftRandomBar(number) {
const bars = $("#microphone2 .equalizer-bar-left")
updateBars(bars, number)
}
function Microphone2RightRandomBar(number) {
const bars = $("#microphone2 .equalizer-bar-right")
updateBars(bars, number)
}
function OutputVolumeLeftRandomBar(number) {
const bars = $("#outputvolume .equalizer-bar-left")
updateBars(bars, number)
}
function OutputVolumeRightRandomBar(number) {
const bars = $("#outputvolume .equalizer-bar-right")
updateBars(bars, number)
}
function updateBars(element, number) {
let row = (number + 72) / 3; let row = (number + 72) / 3;
let red = (-6 + 72) / 3; let red = (-6 + 72) / 3;
let yellow = (-18 + 72) / 3; let yellow = (-18 + 72) / 3;
let spans = bars[0].getElementsByTagName('span'); let spans = element[0].getElementsByTagName('span');
for (let i = 0; i < spans.length; i++) { for (let i = 0; i < spans.length; i++) {
if (row > i) { if (row > i) {
if (row >= red && i >= red) { if (row >= red && i >= red) {
@ -1079,9 +1102,10 @@
spans[i].style.backgroundColor = "#333" spans[i].style.backgroundColor = "#333"
} }
} }
} }
setInterval(() => { setInterval(() => {
setRandomBars(); setRandomBars();
}, 200); }, 200);
@ -1089,8 +1113,21 @@
function setRandomBars() { function setRandomBars() {
let num = getRandomIntInclusive(0, 72) let num = getRandomIntInclusive(0, 72)
let num2 = getRandomIntInclusive(0, 72) let num2 = getRandomIntInclusive(0, 72)
LineInputLeftRandomBar(num-72) let num3 = getRandomIntInclusive(0, 72)
LineInputRightRandomBar(num2-72) let num4 = getRandomIntInclusive(0, 72)
let num5 = getRandomIntInclusive(0, 72)
let num6 = getRandomIntInclusive(0, 72)
let num7 = getRandomIntInclusive(0, 72)
let num8 = getRandomIntInclusive(0, 72)
LineInputLeftRandomBar(num - 72)
LineInputRightRandomBar(num2 - 72)
Microphone1LeftRandomBar(num3 - 72)
Microphone1RightRandomBar(num4 - 72);
Microphone2LeftRandomBar(num5 - 72)
Microphone2RightRandomBar(num6 - 72);
OutputVolumeLeftRandomBar(num7 - 72);
OutputVolumeRightRandomBar(num8 - 72);
} }
function getRandomIntInclusive(min, max) { function getRandomIntInclusive(min, max) {