2022-12-11 23:33:34 +00:00
|
|
|
<template>
|
|
|
|
<div>
|
2022-12-16 23:17:37 +00:00
|
|
|
<div class="container">
|
|
|
|
<h1 class="display-4">{{ text }}</h1>
|
2022-12-12 03:10:34 +00:00
|
|
|
</div>
|
2022-12-11 23:33:34 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
2023-01-27 03:33:29 +00:00
|
|
|
mounted() {
|
|
|
|
let audioCtx = new (window.AudioContext || window.webkitAudioContext)();
|
|
|
|
let upperPercentile = 0.9;
|
|
|
|
let lowerPercentile = 0.1;
|
|
|
|
let buffer = [];
|
|
|
|
let levelValues = [];
|
|
|
|
let upperValue = 0;
|
|
|
|
let lowerValue = 0;
|
|
|
|
|
|
|
|
navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {
|
|
|
|
let source = audioCtx.createMediaStreamSource(stream);
|
|
|
|
|
|
|
|
let bandPass65 = audioCtx.createBiquadFilter();
|
|
|
|
bandPass65.type = "bandpass";
|
|
|
|
bandPass65.frequency.value = 65;
|
|
|
|
bandPass65.Q.value = 1.41;
|
|
|
|
|
|
|
|
let bandPass125 = audioCtx.createBiquadFilter();
|
|
|
|
bandPass125.type = "bandpass";
|
|
|
|
bandPass125.frequency.value = 125;
|
|
|
|
bandPass125.Q.value = 1.41;
|
|
|
|
|
|
|
|
let analyser = audioCtx.createAnalyser();
|
|
|
|
analyser.fftSize = 512;
|
|
|
|
analyser.minDecibels = -100;
|
|
|
|
analyser.maxDecibels = -1;
|
|
|
|
|
|
|
|
source.connect(bandPass65);
|
|
|
|
bandPass65.connect(bandPass125);
|
|
|
|
bandPass125.connect(analyser);
|
|
|
|
|
|
|
|
let dataArray = new Float32Array(analyser.frequencyBinCount);
|
|
|
|
|
|
|
|
function update() {
|
|
|
|
analyser.getFloatFrequencyData(dataArray);
|
|
|
|
buffer.push(...dataArray);
|
|
|
|
if (buffer.length > 10 * audioCtx.sampleRate) {
|
|
|
|
buffer = buffer.slice(-10 * audioCtx.sampleRate);
|
|
|
|
}
|
|
|
|
|
|
|
|
levelValues = buffer.map(val => Math.pow(10, (val / 20)));
|
|
|
|
levelValues = levelValues.map(val => Math.floor(val));
|
|
|
|
|
|
|
|
let sortedData = levelValues.slice().sort((a, b) => a - b);
|
|
|
|
upperValue = sortedData[Math.floor(upperPercentile * sortedData.length)];
|
|
|
|
lowerValue = sortedData[Math.floor(lowerPercentile * sortedData.length)];
|
|
|
|
|
|
|
|
console.log("Upper Percentile in Decimal: " + upperValue);
|
|
|
|
|
|
|
|
|
|
|
|
console.log("Lower Percentile in Decimal: " + lowerValue);
|
|
|
|
requestAnimationFrame(update);
|
|
|
|
}
|
|
|
|
|
|
|
|
update();
|
|
|
|
});
|
|
|
|
},
|
|
|
|
data(){
|
2022-12-16 23:17:37 +00:00
|
|
|
return{
|
|
|
|
text : "Helo World",
|
|
|
|
}
|
|
|
|
}
|
2022-12-11 23:33:34 +00:00
|
|
|
}
|
|
|
|
</script>
|