master
parent
090642cc7f
commit
ec60595911
|
@ -0,0 +1,95 @@
|
|||
<template>
|
||||
<canvas
|
||||
:width="width"
|
||||
:height="height"
|
||||
v-draw-meter="{ amp: dBVal, peak: dBPeakVal, clipSize: clipSize, showPeaks: showPeaks }"
|
||||
/>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
props: {
|
||||
val: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
peakVal: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
refreshRate: {
|
||||
type: Number,
|
||||
default: 0.1
|
||||
},
|
||||
clipSize: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: 20
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 128
|
||||
},
|
||||
showPeaks: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dBVal: function () {
|
||||
return 40 * Math.log10(this.val)+20;
|
||||
},
|
||||
dBPeakVal: function () {
|
||||
return 40 * Math.log10(this.peakVal)+20;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
val: function (newVal, oldVal) {
|
||||
if (this.showPeaks) {
|
||||
var smoothingFactor = 50;
|
||||
if (newVal > this.peakVal) {
|
||||
this.peakVal = newVal;
|
||||
} else {
|
||||
this.peakVal =
|
||||
newVal * (1 / smoothingFactor) +
|
||||
this.peakVal * ((smoothingFactor - 1) / smoothingFactor);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
directives: {
|
||||
drawMeter: function (canvas, binding) {
|
||||
var clipSize = binding.value.clipSize;
|
||||
var showPeaks = binding.value.showPeaks;
|
||||
var amp = binding.value.amp / 76 + 1;
|
||||
var peak = binding.value.peak / 76 + 1;
|
||||
var w = canvas.width;
|
||||
var h = canvas.height;
|
||||
var hInRange = h - clipSize;
|
||||
var ctx = canvas.getContext("2d");
|
||||
var gradient = ctx.createLinearGradient(0, 0, 0, h);
|
||||
gradient.addColorStop(0, "red");
|
||||
gradient.addColorStop(clipSize / h, "orange");
|
||||
gradient.addColorStop(clipSize / h, "greenyellow");
|
||||
gradient.addColorStop(1, "#009374");
|
||||
ctx.clearRect(0, 0, w, h);
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.fillRect(0, h - hInRange * amp, w, hInRange * amp);
|
||||
if (showPeaks) {
|
||||
if (peak >= 1) {
|
||||
ctx.fillStyle = "red";
|
||||
} else {
|
||||
ctx.fillStyle = "greenyellow";
|
||||
}
|
||||
ctx.fillRect(0, Math.round(h - hInRange * peak), w, 1);
|
||||
}
|
||||
ctx.fillStyle = "white";
|
||||
ctx.fillRect(0, clipSize, w, 1);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
|
@ -1,14 +1,45 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="">
|
||||
<div class="text-center">
|
||||
|
||||
<client-only>
|
||||
<Vue3Lottie
|
||||
v-if="show"
|
||||
style="position: fixed;background-color: white;z-index: 99999"
|
||||
:animation-data="anim"
|
||||
:loop="true"
|
||||
width="100%"
|
||||
height="100%"
|
||||
/>
|
||||
</client-only>
|
||||
|
||||
<slot/>
|
||||
<!-- <NuxtPage />-->
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as animationData from "~/assets/animation.json";
|
||||
import 'vue3-lottie/dist/style.css'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show:true,
|
||||
anim: animationData.default, // for saving the reference to the animation
|
||||
lottieOptions: { animationData: animationData.default }
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.show=false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script setup>
|
||||
|
||||
useHead({
|
||||
title:'MindBoost',
|
||||
link:[
|
||||
|
|
|
@ -12,6 +12,7 @@
|
|||
"vue": "^3.2.26",
|
||||
"vue-audio-visual": "^3.0.3",
|
||||
"vue-lottie": "^0.2.1",
|
||||
"vue3-circle-progress": "^1.0.7",
|
||||
"vue3-lottie": "^2.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
@ -3462,6 +3463,17 @@
|
|||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/core-js": {
|
||||
"version": "3.27.0",
|
||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.27.0.tgz",
|
||||
"integrity": "sha512-wY6cKosevs430KRkHUIsvepDXHGjlXOZO3hYXNyqpD6JvB0X28aXyv0t1Y1vZMwE7SoKmtfa6IASHCPN52FwBQ==",
|
||||
"hasInstallScript": true,
|
||||
"peer": true,
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/core-js"
|
||||
}
|
||||
},
|
||||
"node_modules/core-util-is": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
|
||||
|
@ -10093,6 +10105,15 @@
|
|||
"vue": "^3.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vue3-circle-progress": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/vue3-circle-progress/-/vue3-circle-progress-1.0.7.tgz",
|
||||
"integrity": "sha512-Z916xKQhuEcaOvwIfCFUX9r/gPUNd40G2aJbROcRtotm5FE4dZPP4S4iDEISexE9XMF813swkdc5VzCdFxfE8g==",
|
||||
"peerDependencies": {
|
||||
"core-js": "^3.9.0",
|
||||
"vue": "^3.0.5"
|
||||
}
|
||||
},
|
||||
"node_modules/vue3-lottie": {
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmjs.org/vue3-lottie/-/vue3-lottie-2.4.0.tgz",
|
||||
|
@ -13038,6 +13059,12 @@
|
|||
"keygrip": "~1.1.0"
|
||||
}
|
||||
},
|
||||
"core-js": {
|
||||
"version": "3.27.0",
|
||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.27.0.tgz",
|
||||
"integrity": "sha512-wY6cKosevs430KRkHUIsvepDXHGjlXOZO3hYXNyqpD6JvB0X28aXyv0t1Y1vZMwE7SoKmtfa6IASHCPN52FwBQ==",
|
||||
"peer": true
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
|
||||
|
@ -17781,6 +17808,12 @@
|
|||
"@vue/devtools-api": "^6.4.5"
|
||||
}
|
||||
},
|
||||
"vue3-circle-progress": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/vue3-circle-progress/-/vue3-circle-progress-1.0.7.tgz",
|
||||
"integrity": "sha512-Z916xKQhuEcaOvwIfCFUX9r/gPUNd40G2aJbROcRtotm5FE4dZPP4S4iDEISexE9XMF813swkdc5VzCdFxfE8g==",
|
||||
"requires": {}
|
||||
},
|
||||
"vue3-lottie": {
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmjs.org/vue3-lottie/-/vue3-lottie-2.4.0.tgz",
|
||||
|
|
|
@ -21,6 +21,7 @@
|
|||
"vue": "^3.2.26",
|
||||
"vue-audio-visual": "^3.0.3",
|
||||
"vue-lottie": "^0.2.1",
|
||||
"vue3-circle-progress": "^1.0.7",
|
||||
"vue3-lottie": "^2.4.0"
|
||||
}
|
||||
}
|
||||
|
|
488
pages/band.vue
488
pages/band.vue
|
@ -1,14 +1,102 @@
|
|||
<template>
|
||||
<div class="home">
|
||||
<div>
|
||||
<client-only>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="home">
|
||||
|
||||
<button @click="StartButtonPressed">Start</button>
|
||||
</div>
|
||||
<button class="btn btn-success" @click="StartButtonPressed">Start</button>
|
||||
<VueMeter
|
||||
:val="RecentLevelValue"
|
||||
/>
|
||||
|
||||
<div><CircleProgress :size="80" :percent="height" :viewport="true" :is-gradient="true" /></div>
|
||||
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Band Frequency</th>
|
||||
<th>Percentile</th>
|
||||
<th>Result ABC</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Global</td>
|
||||
<td>{{Percentile_Global.percentile}}</td>
|
||||
<td>{{Percentile_Global.result}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bandpass 65</td>
|
||||
<td>{{Percentile_65.percentile}}</td>
|
||||
<td>{{Percentile_65.result}}</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Bandpass 125</td>
|
||||
<td>{{Percentile_125.percentile}}</td>
|
||||
<td>{{Percentile_125.result}}</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Bandpass 250</td>
|
||||
<td>{{Percentile_250.percentile}}</td>
|
||||
<td>{{Percentile_250.result}}</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Bandpass 500</td>
|
||||
<td>{{Percentile_500.percentile}}</td>
|
||||
<td>{{Percentile_500.result}}</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Bandpass 1000</td>
|
||||
<td>{{Percentile_1000.percentile}}</td>
|
||||
<td>{{Percentile_1000.result}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bandpass 2000</td>
|
||||
<td>{{Percentile_2000.percentile}}</td>
|
||||
<td>{{Percentile_2000.result}}</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Bandpass 4000</td>
|
||||
<td>{{Percentile_4000.percentile}}</td>
|
||||
<td>{{Percentile_4000.result}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bandpass 8000</td>
|
||||
<td>{{Percentile_8000.percentile}}</td>
|
||||
<td>{{Percentile_8000.result}}</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Bandpass 16000</td>
|
||||
<td>{{Percentile_16000.percentile}}</td>
|
||||
<td>{{Percentile_16000.result}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</client-only>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import "vue3-circle-progress/dist/circle-progress.css";
|
||||
import CircleProgress from "vue3-circle-progress";
|
||||
export default {
|
||||
name: 'HomeView',
|
||||
components:{
|
||||
CircleProgress
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
// This object holds all state of the app
|
||||
|
@ -51,7 +139,7 @@ export default {
|
|||
date:{},
|
||||
time:{},
|
||||
|
||||
Timeframe: 250,
|
||||
Timeframe: 5000,
|
||||
UpperPercentile: 0.9,
|
||||
LowerPercentile: 0.1,
|
||||
LimitA: 2.5,
|
||||
|
@ -63,26 +151,97 @@ export default {
|
|||
Gain:{},
|
||||
HPF:{},
|
||||
LPF:{},
|
||||
BandPass_65:{},
|
||||
BandPass_125:{},
|
||||
BandPass_250:{},
|
||||
BandPass_500:{},
|
||||
BandPass_1000:{},
|
||||
BandPass_2000:{},
|
||||
BandPass_4000:{},
|
||||
BandPass_8000:{},
|
||||
BandPass_6000:{},
|
||||
analyser:{},
|
||||
LevelAnalyser:{},
|
||||
LevelBuffer:{},
|
||||
|
||||
AnalyserbandPass65:{},
|
||||
AnalyserbandPass125:{},
|
||||
AnalyserbandPass250:{},
|
||||
AnalyserbandPass500:{},
|
||||
AnalyserbandPass1000:{},
|
||||
AnalyserbandPass2000:{},
|
||||
AnalyserbandPass4000:{},
|
||||
AnalyserbandPass8000:{},
|
||||
AnalyserbandPass16000:{},
|
||||
bandPass65Buffer:[],
|
||||
bandPass125Buffer:[],
|
||||
bandPass250Buffer:[],
|
||||
bandPass500Buffer:[],
|
||||
bandPass1000Buffer:[],
|
||||
bandPass2000Buffer:[],
|
||||
bandPass4000Buffer:[],
|
||||
bandPass8000Buffer:[],
|
||||
bandPass16000Buffer:[],
|
||||
AnimationID:{},
|
||||
id:{},
|
||||
|
||||
bufferLength:{},
|
||||
dataArray:{},
|
||||
RecentRMS: 0,
|
||||
RecentRMS65: 0,
|
||||
RecentRMS125: 0,
|
||||
RecentRMS250: 0,
|
||||
RecentRMS500: 0,
|
||||
RecentRMS1000: 0,
|
||||
RecentRMS2000: 0,
|
||||
RecentRMS4000: 0,
|
||||
RecentRMS8000: 0,
|
||||
RecentRMS16000: 0,
|
||||
ByteToDecimal: 0,
|
||||
RecentLevelValue: 0,
|
||||
RecentLevelValue65: 0,
|
||||
RecentLevelValue125: 0,
|
||||
RecentLevelValue250: 0,
|
||||
RecentLevelValue500: 0,
|
||||
RecentLevelValue1000: 0,
|
||||
RecentLevelValue2000: 0,
|
||||
RecentLevelValue4000: 0,
|
||||
RecentLevelValue8000: 0,
|
||||
RecentLevelValue16000: 0,
|
||||
|
||||
ArrayCounter:0,
|
||||
LevelValues:[],
|
||||
LevelValues65:[],
|
||||
LevelValues125:[],
|
||||
LevelValues250:[],
|
||||
LevelValues500:[],
|
||||
LevelValues1000:[],
|
||||
LevelValues2000:[],
|
||||
LevelValues4000:[],
|
||||
LevelValues8000:[],
|
||||
LevelValues16000:[],
|
||||
CummulatedLevelValues:0,
|
||||
CummulatedLevelValues65:0,
|
||||
CummulatedLevelValues125:0,
|
||||
CummulatedLevelValues250:0,
|
||||
CummulatedLevelValues5000:0,
|
||||
CummulatedLevelValues1000:0,
|
||||
CummulatedLevelValues2000:0,
|
||||
CummulatedLevelValues4000:0,
|
||||
SortedArray:[],
|
||||
SortedArray65:[],
|
||||
IndexMax:{},
|
||||
IndexMin:{},
|
||||
PercentileValue:{},
|
||||
Percentile_65:{},
|
||||
Percentile_125:{},
|
||||
Percentile_250:{},
|
||||
Percentile_500:{},
|
||||
Percentile_1000:{},
|
||||
Percentile_2000:{},
|
||||
Percentile_4000:{},
|
||||
Percentile_8000:{},
|
||||
Percentile_16000:{},
|
||||
Percentile_Global:{},
|
||||
|
||||
height:0,
|
||||
value:1,
|
||||
|
@ -93,6 +252,14 @@ export default {
|
|||
|
||||
MicError:0,
|
||||
bandPass1:{},
|
||||
bandPass125:{},
|
||||
bandPass250:{},
|
||||
bandPass500:{},
|
||||
bandPass1000:{},
|
||||
bandPass2000:{},
|
||||
bandPass4000:{},
|
||||
bandPass8000:{},
|
||||
bandPass16000:{},
|
||||
|
||||
|
||||
}
|
||||
|
@ -132,6 +299,15 @@ export default {
|
|||
ResetLevelValues() {
|
||||
this.ArrayCounter = 0;
|
||||
this.LevelValues = [];
|
||||
this.LevelValues65=[];
|
||||
this.LevelValues125=[];
|
||||
this.LevelValues250=[];
|
||||
this.LevelValues500=[];
|
||||
this.LevelValues1000=[];
|
||||
this.LevelValues2000=[];
|
||||
this.LevelValues4000=[];
|
||||
this.LevelValues8000=[];
|
||||
this.LevelValues16000=[];
|
||||
},
|
||||
|
||||
|
||||
|
@ -146,10 +322,11 @@ export default {
|
|||
},
|
||||
|
||||
|
||||
Percentile(InputArray) {
|
||||
Percentile(InputArray,band=0) {
|
||||
|
||||
this.SortedArray = InputArray.sort(this.numSort);
|
||||
this.RMStoDBFS(this.SortedArray);
|
||||
|
||||
//console.log('Sortiertes Array DBFS: ' + SortedArray);
|
||||
|
||||
this.IndexMax = Math.round(this.SortedArray.length * this.UpperPercentile);
|
||||
|
@ -172,7 +349,8 @@ export default {
|
|||
//console.log('seite = ' + this.seite);
|
||||
|
||||
this.NeueSeite = 4;
|
||||
this.ResetLevelValues();
|
||||
|
||||
return {percentile:this.PercentileValue,result:this.ResultABC,band:band};
|
||||
},
|
||||
|
||||
|
||||
|
@ -183,25 +361,39 @@ export default {
|
|||
this.height = 0;
|
||||
this.secondsDown = 25;
|
||||
this.CummulatedLevelValues = 0;
|
||||
this.CummulatedLevelValues65 = 0;
|
||||
},
|
||||
|
||||
frame() {
|
||||
if (this.height == 100) {
|
||||
this.stopmeasurement();
|
||||
this.Percentile(this.LevelValues);
|
||||
|
||||
// if (this.height == 100) {
|
||||
// this.stopmeasurement();
|
||||
// console.log(this.LevelValues);
|
||||
this.Percentile_Global= this.Percentile(this.LevelValues,0);
|
||||
this.Percentile_65=this.Percentile(this.LevelValues65,65)
|
||||
this.Percentile_125=this.Percentile(this.LevelValues125,125)
|
||||
this.Percentile_250=this.Percentile(this.LevelValues250,250)
|
||||
this.Percentile_500=this.Percentile(this.LevelValues500,500)
|
||||
this.Percentile_1000=this.Percentile(this.LevelValues1000,1000)
|
||||
this.Percentile_2000=this.Percentile(this.LevelValues2000,2000)
|
||||
this.Percentile_4000=this.Percentile(this.LevelValues4000,4000)
|
||||
this.Percentile_8000=this.Percentile(this.LevelValues8000,8000)
|
||||
this.Percentile_16000=this.Percentile(this.LevelValues16000,16000)
|
||||
// this.Percentile(this.LevelValues65);
|
||||
this.ResetLevelValues();
|
||||
|
||||
this.height++;
|
||||
// this.ResetLevelValues();
|
||||
console.log("OK");
|
||||
}
|
||||
else {
|
||||
this.height++;
|
||||
console.log(this.height);
|
||||
this.value = this.height+2;
|
||||
console.log(this.height);
|
||||
if (this.height % 4 == 0){
|
||||
this.secondsDown = 25 - (this.height/4);
|
||||
}
|
||||
}
|
||||
// }
|
||||
// else {
|
||||
// this.height++;
|
||||
// console.log(this.height);
|
||||
// this.value = this.height+2;
|
||||
// console.log(this.height);
|
||||
// if (this.height % 4 == 0){
|
||||
// this.secondsDown = 25 - (this.height/4);
|
||||
// }
|
||||
// }
|
||||
},
|
||||
|
||||
startmeasurement() {
|
||||
|
@ -228,16 +420,113 @@ export default {
|
|||
//RMS Value
|
||||
RecentLevel(){
|
||||
this.LevelAnalyser.getByteTimeDomainData(this.LevelBuffer);
|
||||
this.AnalyserbandPass65.getByteTimeDomainData(this.bandPass65Buffer);
|
||||
this.AnalyserbandPass125.getByteTimeDomainData(this.bandPass125Buffer)
|
||||
this.AnalyserbandPass250.getByteTimeDomainData(this.bandPass250Buffer)
|
||||
this.AnalyserbandPass500.getByteTimeDomainData(this.bandPass500Buffer)
|
||||
this.AnalyserbandPass1000.getByteTimeDomainData(this.bandPass1000Buffer)
|
||||
this.AnalyserbandPass2000.getByteTimeDomainData(this.bandPass2000Buffer)
|
||||
this.AnalyserbandPass4000.getByteTimeDomainData(this.bandPass4000Buffer)
|
||||
this.AnalyserbandPass8000.getByteTimeDomainData(this.bandPass8000Buffer)
|
||||
this.AnalyserbandPass16000.getByteTimeDomainData(this.bandPass16000Buffer)
|
||||
|
||||
for (var i = 0; i < 512; i++) {
|
||||
this.ByteToDecimal = (this.LevelBuffer[i]-128)/128;
|
||||
//console.log("LevelBuffer i = "+ self.LevelBuffer[i]);
|
||||
this.RecentRMS += this.ByteToDecimal * this.ByteToDecimal;
|
||||
|
||||
this.ByteToDecimal = (this.bandPass65Buffer[i]-128)/128;
|
||||
//console.log("LevelBuffer i = "+ self.LevelBuffer[i]);
|
||||
this.RecentRMS65 += this.ByteToDecimal * this.ByteToDecimal;
|
||||
|
||||
this.ByteToDecimal = (this.bandPass125Buffer[i]-128)/128;
|
||||
//console.log("LevelBuffer i = "+ self.LevelBuffer[i]);
|
||||
this.RecentRMS125 += this.ByteToDecimal * this.ByteToDecimal;
|
||||
|
||||
this.ByteToDecimal = (this.bandPass250Buffer[i]-128)/128;
|
||||
//console.log("LevelBuffer i = "+ self.LevelBuffer[i]);
|
||||
this.RecentRMS250 += this.ByteToDecimal * this.ByteToDecimal;
|
||||
|
||||
this.ByteToDecimal = (this.bandPass500Buffer[i]-128)/128;
|
||||
//console.log("LevelBuffer i = "+ self.LevelBuffer[i]);
|
||||
this.RecentRMS500 += this.ByteToDecimal * this.ByteToDecimal;
|
||||
|
||||
this.ByteToDecimal = (this.bandPass1000Buffer[i]-128)/128;
|
||||
//console.log("LevelBuffer i = "+ self.LevelBuffer[i]);
|
||||
this.RecentRMS1000 += this.ByteToDecimal * this.ByteToDecimal;
|
||||
|
||||
|
||||
this.ByteToDecimal = (this.bandPass2000Buffer[i]-128)/128;
|
||||
//console.log("LevelBuffer i = "+ self.LevelBuffer[i]);
|
||||
this.RecentRMS2000 += this.ByteToDecimal * this.ByteToDecimal;
|
||||
|
||||
|
||||
this.ByteToDecimal = (this.bandPass4000Buffer[i]-128)/128;
|
||||
//console.log("LevelBuffer i = "+ self.LevelBuffer[i]);
|
||||
this.RecentRMS4000 += this.ByteToDecimal * this.ByteToDecimal;
|
||||
|
||||
this.ByteToDecimal = (this.bandPass8000Buffer[i]-128)/128;
|
||||
//console.log("LevelBuffer i = "+ self.LevelBuffer[i]);
|
||||
this.RecentRMS8000 += this.ByteToDecimal * this.ByteToDecimal;
|
||||
|
||||
|
||||
this.ByteToDecimal = (this.bandPass16000Buffer[i]-128)/128;
|
||||
//console.log("LevelBuffer i = "+ self.LevelBuffer[i]);
|
||||
this.RecentRMS16000 += this.ByteToDecimal * this.ByteToDecimal;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Global
|
||||
this.RecentRMS /= 512;
|
||||
this.RecentLevelValue = Math.sqrt(this.RecentRMS);
|
||||
|
||||
// Freq 65
|
||||
this.RecentRMS65 /= 512;
|
||||
this.RecentLevelValue65 = Math.sqrt(this.RecentRMS65);
|
||||
|
||||
// Freq 125
|
||||
this.RecentRMS125 /= 512;
|
||||
this.RecentLevelValue125= Math.sqrt(this.RecentRMS125);
|
||||
|
||||
// Freq 250
|
||||
this.RecentRMS250 /= 512;
|
||||
this.RecentLevelValue250= Math.sqrt(this.RecentRMS250);
|
||||
|
||||
this.RecentRMS500 /= 512;
|
||||
this.RecentLevelValue500= Math.sqrt(this.RecentRMS500);
|
||||
|
||||
this.RecentRMS1000 /= 512;
|
||||
this.RecentLevelValue1000= Math.sqrt(this.RecentRMS1000);
|
||||
|
||||
this.RecentRMS2000 /= 512;
|
||||
this.RecentLevelValue2000= Math.sqrt(this.RecentRMS2000);
|
||||
|
||||
this.RecentRMS4000 /= 512;
|
||||
this.RecentLevelValue4000= Math.sqrt(this.RecentRMS4000);
|
||||
|
||||
this.RecentRMS8000 /= 512;
|
||||
this.RecentLevelValue8000= Math.sqrt(this.RecentRMS8000);
|
||||
|
||||
this.RecentRMS16000 /= 512;
|
||||
this.RecentLevelValue16000= Math.sqrt(this.RecentRMS16000);
|
||||
|
||||
|
||||
this.LevelValues[this.ArrayCounter] = this.RecentLevelValue;
|
||||
this.LevelValues65[this.ArrayCounter] = this.RecentLevelValue65;
|
||||
this.LevelValues125[this.ArrayCounter]=this.RecentLevelValue125;
|
||||
this.LevelValues250[this.ArrayCounter]=this.RecentLevelValue250;
|
||||
this.LevelValues500[this.ArrayCounter]=this.RecentLevelValue500;
|
||||
this.LevelValues1000[this.ArrayCounter]=this.RecentLevelValue1000;
|
||||
this.LevelValues2000[this.ArrayCounter]=this.RecentLevelValue2000;
|
||||
this.LevelValues4000[this.ArrayCounter]=this.RecentLevelValue4000;
|
||||
this.LevelValues8000[this.ArrayCounter]=this.RecentLevelValue8000;
|
||||
this.LevelValues16000[this.ArrayCounter]=this.RecentLevelValue16000;
|
||||
|
||||
|
||||
this.CummulatedLevelValues = this.CummulatedLevelValues + this.RecentLevelValue*1000;
|
||||
if (this.ArrayCounter > 200 && this.CummulatedLevelValues < 50){
|
||||
|
@ -255,7 +544,8 @@ export default {
|
|||
this.MicError = 2;
|
||||
}
|
||||
++this.ArrayCounter;
|
||||
console.log("Recent Level",this.RecentLevelValue);
|
||||
// console.log("Recent Level",this.RecentLevelValue);
|
||||
// console.log("Recent Level 65",this.RecentLevelValue65);
|
||||
this.AnimationID = requestAnimationFrame(this.RecentLevel);
|
||||
},
|
||||
|
||||
|
@ -298,6 +588,7 @@ export default {
|
|||
|
||||
|
||||
|
||||
|
||||
this.analyser = this.audioCtx.createAnalyser();
|
||||
this.analyser.fftSize = 256;
|
||||
this.analyser.minDecibels = -90;
|
||||
|
@ -311,15 +602,162 @@ export default {
|
|||
this.LevelAnalyser.smoothingTimeConstant = 0.95;
|
||||
this.LevelBuffer = new Uint8Array(512);
|
||||
|
||||
// Band Pass 65
|
||||
this.AnalyserbandPass65 = this.audioCtx.createAnalyser();
|
||||
this.AnalyserbandPass65.fftSize = 512;
|
||||
this.AnalyserbandPass65.minDecibels = -100;
|
||||
this.AnalyserbandPass65.maxDecibels = -1;
|
||||
this.AnalyserbandPass65.smoothingTimeConstant = 0.95;
|
||||
this.bandPass65Buffer = new Uint8Array(512);
|
||||
|
||||
// Band Pass 125
|
||||
this.AnalyserbandPass125 = this.audioCtx.createAnalyser();
|
||||
this.AnalyserbandPass125.fftSize = 512;
|
||||
this.AnalyserbandPass125.minDecibels = -100;
|
||||
this.AnalyserbandPass125.maxDecibels = -1;
|
||||
this.AnalyserbandPass125.smoothingTimeConstant = 0.95;
|
||||
this.bandPass125Buffer = new Uint8Array(512);
|
||||
|
||||
this.bandPass125=this.audioCtx.createBiquadFilter();
|
||||
this.bandPass125.type='bandpass'
|
||||
this.bandPass125.frequency.value=125;
|
||||
this.bandPass125.Q.value=1.41;
|
||||
|
||||
|
||||
// Band Pass 250
|
||||
this.AnalyserbandPass250 = this.audioCtx.createAnalyser();
|
||||
this.AnalyserbandPass250.fftSize = 512;
|
||||
this.AnalyserbandPass250.minDecibels = -100;
|
||||
this.AnalyserbandPass250.maxDecibels = -1;
|
||||
this.AnalyserbandPass250.smoothingTimeConstant = 0.95;
|
||||
this.bandPass250Buffer = new Uint8Array(512);
|
||||
|
||||
this.bandPass250=this.audioCtx.createBiquadFilter();
|
||||
this.bandPass250.type='bandpass'
|
||||
this.bandPass250.frequency.value=250;
|
||||
this.bandPass250.Q.value=1.41;
|
||||
|
||||
// Band Pass 500
|
||||
this.AnalyserbandPass500 = this.audioCtx.createAnalyser();
|
||||
this.AnalyserbandPass500.fftSize = 512;
|
||||
this.AnalyserbandPass500.minDecibels = -100;
|
||||
this.AnalyserbandPass500.maxDecibels = -1;
|
||||
this.AnalyserbandPass500.smoothingTimeConstant = 0.95;
|
||||
this.bandPass500Buffer = new Uint8Array(512);
|
||||
|
||||
this.bandPass500=this.audioCtx.createBiquadFilter();
|
||||
this.bandPass500.type='bandpass'
|
||||
this.bandPass500.frequency.value=500;
|
||||
this.bandPass500.Q.value=1.41;
|
||||
|
||||
// Band Pass 1000
|
||||
this.AnalyserbandPass1000 = this.audioCtx.createAnalyser();
|
||||
this.AnalyserbandPass1000.fftSize = 512;
|
||||
this.AnalyserbandPass1000.minDecibels = -100;
|
||||
this.AnalyserbandPass1000.maxDecibels = -1;
|
||||
this.AnalyserbandPass1000.smoothingTimeConstant = 0.95;
|
||||
this.bandPass1000Buffer = new Uint8Array(512);
|
||||
|
||||
this.bandPass1000=this.audioCtx.createBiquadFilter();
|
||||
this.bandPass1000.type='bandpass'
|
||||
this.bandPass1000.frequency.value=1000;
|
||||
this.bandPass1000.Q.value=1.41;
|
||||
|
||||
// Band Pass 2000
|
||||
this.AnalyserbandPass2000 = this.audioCtx.createAnalyser();
|
||||
this.AnalyserbandPass2000.fftSize = 512;
|
||||
this.AnalyserbandPass2000.minDecibels = -100;
|
||||
this.AnalyserbandPass2000.maxDecibels = -1;
|
||||
this.AnalyserbandPass2000.smoothingTimeConstant = 0.95;
|
||||
this.bandPass2000Buffer = new Uint8Array(512);
|
||||
|
||||
this.bandPass2000=this.audioCtx.createBiquadFilter();
|
||||
this.bandPass2000.type='bandpass'
|
||||
this.bandPass2000.frequency.value=2000;
|
||||
this.bandPass2000.Q.value=1.41;
|
||||
|
||||
// Band Pass 4000
|
||||
this.AnalyserbandPass4000 = this.audioCtx.createAnalyser();
|
||||
this.AnalyserbandPass4000.fftSize = 512;
|
||||
this.AnalyserbandPass4000.minDecibels = -100;
|
||||
this.AnalyserbandPass4000.maxDecibels = -1;
|
||||
this.AnalyserbandPass4000.smoothingTimeConstant = 0.95;
|
||||
this.bandPass4000Buffer = new Uint8Array(512);
|
||||
|
||||
this.bandPass4000=this.audioCtx.createBiquadFilter();
|
||||
this.bandPass4000.type='bandpass'
|
||||
this.bandPass4000.frequency.value=4000;
|
||||
this.bandPass4000.Q.value=1.41;
|
||||
|
||||
|
||||
|
||||
// Band Pass 8000
|
||||
this.AnalyserbandPass8000 = this.audioCtx.createAnalyser();
|
||||
this.AnalyserbandPass8000.fftSize = 512;
|
||||
this.AnalyserbandPass8000.minDecibels = -100;
|
||||
this.AnalyserbandPass8000.maxDecibels = -1;
|
||||
this.AnalyserbandPass8000.smoothingTimeConstant = 0.95;
|
||||
this.bandPass8000Buffer = new Uint8Array(512);
|
||||
|
||||
this.bandPass8000=this.audioCtx.createBiquadFilter();
|
||||
this.bandPass8000.type='bandpass'
|
||||
this.bandPass8000.frequency.value=8000;
|
||||
this.bandPass8000.Q.value=1.41;
|
||||
|
||||
// Band Pass 16000
|
||||
this.AnalyserbandPass16000 = this.audioCtx.createAnalyser();
|
||||
this.AnalyserbandPass16000.fftSize = 512;
|
||||
this.AnalyserbandPass16000.minDecibels = -100;
|
||||
this.AnalyserbandPass16000.maxDecibels = -1;
|
||||
this.AnalyserbandPass16000.smoothingTimeConstant = 0.95;
|
||||
this.bandPass16000Buffer = new Uint8Array(512);
|
||||
|
||||
this.bandPass16000=this.audioCtx.createBiquadFilter();
|
||||
this.bandPass16000.type='bandpass'
|
||||
this.bandPass16000.frequency.value=400;
|
||||
this.bandPass16000.Q.value=1.41;
|
||||
|
||||
|
||||
|
||||
this.source = this.audioCtx.createMediaStreamSource(stream);
|
||||
this.source.connect(this.Gain);
|
||||
this.Gain.connect(this.HPF);
|
||||
this.HPF.connect(this.LPF);
|
||||
this.LPF.connect(this.analyser);
|
||||
this.LPF.connect(this.LevelAnalyser);
|
||||
this.bandPass1.connect(this.LPF);
|
||||
|
||||
this.bandPass1.connect(this.audioCtx.destination);
|
||||
this.source.connect(this.bandPass1);
|
||||
this.bandPass1.connect(this.AnalyserbandPass65);
|
||||
// this.bandPass1.connect(this.audioCtx.destination);
|
||||
// 125 Band
|
||||
this.source.connect(this.bandPass125);
|
||||
this.bandPass125.connect(this.AnalyserbandPass125);
|
||||
|
||||
this.source.connect(this.bandPass250);
|
||||
this.bandPass250.connect(this.AnalyserbandPass250);
|
||||
|
||||
this.source.connect(this.bandPass500);
|
||||
this.bandPass500.connect(this.AnalyserbandPass500);
|
||||
|
||||
this.source.connect(this.bandPass1000);
|
||||
this.bandPass1000.connect(this.AnalyserbandPass1000);
|
||||
|
||||
this.source.connect(this.bandPass2000);
|
||||
this.bandPass2000.connect(this.AnalyserbandPass2000);
|
||||
|
||||
this.source.connect(this.bandPass4000);
|
||||
this.bandPass4000.connect(this.AnalyserbandPass4000);
|
||||
|
||||
this.source.connect(this.bandPass8000);
|
||||
this.bandPass8000.connect(this.AnalyserbandPass8000);
|
||||
//
|
||||
this.source.connect(this.bandPass16000);
|
||||
this.bandPass16000.connect(this.AnalyserbandPass16000);
|
||||
|
||||
|
||||
|
||||
// this.source.connect(this.bandPass1);
|
||||
// this.bandPass1.connect(this.audioCtx.destination);
|
||||
// this.LevelAnalyser.connect(this.audioCtx.destination);
|
||||
|
||||
this.FirstStart = false;
|
||||
|
|
|
@ -0,0 +1,780 @@
|
|||
<template>
|
||||
<div>
|
||||
<client-only>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="home">
|
||||
|
||||
<button class="btn btn-success" @click="StartButtonPressed">Start</button>
|
||||
<VueMeter
|
||||
:val="RecentLevelValue"
|
||||
/>
|
||||
|
||||
<div><CircleProgress :size="80" :percent="height" :viewport="true" :is-gradient="true" /></div>
|
||||
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Band Frequency</th>
|
||||
<th>Percentile</th>
|
||||
<th>Result ABC</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Global</td>
|
||||
<td>{{Percentile_Global.percentile}}</td>
|
||||
<td>{{Percentile_Global.result}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bandpass 65</td>
|
||||
<td>{{Percentile_65.percentile}}</td>
|
||||
<td>{{Percentile_65.result}}</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Bandpass 125</td>
|
||||
<td>{{Percentile_125.percentile}}</td>
|
||||
<td>{{Percentile_125.result}}</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Bandpass 250</td>
|
||||
<td>{{Percentile_250.percentile}}</td>
|
||||
<td>{{Percentile_250.result}}</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Bandpass 500</td>
|
||||
<td>{{Percentile_500.percentile}}</td>
|
||||
<td>{{Percentile_500.result}}</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Bandpass 1000</td>
|
||||
<td>{{Percentile_1000.percentile}}</td>
|
||||
<td>{{Percentile_1000.result}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bandpass 2000</td>
|
||||
<td>{{Percentile_2000.percentile}}</td>
|
||||
<td>{{Percentile_2000.result}}</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Bandpass 4000</td>
|
||||
<td>{{Percentile_4000.percentile}}</td>
|
||||
<td>{{Percentile_4000.result}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bandpass 8000</td>
|
||||
<td>{{Percentile_8000.percentile}}</td>
|
||||
<td>{{Percentile_8000.result}}</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Bandpass 16000</td>
|
||||
<td>{{Percentile_16000.percentile}}</td>
|
||||
<td>{{Percentile_16000.result}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</client-only>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import "vue3-circle-progress/dist/circle-progress.css";
|
||||
import CircleProgress from "vue3-circle-progress";
|
||||
export default {
|
||||
name: 'HomeView',
|
||||
components:{
|
||||
CircleProgress
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
// This object holds all state of the app
|
||||
classes: [
|
||||
['h1', 'Heading 1', '6rem', '300', '-.015625em', -1],
|
||||
['h2', 'Heading 2', '3.75rem', '300', '-.0083333333em', 0],
|
||||
['h3', 'Heading 3', '3rem', '400', 'normal', 1],
|
||||
['h4', 'Heading 4', '2.125rem', '400', '.0073529412em', 2],
|
||||
['h5', 'Heading 5', '1.5rem', '400', 'normal', 2],
|
||||
['h6', 'Heading 6', '1.25rem', '500', '.0125em', 3],
|
||||
['subtitle-1', 'Subtitle 1', '1rem', '400', '.009375em', 4],
|
||||
['subtitle-2', 'Subtitle 2', '0.875rem', '500', '.0071428571em', 4],
|
||||
['body-1', 'Body 1', '1rem', '400', '.03125em', 4],
|
||||
['body-2', 'Body 2', '0.875rem', '400', '.0178571429em', 4],
|
||||
['button', 'Button', '0.875rem', '500', '.0892857143em', 4],
|
||||
['caption', 'Caption', '0.75rem', '400', '.0333333333em', 4],
|
||||
['overline', 'Overline', '0.75rem', '500', '.1666666667em', 4],
|
||||
],
|
||||
//meineReaktiveVariable: "Leon",
|
||||
AlteSeite: 0,
|
||||
NeueSeite: 0,
|
||||
|
||||
pdf: 0,
|
||||
valid:true,
|
||||
Vorname:"",
|
||||
Nachname:"",
|
||||
nameRules: [
|
||||
v => !!v || 'Feld muss ausgefüllt sein',
|
||||
],
|
||||
Anrede:"",
|
||||
Mail:"",
|
||||
emailRules: [
|
||||
v => !!v || 'Feld muss ausgefüllt sein',
|
||||
v => /.+@.+\..+/.test(v) || 'Eingabe ungültig',
|
||||
],
|
||||
Firma:"",
|
||||
Raum:"",
|
||||
Zusatzinfos:"",
|
||||
|
||||
date:{},
|
||||
time:{},
|
||||
|
||||
Timeframe: 250,
|
||||
UpperPercentile: 0.9,
|
||||
LowerPercentile: 0.1,
|
||||
LimitA: 2.5,
|
||||
LimitB:10.0,
|
||||
|
||||
audioCtx:{},
|
||||
source:{},
|
||||
stream:{},
|
||||
Gain:{},
|
||||
HPF:{},
|
||||
LPF:{},
|
||||
BandPass_65:{},
|
||||
BandPass_125:{},
|
||||
BandPass_250:{},
|
||||
BandPass_500:{},
|
||||
BandPass_1000:{},
|
||||
BandPass_2000:{},
|
||||
BandPass_4000:{},
|
||||
BandPass_8000:{},
|
||||
BandPass_6000:{},
|
||||
analyser:{},
|
||||
LevelAnalyser:{},
|
||||
LevelBuffer:{},
|
||||
AnalyserbandPass65:{},
|
||||
AnalyserbandPass125:{},
|
||||
AnalyserbandPass250:{},
|
||||
AnalyserbandPass500:{},
|
||||
AnalyserbandPass1000:{},
|
||||
AnalyserbandPass2000:{},
|
||||
AnalyserbandPass4000:{},
|
||||
AnalyserbandPass8000:{},
|
||||
AnalyserbandPass16000:{},
|
||||
bandPass65Buffer:[],
|
||||
bandPass125Buffer:[],
|
||||
bandPass250Buffer:[],
|
||||
bandPass500Buffer:[],
|
||||
bandPass1000Buffer:[],
|
||||
bandPass2000Buffer:[],
|
||||
bandPass4000Buffer:[],
|
||||
bandPass8000Buffer:[],
|
||||
bandPass16000Buffer:[],
|
||||
AnimationID:{},
|
||||
id:{},
|
||||
|
||||
bufferLength:{},
|
||||
dataArray:{},
|
||||
RecentRMS: 0,
|
||||
RecentRMS65: 0,
|
||||
RecentRMS125: 0,
|
||||
RecentRMS250: 0,
|
||||
RecentRMS500: 0,
|
||||
RecentRMS1000: 0,
|
||||
RecentRMS2000: 0,
|
||||
RecentRMS4000: 0,
|
||||
RecentRMS8000: 0,
|
||||
RecentRMS16000: 0,
|
||||
ByteToDecimal: 0,
|
||||
RecentLevelValue: 0,
|
||||
RecentLevelValue65: 0,
|
||||
RecentLevelValue125: 0,
|
||||
RecentLevelValue250: 0,
|
||||
RecentLevelValue500: 0,
|
||||
RecentLevelValue1000: 0,
|
||||
RecentLevelValue2000: 0,
|
||||
RecentLevelValue4000: 0,
|
||||
RecentLevelValue8000: 0,
|
||||
RecentLevelValue16000: 0,
|
||||
|
||||
ArrayCounter:0,
|
||||
LevelValues:[],
|
||||
LevelValues65:[],
|
||||
LevelValues125:[],
|
||||
LevelValues250:[],
|
||||
LevelValues500:[],
|
||||
LevelValues1000:[],
|
||||
LevelValues2000:[],
|
||||
LevelValues4000:[],
|
||||
LevelValues8000:[],
|
||||
LevelValues16000:[],
|
||||
CummulatedLevelValues:0,
|
||||
CummulatedLevelValues65:0,
|
||||
CummulatedLevelValues125:0,
|
||||
CummulatedLevelValues250:0,
|
||||
CummulatedLevelValues5000:0,
|
||||
CummulatedLevelValues1000:0,
|
||||
CummulatedLevelValues2000:0,
|
||||
CummulatedLevelValues4000:0,
|
||||
SortedArray:[],
|
||||
SortedArray65:[],
|
||||
IndexMax:{},
|
||||
IndexMin:{},
|
||||
PercentileValue:{},
|
||||
Percentile_65:{},
|
||||
Percentile_125:{},
|
||||
Percentile_250:{},
|
||||
Percentile_500:{},
|
||||
Percentile_1000:{},
|
||||
Percentile_2000:{},
|
||||
Percentile_4000:{},
|
||||
Percentile_8000:{},
|
||||
Percentile_16000:{},
|
||||
Percentile_Global:{},
|
||||
|
||||
height:0,
|
||||
value:1,
|
||||
secondsDown:25,
|
||||
|
||||
Result:{},
|
||||
ResultABC:{},
|
||||
|
||||
MicError:0,
|
||||
bandPass1:{},
|
||||
bandPass125:{},
|
||||
bandPass250:{},
|
||||
bandPass500:{},
|
||||
bandPass1000:{},
|
||||
bandPass2000:{},
|
||||
bandPass4000:{},
|
||||
bandPass8000:{},
|
||||
bandPass16000:{},
|
||||
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
// Write your own functions that mutate data via `this.`
|
||||
nextPage() {
|
||||
// this.seite = (this.seite + 1) % 3;
|
||||
this.AlteSeite = this.NeueSeite
|
||||
this.NeueSeite = (this.NeueSeite + 1);
|
||||
},
|
||||
firstPage() {
|
||||
this.AlteSeite = this.NeueSeite;
|
||||
this.NeueSeite = 0;
|
||||
},
|
||||
previousPage() {
|
||||
this.NeueSeite = this.AlteSeite;
|
||||
this.AlteSeite = (this.AlteSeite - 1);
|
||||
this.pdf = 0;
|
||||
},
|
||||
|
||||
pdfForm() {
|
||||
this.pdf = 1;
|
||||
},
|
||||
|
||||
|
||||
about() {
|
||||
this.AlteSeite = this.NeueSeite;
|
||||
this.NeueSeite = 10;
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
ResetLevelValues() {
|
||||
this.ArrayCounter = 0;
|
||||
this.LevelValues = [];
|
||||
this.LevelValues65=[];
|
||||
this.LevelValues125=[];
|
||||
this.LevelValues250=[];
|
||||
this.LevelValues500=[];
|
||||
this.LevelValues1000=[];
|
||||
this.LevelValues2000=[];
|
||||
this.LevelValues4000=[];
|
||||
this.LevelValues8000=[];
|
||||
this.LevelValues16000=[];
|
||||
},
|
||||
|
||||
|
||||
RMStoDBFS(InputArray){
|
||||
for (var i = 0; i < InputArray.length; i++) {
|
||||
InputArray[i] = 20 * Math.log10(InputArray[i])
|
||||
}
|
||||
},
|
||||
|
||||
numSort(a, b) {
|
||||
return (a - b);
|
||||
},
|
||||
|
||||
|
||||
Percentile(InputArray,band=0) {
|
||||
|
||||
this.SortedArray = InputArray.sort(this.numSort);
|
||||
this.RMStoDBFS(this.SortedArray);
|
||||
|
||||
//console.log('Sortiertes Array DBFS: ' + SortedArray);
|
||||
|
||||
this.IndexMax = Math.round(this.SortedArray.length * this.UpperPercentile);
|
||||
this.IndexMin = Math.round(this.SortedArray.length * this.LowerPercentile);
|
||||
this.PercentileValue = this.SortedArray[this.IndexMax] - this.SortedArray[this.IndexMin];
|
||||
this.PercentileValue = this.PercentileValue.toFixed(2); //nach zwei Dazimalstellen abbrechen
|
||||
console.log('percentile Value = ' + this.PercentileValue);
|
||||
|
||||
if (this.PercentileValue < this.LimitA) {
|
||||
this.Result = 1
|
||||
this.ResultABC = "A"
|
||||
} else if (this.PercentileValue < this.LimitB) {
|
||||
this.Result = 2
|
||||
this.ResultABC = "B"
|
||||
}
|
||||
else {
|
||||
this.Result = 3
|
||||
this.ResultABC = "C"
|
||||
}
|
||||
//console.log('seite = ' + this.seite);
|
||||
|
||||
this.NeueSeite = 4;
|
||||
this.ResetLevelValues();
|
||||
return {percentile:this.PercentileValue,result:this.ResultABC,band:band};
|
||||
},
|
||||
|
||||
|
||||
stopmeasurement() {
|
||||
window.cancelAnimationFrame(this.AnimationID);
|
||||
clearInterval(this.id);
|
||||
console.log('Measurement stopped.');
|
||||
this.height = 0;
|
||||
this.secondsDown = 25;
|
||||
this.CummulatedLevelValues = 0;
|
||||
this.CummulatedLevelValues65 = 0;
|
||||
},
|
||||
|
||||
frame() {
|
||||
if (this.height == 100) {
|
||||
this.stopmeasurement();
|
||||
console.log(this.LevelValues);
|
||||
this.Percentile_Global= this.Percentile(this.LevelValues,0);
|
||||
this.Percentile_65=this.Percentile(this.LevelValues65,65)
|
||||
this.Percentile_125=this.Percentile(this.LevelValues125,125)
|
||||
this.Percentile_250=this.Percentile(this.LevelValues250,250)
|
||||
this.Percentile_500=this.Percentile(this.LevelValues500,500)
|
||||
this.Percentile_1000=this.Percentile(this.LevelValues1000,1000)
|
||||
this.Percentile_2000=this.Percentile(this.LevelValues2000,2000)
|
||||
this.Percentile_4000=this.Percentile(this.LevelValues4000,4000)
|
||||
this.Percentile_8000=this.Percentile(this.LevelValues8000,8000)
|
||||
this.Percentile_16000=this.Percentile(this.LevelValues16000,16000)
|
||||
// this.Percentile(this.LevelValues65);
|
||||
|
||||
|
||||
|
||||
|
||||
console.log("OK");
|
||||
}
|
||||
else {
|
||||
this.height++;
|
||||
console.log(this.height);
|
||||
this.value = this.height+2;
|
||||
console.log(this.height);
|
||||
if (this.height % 4 == 0){
|
||||
this.secondsDown = 25 - (this.height/4);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
startmeasurement() {
|
||||
//this.visualize();
|
||||
this.ResetLevelValues();
|
||||
|
||||
var today = new Date();
|
||||
this.date = today.getDate()+'.'+(today.getMonth()+1)+'.'+today.getFullYear();
|
||||
this.time = today.getHours()+':'+today.getMinutes();
|
||||
//requestAnimationFrame(this.RecentLevel);
|
||||
this.height = 0;
|
||||
requestAnimationFrame(this.RecentLevel);
|
||||
this.id = setInterval(this.frame, this.Timeframe);
|
||||
//this.frame();
|
||||
|
||||
},
|
||||
|
||||
CancleMeasurement() {
|
||||
this.stopmeasurement();
|
||||
this.previousPage();
|
||||
this.MicError=0;
|
||||
},
|
||||
|
||||
//RMS Value
|
||||
RecentLevel(){
|
||||
this.LevelAnalyser.getByteTimeDomainData(this.LevelBuffer);
|
||||
this.AnalyserbandPass65.getByteTimeDomainData(this.bandPass65Buffer);
|
||||
this.AnalyserbandPass125.getByteTimeDomainData(this.bandPass125Buffer)
|
||||
this.AnalyserbandPass250.getByteTimeDomainData(this.bandPass250Buffer)
|
||||
this.AnalyserbandPass500.getByteTimeDomainData(this.bandPass500Buffer)
|
||||
this.AnalyserbandPass1000.getByteTimeDomainData(this.bandPass1000Buffer)
|
||||
this.AnalyserbandPass2000.getByteTimeDomainData(this.bandPass2000Buffer)
|
||||
this.AnalyserbandPass4000.getByteTimeDomainData(this.bandPass4000Buffer)
|
||||
this.AnalyserbandPass8000.getByteTimeDomainData(this.bandPass8000Buffer)
|
||||
this.AnalyserbandPass16000.getByteTimeDomainData(this.bandPass16000Buffer)
|
||||
|
||||
for (var i = 0; i < 512; i++) {
|
||||
this.ByteToDecimal = (this.LevelBuffer[i]-128)/128;
|
||||
//console.log("LevelBuffer i = "+ self.LevelBuffer[i]);
|
||||
this.RecentRMS += this.ByteToDecimal * this.ByteToDecimal;
|
||||
|
||||
this.ByteToDecimal = (this.bandPass65Buffer[i]-128)/128;
|
||||
//console.log("LevelBuffer i = "+ self.LevelBuffer[i]);
|
||||
this.RecentRMS65 += this.ByteToDecimal * this.ByteToDecimal;
|
||||
|
||||
this.ByteToDecimal = (this.bandPass125Buffer[i]-128)/128;
|
||||
//console.log("LevelBuffer i = "+ self.LevelBuffer[i]);
|
||||
this.RecentRMS125 += this.ByteToDecimal * this.ByteToDecimal;
|
||||
|
||||
this.ByteToDecimal = (this.bandPass250Buffer[i]-128)/128;
|
||||
//console.log("LevelBuffer i = "+ self.LevelBuffer[i]);
|
||||
this.RecentRMS250 += this.ByteToDecimal * this.ByteToDecimal;
|
||||
|
||||
this.ByteToDecimal = (this.bandPass500Buffer[i]-128)/128;
|
||||
//console.log("LevelBuffer i = "+ self.LevelBuffer[i]);
|
||||
this.RecentRMS500 += this.ByteToDecimal * this.ByteToDecimal;
|
||||
|
||||
this.ByteToDecimal = (this.bandPass1000Buffer[i]-128)/128;
|
||||
//console.log("LevelBuffer i = "+ self.LevelBuffer[i]);
|
||||
this.RecentRMS1000 += this.ByteToDecimal * this.ByteToDecimal;
|
||||
|
||||
|
||||
this.ByteToDecimal = (this.bandPass2000Buffer[i]-128)/128;
|
||||
//console.log("LevelBuffer i = "+ self.LevelBuffer[i]);
|
||||
this.RecentRMS2000 += this.ByteToDecimal * this.ByteToDecimal;
|
||||
|
||||
|
||||
this.ByteToDecimal = (this.bandPass4000Buffer[i]-128)/128;
|
||||
//console.log("LevelBuffer i = "+ self.LevelBuffer[i]);
|
||||
this.RecentRMS4000 += this.ByteToDecimal * this.ByteToDecimal;
|
||||
|
||||
this.ByteToDecimal = (this.bandPass8000Buffer[i]-128)/128;
|
||||
//console.log("LevelBuffer i = "+ self.LevelBuffer[i]);
|
||||
this.RecentRMS8000 += this.ByteToDecimal * this.ByteToDecimal;
|
||||
|
||||
|
||||
this.ByteToDecimal = (this.bandPass16000Buffer[i]-128)/128;
|
||||
//console.log("LevelBuffer i = "+ self.LevelBuffer[i]);
|
||||
this.RecentRMS16000 += this.ByteToDecimal * this.ByteToDecimal;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Global
|
||||
this.RecentRMS /= 512;
|
||||
this.RecentLevelValue = Math.sqrt(this.RecentRMS);
|
||||
|
||||
// Freq 65
|
||||
this.RecentRMS65 /= 512;
|
||||
this.RecentLevelValue65 = Math.sqrt(this.RecentRMS65);
|
||||
|
||||
// Freq 125
|
||||
this.RecentRMS125 /= 512;
|
||||
this.RecentLevelValue125= Math.sqrt(this.RecentRMS125);
|
||||
|
||||
// Freq 250
|
||||
this.RecentRMS250 /= 512;
|
||||
this.RecentLevelValue250= Math.sqrt(this.RecentRMS250);
|
||||
|
||||
this.RecentRMS500 /= 512;
|
||||
this.RecentLevelValue500= Math.sqrt(this.RecentRMS500);
|
||||
|
||||
this.RecentRMS1000 /= 512;
|
||||
this.RecentLevelValue1000= Math.sqrt(this.RecentRMS1000);
|
||||
|
||||
this.RecentRMS2000 /= 512;
|
||||
this.RecentLevelValue2000= Math.sqrt(this.RecentRMS2000);
|
||||
|
||||
this.RecentRMS4000 /= 512;
|
||||
this.RecentLevelValue4000= Math.sqrt(this.RecentRMS4000);
|
||||
|
||||
this.RecentRMS8000 /= 512;
|
||||
this.RecentLevelValue8000= Math.sqrt(this.RecentRMS8000);
|
||||
|
||||
this.RecentRMS16000 /= 512;
|
||||
this.RecentLevelValue16000= Math.sqrt(this.RecentRMS16000);
|
||||
|
||||
|
||||
this.LevelValues[this.ArrayCounter] = this.RecentLevelValue;
|
||||
this.LevelValues65[this.ArrayCounter] = this.RecentLevelValue65;
|
||||
this.LevelValues125[this.ArrayCounter]=this.RecentLevelValue125;
|
||||
this.LevelValues250[this.ArrayCounter]=this.RecentLevelValue250;
|
||||
this.LevelValues500[this.ArrayCounter]=this.RecentLevelValue500;
|
||||
this.LevelValues1000[this.ArrayCounter]=this.RecentLevelValue1000;
|
||||
this.LevelValues2000[this.ArrayCounter]=this.RecentLevelValue2000;
|
||||
this.LevelValues4000[this.ArrayCounter]=this.RecentLevelValue4000;
|
||||
this.LevelValues8000[this.ArrayCounter]=this.RecentLevelValue8000;
|
||||
this.LevelValues16000[this.ArrayCounter]=this.RecentLevelValue16000;
|
||||
|
||||
|
||||
this.CummulatedLevelValues = this.CummulatedLevelValues + this.RecentLevelValue*1000;
|
||||
if (this.ArrayCounter > 200 && this.CummulatedLevelValues < 50){
|
||||
this.stopmeasurement();
|
||||
this.MicError = 1;
|
||||
}
|
||||
|
||||
if (isNaN(this.RecentLevelValue)){
|
||||
this.stopmeasurement();
|
||||
this.MicError = 1;
|
||||
}
|
||||
|
||||
if (this.RecentLevelValue > 0.5){
|
||||
this.stopmeasurement();
|
||||
this.MicError = 2;
|
||||
}
|
||||
++this.ArrayCounter;
|
||||
console.log("Recent Level",this.RecentLevelValue);
|
||||
console.log("Recent Level 65",this.RecentLevelValue65);
|
||||
this.AnimationID = requestAnimationFrame(this.RecentLevel);
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
StartButtonPressed(){
|
||||
|
||||
let constraints = {
|
||||
audio : {
|
||||
autoGainControl : false,
|
||||
echoCancellation : false,
|
||||
noiseSuppression : false
|
||||
}
|
||||
}
|
||||
if (navigator.mediaDevices.getUserMedia) {
|
||||
console.log('getUserMedia supported.');
|
||||
navigator.mediaDevices.getUserMedia(constraints).then((stream)=> {
|
||||
|
||||
this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
|
||||
|
||||
//set up the different audio nodes we will use for the app
|
||||
|
||||
this.Gain = this.audioCtx.createGain();
|
||||
this.Gain.gain.setValueAtTime(2.0, this.audioCtx.currentTime);
|
||||
// this.Gain.gain.setValueAtTime(0.5,0);
|
||||
|
||||
this.HPF = this.audioCtx.createBiquadFilter();
|
||||
this.HPF.type = "highpass";
|
||||
this.HPF.frequency.value = 450;
|
||||
|
||||
this.LPF = this.audioCtx.createBiquadFilter();
|
||||
this.LPF.type = "lowpass";
|
||||
this.LPF.frequency.value = 10000;
|
||||
|
||||
this.bandPass1=this.audioCtx.createBiquadFilter();
|
||||
this.bandPass1.type='bandpass'
|
||||
this.bandPass1.frequency.value=63;
|
||||
this.bandPass1.Q.value=1.41;
|
||||
|
||||
|
||||
|
||||
|
||||
this.analyser = this.audioCtx.createAnalyser();
|
||||
this.analyser.fftSize = 256;
|
||||
this.analyser.minDecibels = -90;
|
||||
this.analyser.maxDecibels = -10;
|
||||
this.analyser.smoothingTimeConstant = 0.9;
|
||||
|
||||
this.LevelAnalyser = this.audioCtx.createAnalyser();
|
||||
this.LevelAnalyser.fftSize = 512;
|
||||
this.LevelAnalyser.minDecibels = -100;
|
||||
this.LevelAnalyser.maxDecibels = -1;
|
||||
this.LevelAnalyser.smoothingTimeConstant = 0.95;
|
||||
this.LevelBuffer = new Uint8Array(512);
|
||||
|
||||
// Band Pass 65
|
||||
this.AnalyserbandPass65 = this.audioCtx.createAnalyser();
|
||||
this.AnalyserbandPass65.fftSize = 512;
|
||||
this.AnalyserbandPass65.minDecibels = -100;
|
||||
this.AnalyserbandPass65.maxDecibels = -1;
|
||||
this.AnalyserbandPass65.smoothingTimeConstant = 0.95;
|
||||
this.bandPass65Buffer = new Uint8Array(512);
|
||||
|
||||
// Band Pass 125
|
||||
this.AnalyserbandPass125 = this.audioCtx.createAnalyser();
|
||||
this.AnalyserbandPass125.fftSize = 512;
|
||||
this.AnalyserbandPass125.minDecibels = -100;
|
||||
this.AnalyserbandPass125.maxDecibels = -1;
|
||||
this.AnalyserbandPass125.smoothingTimeConstant = 0.95;
|
||||
this.bandPass125Buffer = new Uint8Array(512);
|
||||
|
||||
this.bandPass125=this.audioCtx.createBiquadFilter();
|
||||
this.bandPass125.type='bandpass'
|
||||
this.bandPass125.frequency.value=125;
|
||||
this.bandPass125.Q.value=1.41;
|
||||
|
||||
|
||||
// Band Pass 250
|
||||
this.AnalyserbandPass250 = this.audioCtx.createAnalyser();
|
||||
this.AnalyserbandPass250.fftSize = 512;
|
||||
this.AnalyserbandPass250.minDecibels = -100;
|
||||
this.AnalyserbandPass250.maxDecibels = -1;
|
||||
this.AnalyserbandPass250.smoothingTimeConstant = 0.95;
|
||||
this.bandPass250Buffer = new Uint8Array(512);
|
||||
|
||||
this.bandPass250=this.audioCtx.createBiquadFilter();
|
||||
this.bandPass250.type='bandpass'
|
||||
this.bandPass250.frequency.value=250;
|
||||
this.bandPass250.Q.value=1.41;
|
||||
|
||||
// Band Pass 500
|
||||
this.AnalyserbandPass500 = this.audioCtx.createAnalyser();
|
||||
this.AnalyserbandPass500.fftSize = 512;
|
||||
this.AnalyserbandPass500.minDecibels = -100;
|
||||
this.AnalyserbandPass500.maxDecibels = -1;
|
||||
this.AnalyserbandPass500.smoothingTimeConstant = 0.95;
|
||||
this.bandPass500Buffer = new Uint8Array(512);
|
||||
|
||||
this.bandPass500=this.audioCtx.createBiquadFilter();
|
||||
this.bandPass500.type='bandpass'
|
||||
this.bandPass500.frequency.value=500;
|
||||
this.bandPass500.Q.value=1.41;
|
||||
|
||||
// Band Pass 1000
|
||||
this.AnalyserbandPass1000 = this.audioCtx.createAnalyser();
|
||||
this.AnalyserbandPass1000.fftSize = 512;
|
||||
this.AnalyserbandPass1000.minDecibels = -100;
|
||||
this.AnalyserbandPass1000.maxDecibels = -1;
|
||||
this.AnalyserbandPass1000.smoothingTimeConstant = 0.95;
|
||||
this.bandPass1000Buffer = new Uint8Array(512);
|
||||
|
||||
this.bandPass1000=this.audioCtx.createBiquadFilter();
|
||||
this.bandPass1000.type='bandpass'
|
||||
this.bandPass1000.frequency.value=1000;
|
||||
this.bandPass1000.Q.value=1.41;
|
||||
|
||||
// Band Pass 2000
|
||||
this.AnalyserbandPass2000 = this.audioCtx.createAnalyser();
|
||||
this.AnalyserbandPass2000.fftSize = 512;
|
||||
this.AnalyserbandPass2000.minDecibels = -100;
|
||||
this.AnalyserbandPass2000.maxDecibels = -1;
|
||||
this.AnalyserbandPass2000.smoothingTimeConstant = 0.95;
|
||||
this.bandPass2000Buffer = new Uint8Array(512);
|
||||
|
||||
this.bandPass2000=this.audioCtx.createBiquadFilter();
|
||||
this.bandPass2000.type='bandpass'
|
||||
this.bandPass2000.frequency.value=2000;
|
||||
this.bandPass2000.Q.value=1.41;
|
||||
|
||||
// Band Pass 4000
|
||||
this.AnalyserbandPass4000 = this.audioCtx.createAnalyser();
|
||||
this.AnalyserbandPass4000.fftSize = 512;
|
||||
this.AnalyserbandPass4000.minDecibels = -100;
|
||||
this.AnalyserbandPass4000.maxDecibels = -1;
|
||||
this.AnalyserbandPass4000.smoothingTimeConstant = 0.95;
|
||||
this.bandPass4000Buffer = new Uint8Array(512);
|
||||
|
||||
this.bandPass4000=this.audioCtx.createBiquadFilter();
|
||||
this.bandPass4000.type='bandpass'
|
||||
this.bandPass4000.frequency.value=4000;
|
||||
this.bandPass4000.Q.value=1.41;
|
||||
|
||||
|
||||
|
||||
// Band Pass 8000
|
||||
this.AnalyserbandPass8000 = this.audioCtx.createAnalyser();
|
||||
this.AnalyserbandPass8000.fftSize = 512;
|
||||
this.AnalyserbandPass8000.minDecibels = -100;
|
||||
this.AnalyserbandPass8000.maxDecibels = -1;
|
||||
this.AnalyserbandPass8000.smoothingTimeConstant = 0.95;
|
||||
this.bandPass8000Buffer = new Uint8Array(512);
|
||||
|
||||
this.bandPass8000=this.audioCtx.createBiquadFilter();
|
||||
this.bandPass8000.type='bandpass'
|
||||
this.bandPass8000.frequency.value=8000;
|
||||
this.bandPass8000.Q.value=1.41;
|
||||
|
||||
// Band Pass 16000
|
||||
this.AnalyserbandPass16000 = this.audioCtx.createAnalyser();
|
||||
this.AnalyserbandPass16000.fftSize = 512;
|
||||
this.AnalyserbandPass16000.minDecibels = -100;
|
||||
this.AnalyserbandPass16000.maxDecibels = -1;
|
||||
this.AnalyserbandPass16000.smoothingTimeConstant = 0.95;
|
||||
this.bandPass16000Buffer = new Uint8Array(512);
|
||||
|
||||
this.bandPass16000=this.audioCtx.createBiquadFilter();
|
||||
this.bandPass16000.type='bandpass'
|
||||
this.bandPass16000.frequency.value=400;
|
||||
this.bandPass16000.Q.value=1.41;
|
||||
|
||||
|
||||
|
||||
this.source = this.audioCtx.createMediaStreamSource(stream);
|
||||
this.source.connect(this.Gain);
|
||||
this.Gain.connect(this.HPF);
|
||||
this.HPF.connect(this.LPF);
|
||||
this.LPF.connect(this.analyser);
|
||||
this.LPF.connect(this.LevelAnalyser);
|
||||
|
||||
this.source.connect(this.bandPass1);
|
||||
this.bandPass1.connect(this.AnalyserbandPass65);
|
||||
// this.bandPass1.connect(this.audioCtx.destination);
|
||||
// 125 Band
|
||||
this.source.connect(this.bandPass125);
|
||||
this.bandPass125.connect(this.AnalyserbandPass125);
|
||||
|
||||
this.source.connect(this.bandPass250);
|
||||
this.bandPass250.connect(this.AnalyserbandPass250);
|
||||
|
||||
this.source.connect(this.bandPass500);
|
||||
this.bandPass500.connect(this.AnalyserbandPass500);
|
||||
|
||||
this.source.connect(this.bandPass1000);
|
||||
this.bandPass1000.connect(this.AnalyserbandPass1000);
|
||||
|
||||
this.source.connect(this.bandPass2000);
|
||||
this.bandPass2000.connect(this.AnalyserbandPass2000);
|
||||
|
||||
this.source.connect(this.bandPass4000);
|
||||
this.bandPass4000.connect(this.AnalyserbandPass4000);
|
||||
|
||||
this.source.connect(this.bandPass8000);
|
||||
this.bandPass8000.connect(this.AnalyserbandPass8000);
|
||||
//
|
||||
this.source.connect(this.bandPass16000);
|
||||
this.bandPass16000.connect(this.AnalyserbandPass16000);
|
||||
|
||||
|
||||
|
||||
// this.source.connect(this.bandPass1);
|
||||
// this.bandPass1.connect(this.audioCtx.destination);
|
||||
// this.LevelAnalyser.connect(this.audioCtx.destination);
|
||||
|
||||
this.FirstStart = false;
|
||||
//this.startmeasurement();
|
||||
setTimeout(this.startmeasurement, 800); //short break to avoid zeros at beginning of measurement
|
||||
})
|
||||
|
||||
// Error callback
|
||||
.catch(function(err) {
|
||||
console.log('The following gUM error occured: ' + err);
|
||||
})
|
||||
}
|
||||
else {
|
||||
console.log('Error: This Site is not supported on your browser!');
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
|
@ -3,29 +3,17 @@
|
|||
<home-bar />
|
||||
<NuxtPage page-key="child" />
|
||||
|
||||
<client-only>
|
||||
<Vue3Lottie
|
||||
:animation-data="anim"
|
||||
|
||||
:height="200"
|
||||
:width="200"
|
||||
/>
|
||||
</client-only>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import HomeBar from "../components/homebar";
|
||||
import * as animationData from "~/assets/animation.json";
|
||||
|
||||
|
||||
export default {
|
||||
components: {HomeBar},
|
||||
data() {
|
||||
return {
|
||||
anim: animationData.default, // for saving the reference to the animation
|
||||
lottieOptions: { animationData: animationData.default }
|
||||
};
|
||||
},
|
||||
|
||||
methods:{
|
||||
handleAnimation: function (anim) {
|
||||
this.anim = anim;
|
||||
|
|
|
@ -4,10 +4,13 @@
|
|||
<div class="row pt-3">
|
||||
<div class="col-12 text-center">
|
||||
<img src="~/assets/image/Cloudsoftware.png">
|
||||
<av-waveform
|
||||
src="/maskin2.wav"
|
||||
played-line-width="2"
|
||||
></av-waveform>
|
||||
<client-only>
|
||||
<!-- <av-waveform-->
|
||||
<!-- src="/maskin2.wav"-->
|
||||
<!-- :played-line-width="3"-->
|
||||
<!-- :noplayed-line-width="3"-->
|
||||
<!-- ></av-waveform>-->
|
||||
</client-only>
|
||||
<h4 class="fw-bold ">Focus</h4>
|
||||
<div class="pt-3">
|
||||
<img src="~/assets/image/Frame19439.png" />
|
||||
|
|
Loading…
Reference in New Issue