Merge branch 'master' of https://github.com/CraveTeck/mindboost
unknown
commit
af58af3673
|
|
@ -0,0 +1,67 @@
|
|||
class BandpassProcessor extends AudioWorkletProcessor {
|
||||
process(inputs, outputs, parameters) {
|
||||
const input = inputs[0];
|
||||
const output = outputs[0];
|
||||
const frequency = parameters.frequency;
|
||||
const Q = parameters.Q;
|
||||
|
||||
for (let channel = 0; channel < input.length; channel++) {
|
||||
const inputChannel = input[channel];
|
||||
const outputChannel = output[channel];
|
||||
|
||||
for (let i = 0; i < inputChannel.length; i++) {
|
||||
// Apply bandpass filter to inputChannel[i] and store the result in outputChannel[i]
|
||||
// using the provided frequency and Q parameters
|
||||
}
|
||||
}
|
||||
|
||||
// Calculate the RMS value of the output audio data
|
||||
const rms = this.calculateRMS(output);
|
||||
|
||||
// Calculate the dB values
|
||||
const dbValues = this.convertToDB(output);
|
||||
|
||||
// Calculate the 10th and 90th percentile values
|
||||
const percentile10 = this.calculatePercentile(dbValues, 10);
|
||||
const percentile90 = this.calculatePercentile(dbValues, 90);
|
||||
|
||||
// Send the processed data to the main thread
|
||||
this.port.postMessage({ rms, dbValues, percentile10, percentile90 });
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
calculateRMS(data) {
|
||||
let sumOfSquares = 0;
|
||||
for (let channel = 0; channel < data.length; channel++) {
|
||||
const channelData = data[channel];
|
||||
for (let i = 0; i < channelData.length; i++) {
|
||||
sumOfSquares += channelData[i] * channelData[i];
|
||||
}
|
||||
}
|
||||
const meanSquare = sumOfSquares / (data.length * data[0].length);
|
||||
const rms = Math.sqrt(meanSquare);
|
||||
return rms;
|
||||
}
|
||||
|
||||
calculatePercentile(data, percentile) {
|
||||
const sortedData = data.slice().sort((a, b) => a - b);
|
||||
const index = Math.floor((percentile / 100) * sortedData.length);
|
||||
return sortedData[index];
|
||||
}
|
||||
|
||||
convertToDB(data) {
|
||||
const dbValues = [];
|
||||
for (let channel = 0; channel < data.length; channel++) {
|
||||
const channelData = data[channel];
|
||||
for (let i = 0; i < channelData.length; i++) {
|
||||
const amplitude = Math.abs(channelData[i]);
|
||||
const db = 20 * Math.log10(amplitude + this.minAmplitude);
|
||||
dbValues.push(db);
|
||||
}
|
||||
}
|
||||
return dbValues;
|
||||
}
|
||||
}
|
||||
|
||||
export default registerProcessor('bandpass-processor', BandpassProcessor);
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -37,10 +37,10 @@ useHead({
|
|||
content:"#E9C046",
|
||||
},
|
||||
link:[
|
||||
{
|
||||
href:'https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css',
|
||||
rel:'stylesheet',
|
||||
},
|
||||
// {
|
||||
// href:'https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css',
|
||||
// rel:'stylesheet',
|
||||
// },
|
||||
{
|
||||
href: '/favicon.svg',
|
||||
rel:"icon",
|
||||
|
|
@ -92,6 +92,7 @@ useHead({
|
|||
|
||||
<style>
|
||||
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css";
|
||||
@import "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css";
|
||||
.slide-left-enter-active,
|
||||
.slide-left-leave-active,
|
||||
.slide-right-enter-active,
|
||||
|
|
@ -114,4 +115,35 @@ useHead({
|
|||
opacity: 0;
|
||||
transform: translate(50px, 0);
|
||||
}
|
||||
.form-switch .form-check-input {
|
||||
padding: 10px 16px;
|
||||
background-color: #e9c046 !important;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%343a40'/%3e%3c/svg%3e") !important;
|
||||
}
|
||||
.form-check-input:focus {
|
||||
border-color: #e9c046 !important;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0 rgba(13,110,253,.25) !important;
|
||||
}
|
||||
.form-switch .form-check-input:focus {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%343a40'/%3e%3c/svg%3e") !important;
|
||||
}
|
||||
.accordion-button:not(.collapsed){
|
||||
background-color: #ffffff2e !important;
|
||||
}
|
||||
.accordion-button:focus{
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.dropdown-item:focus, .dropdown-item:hover {
|
||||
background-color: #e9c046 !important;
|
||||
}
|
||||
.form-check-input:checked {
|
||||
border-color: #e9c046 !important;
|
||||
}
|
||||
.accordion-button:not(.collapsed)::after {
|
||||
/* background-image: var(--bs-accordion-btn-active-icon); */
|
||||
background-image: var(--bs-accordion-btn-icon) !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -283,7 +283,6 @@ export default defineNuxtConfig({
|
|||
"Mindboost creates soundscapes for your headphones that help you focus up to 35% better. Mindboost combines voice masking, binaural beats and alpha waves.":"Mindboost creates soundscapes for your headphones that help you focus up to 35% better. Mindboost combines voice masking, binaural beats and alpha waves.",
|
||||
"Our algorithm measures the acoustics of your cell phone or other device in the room in real time and generates a soundscape that optimally blocks out disruptive background noise such as colleagues on the phone.":"Our algorithm measures the acoustics of your cell phone or other device in the room in real time and generates a soundscape that optimally blocks out disruptive background noise such as colleagues on the phone.",
|
||||
"All soundscapes in Mindboost have been tested and optimized in listening tests in cooperation with the Fraunhofer IBP. So you can be sure that Mindboost supports you optimally with your concentration.":"All soundscapes in Mindboost have been tested and optimized in listening tests in cooperation with the Fraunhofer IBP. So you can be sure that Mindboost supports you optimally with your concentration.",
|
||||
|
||||
},
|
||||
de: {
|
||||
"welcome": "Willkommen",
|
||||
|
|
|
|||
|
|
@ -1,100 +0,0 @@
|
|||
<template>
|
||||
<div style="background-color: #9ba4a9;height: 100vh">
|
||||
|
||||
|
||||
<home-bar :title="title" />
|
||||
|
||||
<div class="container pt-4">
|
||||
<div class="row justify-content-center px-1 ">
|
||||
<div class="col-12 col-sm-11 col-md-10 p-3 py-4 col-lg-7 bg-white " style="border-radius: 15px">
|
||||
<div class="row px-3">
|
||||
<div class="col-2">
|
||||
<span><i class="fa-solid fs-3 fa-arrow-left-long" style="cursor: pointer" @click="this.$router.go(-1)"></i></span>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<h4 class="text-center fw-bolder">Adaptive Soundscape</h4>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<div class="form-check form-switch float-end">
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row px-2 pt-4">
|
||||
<div class="col-12 ps-3 fs-5" style="line-height: 25px">
|
||||
<p class="p-0 m-0"> The Mindboost sounscape responds to the acousitcs in your room.</p>
|
||||
<p class="p-0 m-0"></p>
|
||||
<p class="">Currently, your room has a:</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row pt-4 ps-3">
|
||||
<div class="col-auto">
|
||||
<span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="54" viewBox="0 0 60 54" fill="none">
|
||||
<path d="M28.9879 0.600098C28.6223 0.600098 28.2613 0.675098 27.9004 0.787598C27.1738 1.01728 26.4801 1.44853 25.8754 2.0626L11.7754 16.1626H3.60039C1.59883 16.1626 -0.0371094 17.7985 -0.0371094 19.8001V34.2001C-0.0371094 36.2017 1.59883 37.8376 3.60039 37.8376H11.7754L25.8379 51.8251C27.1785 53.1704 28.8988 53.761 30.3004 53.1001C31.7113 52.4345 32.4004 50.8313 32.4004 48.9751V4.5751C32.4004 2.7751 31.4816 1.27978 30.0754 0.787598C29.7238 0.665723 29.3535 0.600098 28.9879 0.600098ZM29.0254 3.0001C29.1473 3.0001 29.241 3.00947 29.3254 3.0376C29.6676 3.15478 30.0004 3.45947 30.0004 4.5751V48.9751C30.0004 50.2548 29.5785 50.8267 29.2879 50.9626C28.9973 51.0985 28.4113 51.1126 27.4879 50.1751L12.3754 35.0626C12.352 35.0485 12.3238 35.0345 12.3004 35.0251C12.3895 35.1048 12.0004 34.3454 12.0004 33.9001V20.1001C12.0004 19.6548 12.4035 18.886 12.3004 18.9751C12.3285 18.9517 12.352 18.9282 12.3754 18.9001L27.5629 3.7501C28.1254 3.18291 28.6551 3.00479 29.0254 3.0001ZM45.9379 5.1751C45.4129 5.26416 45.0098 5.69072 44.9488 6.22041C44.8926 6.7501 45.1832 7.25635 45.6754 7.4626C52.8144 11.0626 57.6754 18.4454 57.6754 27.0001C57.6754 35.5548 52.8144 42.9376 45.6754 46.5376C45.2348 46.6876 44.9254 47.0813 44.8738 47.5407C44.8223 48.0048 45.0426 48.4548 45.441 48.6985C45.8348 48.9376 46.3363 48.9282 46.7254 48.6751C54.6473 44.6767 60.0754 36.4735 60.0754 27.0001C60.0754 17.5267 54.6473 9.32353 46.7254 5.3251C46.5191 5.20791 46.2848 5.15635 46.0504 5.1751C46.0129 5.1751 45.9754 5.1751 45.9379 5.1751ZM41.6629 11.5501C41.1285 11.6157 40.702 12.0329 40.6269 12.5673C40.5473 13.097 40.8332 13.6173 41.3254 13.8376C46.0082 16.3642 49.2004 21.2954 49.2004 27.0001C49.2004 32.686 46.0223 37.6313 41.3629 40.1626C40.7816 40.4813 40.5707 41.2126 40.8941 41.7938C41.2129 42.3751 41.9441 42.586 42.5254 42.2626C47.9348 39.3235 51.6004 33.5813 51.6004 27.0001C51.6004 20.4001 47.9254 14.6345 42.4879 11.7001C42.2723 11.5782 42.0238 11.5267 41.7754 11.5501C41.7379 11.5501 41.7004 11.5501 41.6629 11.5501ZM3.60039 18.6376H9.82539C9.6707 19.097 9.60039 19.5985 9.60039 20.1001V33.9001C9.60039 34.4017 9.67539 34.8985 9.82539 35.3626H3.60039C2.95352 35.3626 2.43789 34.847 2.43789 34.2001V19.8001C2.43789 19.1532 2.95352 18.6376 3.60039 18.6376ZM36.6379 19.0876C36.0566 19.1579 35.616 19.636 35.5879 20.222C35.5598 20.8032 35.9535 21.3235 36.5254 21.4501C38.9816 22.0923 40.8004 24.3329 40.8004 27.0001C40.8004 29.6673 38.9816 31.9079 36.5254 32.5501C35.8832 32.7142 35.4988 33.3704 35.6629 34.0126C35.827 34.6548 36.4832 35.0392 37.1254 34.8751C40.6176 33.961 43.2004 30.7642 43.2004 27.0001C43.2004 23.236 40.6176 20.0392 37.1254 19.1251C36.966 19.0782 36.802 19.0688 36.6379 19.0876Z" fill="#E9C046"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-11 col-md-10 ps-3">
|
||||
<h5>Noisy Environment</h5>
|
||||
<p>The background noise at your workplace is disturbing. Your concentration is severely impaired. Mindboost protects you from the disturbing background noise.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row pt-3 ps-3 opacity-75">
|
||||
<div class="col-auto">
|
||||
<span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="52" height="54" viewBox="0 0 52 54" fill="none">
|
||||
<path d="M28.9879 0.600098C28.6223 0.600098 28.2613 0.675098 27.9004 0.787598C27.1738 1.01728 26.4801 1.44853 25.8754 2.0626L11.7754 16.1626H3.60039C1.59883 16.1626 -0.0371094 17.7985 -0.0371094 19.8001V34.2001C-0.0371094 36.2017 1.59883 37.8376 3.60039 37.8376H11.7754L25.8379 51.8251C27.1785 53.1704 28.8988 53.761 30.3004 53.1001C31.7113 52.4345 32.4004 50.8313 32.4004 48.9751V4.5751C32.4004 2.7751 31.4816 1.27978 30.0754 0.787598C29.7238 0.665723 29.3535 0.600098 28.9879 0.600098ZM29.0254 3.0001C29.1473 3.0001 29.241 3.00947 29.3254 3.0376C29.6676 3.15478 30.0004 3.45947 30.0004 4.5751V48.9751C30.0004 50.2548 29.5785 50.8267 29.2879 50.9626C28.9973 51.0985 28.4113 51.1126 27.4879 50.1751L12.3754 35.0626C12.352 35.0485 12.3238 35.0345 12.3004 35.0251C12.3895 35.1048 12.0004 34.3454 12.0004 33.9001V20.1001C12.0004 19.6548 12.4035 18.886 12.3004 18.9751C12.3285 18.9517 12.352 18.9282 12.3754 18.9001L27.5629 3.7501C28.1254 3.18291 28.6551 3.00479 29.0254 3.0001ZM41.6629 11.5501C41.1285 11.6157 40.702 12.0329 40.627 12.5673C40.5473 13.097 40.8332 13.6173 41.3254 13.8376C46.0082 16.3642 49.2004 21.2954 49.2004 27.0001C49.2004 32.686 46.0223 37.6313 41.3629 40.1626C40.7816 40.4813 40.5707 41.2126 40.8941 41.7938C41.2129 42.3751 41.9441 42.586 42.5254 42.2626C47.9348 39.3235 51.6004 33.5813 51.6004 27.0001C51.6004 20.4001 47.9254 14.6345 42.4879 11.7001C42.2723 11.5782 42.0238 11.5267 41.7754 11.5501C41.7379 11.5501 41.7004 11.5501 41.6629 11.5501ZM3.60039 18.6376H9.82539C9.6707 19.097 9.60039 19.5985 9.60039 20.1001V33.9001C9.60039 34.4017 9.67539 34.8985 9.82539 35.3626H3.60039C2.95352 35.3626 2.43789 34.847 2.43789 34.2001V19.8001C2.43789 19.1532 2.95352 18.6376 3.60039 18.6376ZM36.6379 19.0876C36.0566 19.1579 35.616 19.636 35.5879 20.222C35.5598 20.8032 35.9535 21.3235 36.5254 21.4501C38.9816 22.0923 40.8004 24.3329 40.8004 27.0001C40.8004 29.6673 38.9816 31.9079 36.5254 32.5501C35.8832 32.7142 35.4988 33.3704 35.6629 34.0126C35.827 34.6548 36.4832 35.0392 37.1254 34.8751C40.6176 33.961 43.2004 30.7642 43.2004 27.0001C43.2004 23.236 40.6176 20.0392 37.1254 19.1251C36.966 19.0782 36.802 19.0688 36.6379 19.0876Z" fill="#E9C046"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-11 col-md-10 ps-3">
|
||||
<h5>Medium-noise Environment</h5>
|
||||
<p>The background noise at your workplace should be optimized. In the long term, it could disturb and have a negative impact on your health. Protect yourself with mindboost.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row pt-3 ps-3 opacity-50">
|
||||
<div class="col-auto">
|
||||
<span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="54" viewBox="0 0 44 54" fill="none">
|
||||
<path d="M28.9879 0.600098C28.6223 0.600098 28.2613 0.675098 27.9004 0.787598C27.1738 1.01728 26.4801 1.44853 25.8754 2.0626L11.7754 16.1626H3.60039C1.59883 16.1626 -0.0371094 17.7985 -0.0371094 19.8001V34.2001C-0.0371094 36.2017 1.59883 37.8376 3.60039 37.8376H11.7754L25.8379 51.8251C27.1785 53.1704 28.8988 53.761 30.3004 53.1001C31.7113 52.4345 32.4004 50.8313 32.4004 48.9751V4.5751C32.4004 2.7751 31.4816 1.27978 30.0754 0.787598C29.7238 0.665723 29.3535 0.600098 28.9879 0.600098ZM29.0254 3.0001C29.1473 3.0001 29.241 3.00947 29.3254 3.0376C29.6676 3.15478 30.0004 3.45947 30.0004 4.5751V48.9751C30.0004 50.2548 29.5785 50.8267 29.2879 50.9626C28.9973 51.0985 28.4113 51.1126 27.4879 50.1751L12.3754 35.0626C12.352 35.0485 12.3238 35.0345 12.3004 35.0251C12.3895 35.1048 12.0004 34.3454 12.0004 33.9001V20.1001C12.0004 19.6548 12.4035 18.886 12.3004 18.9751C12.3285 18.9517 12.352 18.9282 12.3754 18.9001L27.5629 3.7501C28.1254 3.18291 28.6551 3.00479 29.0254 3.0001ZM3.60039 18.6376H9.82539C9.6707 19.097 9.60039 19.5985 9.60039 20.1001V33.9001C9.60039 34.4017 9.67539 34.8985 9.82539 35.3626H3.60039C2.95352 35.3626 2.43789 34.847 2.43789 34.2001V19.8001C2.43789 19.1532 2.95352 18.6376 3.60039 18.6376ZM36.6379 19.0876C36.0566 19.1579 35.616 19.636 35.5879 20.222C35.5598 20.8032 35.9535 21.3235 36.5254 21.4501C38.9816 22.0923 40.8004 24.3329 40.8004 27.0001C40.8004 29.6673 38.9816 31.9079 36.5254 32.5501C35.8832 32.7142 35.4988 33.3704 35.6629 34.0126C35.827 34.6548 36.4832 35.0392 37.1254 34.8751C40.6176 33.961 43.2004 30.7642 43.2004 27.0001C43.2004 23.236 40.6176 20.0392 37.1254 19.1251C36.966 19.0782 36.802 19.0688 36.6379 19.0876Z" fill="#E9C046"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-11 col-md-10 ps-3">
|
||||
<h5>Good Environment</h5>
|
||||
<p>
|
||||
The background noise at your workplace provides a long’term healthy basis for concentrated work. With Mindboost you make sure that even sudden disturbances do not distract you.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import HomeBar from "../components/homebar";
|
||||
export default {
|
||||
components: {HomeBar},
|
||||
data(){
|
||||
return{
|
||||
title:'Lagoon Soundscape'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.form-switch .form-check-input {
|
||||
padding: 10px 16px;
|
||||
background-color: black;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,6 +3,7 @@
|
|||
<video-background
|
||||
src="/video/bg-video.mp4"
|
||||
style=" height: 100vh;"
|
||||
poster="/images/poster.png"
|
||||
>
|
||||
<div class="container-fluid overflow-auto" >
|
||||
<div class="row ">
|
||||
|
|
@ -121,7 +122,7 @@ export default {
|
|||
this.login(data.user,data.authorisation.token);
|
||||
|
||||
|
||||
this.$toast.success('Login Successfully....');
|
||||
// this.$toast.success('Login Successfully....');
|
||||
this.$router.push(this.localePath('/onboarding'));
|
||||
|
||||
}else{
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
<div>
|
||||
<video-background
|
||||
src="/video/bg-video.mp4"
|
||||
poster="/images/poster.png"
|
||||
style=" height: 100vh;"
|
||||
>
|
||||
<div class="container-fluid">
|
||||
|
|
|
|||
211
pages/band.vue
211
pages/band.vue
|
|
@ -2,6 +2,30 @@
|
|||
<div>
|
||||
<client-only>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-3 form-group">
|
||||
<label>Attack Time:</label>
|
||||
<input type="text" v-model="timeRamp" class="form-control" placeholder="Enter time ramp to increase or decrease smoothing">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<label for="input-devices">Input Devices:</label>
|
||||
<select id="input-devices" v-model="selectedInputDevice" @change="updateInputDevice">
|
||||
<option v-for="device in inputDevices" :value="device.deviceId">{{ device.label }}</option>
|
||||
</select>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="output-devices">Output Devices:</label>
|
||||
<select id="output-devices" v-model="selectedOutputDevice" @change="updateOutputDevice">
|
||||
<option v-for="device in outputDevices" :value="device.deviceId">{{ device.label }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="home">
|
||||
|
|
@ -12,7 +36,8 @@
|
|||
/>
|
||||
|
||||
<div><CircleProgress :size="80" :percent="height" :viewport="true" :is-gradient="true" /></div>
|
||||
|
||||
Masking Gain : <input id="gain-control" v-model="maxGain1000" type="range" min="0" max="1" step="0.01">
|
||||
Harmonic Gain : <input id="gain-control" v-model="harmonicGain" type="range" min="0" max="1" step="0.01">
|
||||
<div class="row">
|
||||
<div class="col-md-2">
|
||||
<p>Mili Seconds: {{totalms}}</p>
|
||||
|
|
@ -25,6 +50,7 @@
|
|||
<th>Band Frequency</th>
|
||||
<th>Percentile</th>
|
||||
<th>Result ABC</th>
|
||||
<th>Masking Gain</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
@ -32,57 +58,70 @@
|
|||
<td>Global</td>
|
||||
<td>{{Percentile_Global.percentile}}</td>
|
||||
<td>{{Percentile_Global.result}}</td>
|
||||
<td>--</td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bandpass 65</td>
|
||||
<td>{{Percentile_65.percentile}}</td>
|
||||
<td>{{Percentile_65.result}}</td>
|
||||
<td>--</td>
|
||||
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Bandpass 125</td>
|
||||
<td>{{Percentile_125.percentile}}</td>
|
||||
<td>{{Percentile_125.result}}</td>
|
||||
<td>--</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Bandpass 250</td>
|
||||
<td>{{Percentile_250.percentile}}</td>
|
||||
<td>{{Percentile_250.result}}</td>
|
||||
<td>--</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Bandpass 500</td>
|
||||
<td>{{Percentile_500.percentile}}</td>
|
||||
<td>{{Percentile_500.result}}</td>
|
||||
<td>--</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Bandpass 1000</td>
|
||||
<td>{{Percentile_1000.percentile}}</td>
|
||||
<td>{{Percentile_1000.result}}</td>
|
||||
<td>{{maskingGain1000}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bandpass 2000</td>
|
||||
<td>{{Percentile_2000.percentile}}</td>
|
||||
<td>{{Percentile_2000.result}}</td>
|
||||
<td>--</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Bandpass 4000</td>
|
||||
<td>{{Percentile_4000.percentile}}</td>
|
||||
<td>{{Percentile_4000.result}}</td>
|
||||
<td>--</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bandpass 8000</td>
|
||||
<td>{{Percentile_8000.percentile}}</td>
|
||||
<td>{{Percentile_8000.result}}</td>
|
||||
<td>--</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Bandpass 16000</td>
|
||||
<td>{{Percentile_16000.percentile}}</td>
|
||||
<td>{{Percentile_16000.result}}</td>
|
||||
<td>--</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -101,13 +140,36 @@
|
|||
<script>
|
||||
import "vue3-circle-progress/dist/circle-progress.css";
|
||||
import CircleProgress from "vue3-circle-progress";
|
||||
import * as stream from "stream";
|
||||
export default {
|
||||
name: 'HomeView',
|
||||
components:{
|
||||
CircleProgress
|
||||
},
|
||||
mounted() {
|
||||
navigator.mediaDevices.enumerateDevices().then(devices => {
|
||||
this.inputDevices = devices.filter(device => device.kind === 'audioinput');
|
||||
this.outputDevices = devices.filter(device => device.kind === 'audiooutput');
|
||||
|
||||
if (this.inputDevices.length > 0) {
|
||||
this.selectedInputDevice = this.inputDevices[0].deviceId;
|
||||
// this.updateInputDevice();
|
||||
}
|
||||
|
||||
if (this.outputDevices.length > 0) {
|
||||
this.selectedOutputDevice = this.outputDevices[0].deviceId;
|
||||
// this.updateOutputDevice();
|
||||
}
|
||||
});
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
selectedInputDevice: "",
|
||||
selectedOutputDevice: "",
|
||||
inputDevices: [],
|
||||
outputDevices: [],
|
||||
timeRamp:4,
|
||||
|
||||
// This object holds all state of the app
|
||||
classes: [
|
||||
['h1', 'Heading 1', '6rem', '300', '-.015625em', -1],
|
||||
|
|
@ -158,6 +220,7 @@ export default {
|
|||
totalms:0,
|
||||
audioCtx:{},
|
||||
source:{},
|
||||
|
||||
stream:{},
|
||||
Gain:{},
|
||||
HPF:{},
|
||||
|
|
@ -274,12 +337,41 @@ export default {
|
|||
lastArrayCouhter:0,
|
||||
firstArrayCounter:0,
|
||||
data125CountArray:[],
|
||||
dt125counter:0
|
||||
|
||||
dt125counter:0,
|
||||
source100:{},
|
||||
Gain1000:{},
|
||||
SoundNode:{},
|
||||
maxGain1000:0.5,
|
||||
lastGainValue:0,
|
||||
maskingGain1000:0,
|
||||
harmonicGain:1,
|
||||
harmonicGainNode:{},
|
||||
currentDestination:{},
|
||||
compressorNode:{},
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
updateInputDevice() {
|
||||
const constraints = { audio: { deviceId: { exact: this.selectedInputDevice }, autoGainControl : false,
|
||||
echoCancellation : false,
|
||||
noiseSuppression : false } };
|
||||
navigator.mediaDevices.getUserMedia(constraints).then(stream => {
|
||||
this.$emit('inputstream', stream);
|
||||
this.stream=stream;
|
||||
if (this.source){
|
||||
this.source.disconnect();
|
||||
}
|
||||
this.source = this.audioCtx.createMediaStreamSource(this.stream);
|
||||
|
||||
|
||||
});
|
||||
},
|
||||
updateOutputDevice() {
|
||||
this.audioCtx.setSinkId(this.selectedOutputDevice);
|
||||
|
||||
},
|
||||
// Write your own functions that mutate data via `this.`
|
||||
nextPage() {
|
||||
// this.seite = (this.seite + 1) % 3;
|
||||
|
|
@ -339,7 +431,15 @@ export default {
|
|||
numSort(a, b) {
|
||||
return (a - b);
|
||||
},
|
||||
DBFStoRMS(dbfsValue, referenceLevel = -18) {
|
||||
const rmsValue = Math.pow(10, (dbfsValue - referenceLevel) / 20);
|
||||
return rmsValue;
|
||||
},
|
||||
|
||||
RMStoGain(rmsValue) {
|
||||
const gainValue = Math.sqrt(rmsValue);
|
||||
return gainValue;
|
||||
},
|
||||
|
||||
Percentile(InputArray,band=0) {
|
||||
|
||||
|
|
@ -348,6 +448,7 @@ export default {
|
|||
this.SortedArray = tempArray.sort(this.numSort);
|
||||
|
||||
this.RMStoDBFS(this.SortedArray);
|
||||
// console.log(this.SortedArray);
|
||||
|
||||
|
||||
//console.log('Sortiertes Array DBFS: ' + SortedArray);
|
||||
|
|
@ -355,7 +456,8 @@ export default {
|
|||
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
|
||||
|
||||
// this.PercentileValue = this.PercentileValue.toFixed(2); //nach zwei Dazimalstellen abbrechen
|
||||
// console.log('percentile Value = ' + this.PercentileValue);
|
||||
|
||||
if (this.PercentileValue < this.LimitA) {
|
||||
|
|
@ -469,7 +571,44 @@ export default {
|
|||
// console.log("Array Counter",this.ArrayCounter);
|
||||
// console.log("Last",this.lastArrayCouhter);
|
||||
// this.lastArrayCouhter=this.ArrayCounter;
|
||||
const dBFSValue = 20 * Math.log10(this.Percentile_1000.percentile / 1);
|
||||
console.log("dbfs",dBFSValue);
|
||||
this.maskingGain1000=dBFSValue;
|
||||
// // this.Gain.setValueAtTime(dBFSValue,this.audioCtx.currentTime);
|
||||
// const gainValue = Math.pow(10, dBFSValue / 20);
|
||||
// console.log(gainValue);
|
||||
// this.Gain1000.gain.setValueAtTime(gainValue, this.audioCtx.currentTime);
|
||||
|
||||
|
||||
var gainValue = Math.pow(10, this.Percentile_1000.percentile / 20);
|
||||
// this.Gain1000.gain.value = gainValue;
|
||||
|
||||
console.log(this.maxGain1000);
|
||||
let linearGain = this.maxGain1000 * gainValue;
|
||||
// const rmsValue = this.DBFStoRMS(this.Percentile_1000.percentile, -18);
|
||||
// const gainValue = this.RMStoGain(rmsValue);
|
||||
// this.Gain1000.gain.setValueAtTime(linearGain, this.audioCtx.currentTime);
|
||||
|
||||
// define the time (in seconds) to ramp up/down to the target gain value
|
||||
// const rampTime = 1.025;
|
||||
const rampTime = this.timeRamp;
|
||||
// const rampTime = 2;
|
||||
|
||||
|
||||
// define the time (in seconds) to start the ramp up/down
|
||||
const startTime = this.audioCtx.currentTime;
|
||||
// this.Gain1000.gain.cancelScheduledValues(startTime);
|
||||
this.Gain1000.gain.setTargetAtTime(linearGain, startTime,parseFloat(rampTime));
|
||||
// this.Gain1000.gain.value=linearGain;
|
||||
console.log(linearGain);
|
||||
|
||||
|
||||
// this.compressorNode.threshold.setValueAtTime(-2, startTime);
|
||||
// this.compressorNode.knee.setValueAtTime(20, startTime);
|
||||
// this.compressorNode.ratio.setValueAtTime(12, startTime);
|
||||
// this.compressorNode.attack.setValueAtTime(0.125, startTime);
|
||||
// this.compressorNode.release.setValueAtTime(0.75, startTime);
|
||||
// this.Gain1000.gain.value=0;
|
||||
}
|
||||
// console.log(this.ArrayCounter);
|
||||
// console.log("Last",this.lastArrayCouhter);
|
||||
|
|
@ -482,12 +621,14 @@ export default {
|
|||
++this.timeHeight
|
||||
this.totalms+=125;
|
||||
|
||||
console.log('Lendgt',this.LevelValues.length);
|
||||
// console.log('Lendgt',this.LevelValues.length);
|
||||
// this.data125CountArray[this.dt125counter]=this.ArrayCounter;
|
||||
// ++this.dt125counter;
|
||||
// // console.log('Array',this.data125CountArray);
|
||||
// console.log(this.data125CountArray);
|
||||
// console.log(this.Percentile_Global.percentile);
|
||||
|
||||
this.harmonicGainNode.gain.setValueAtTime(this.harmonicGain,this.audioCtx.currentTime);
|
||||
},this.Timeframe)
|
||||
},
|
||||
|
||||
|
|
@ -674,19 +815,67 @@ export default {
|
|||
audio : {
|
||||
autoGainControl : false,
|
||||
echoCancellation : false,
|
||||
noiseSuppression : false
|
||||
noiseSuppression : false,
|
||||
deviceId: { exact: this.selectedInputDevice}
|
||||
|
||||
}
|
||||
}
|
||||
if (navigator.mediaDevices.getUserMedia) {
|
||||
console.log('getUserMedia supported.');
|
||||
navigator.mediaDevices.getUserMedia(constraints).then((stream)=> {
|
||||
|
||||
navigator.mediaDevices.getUserMedia(constraints).then((stream)=> {
|
||||
this.stream=stream;
|
||||
this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
|
||||
|
||||
//set up the different audio nodes we will use for the app
|
||||
this.source = this.audioCtx.createMediaStreamSource(this.stream);
|
||||
this.source100=this.audioCtx.createBufferSource()
|
||||
this.Gain1000=this.audioCtx.createGain();
|
||||
|
||||
this.compressorNode= this.audioCtx.createDynamicsCompressor();
|
||||
|
||||
fetch('/masking/MaskingNoise_1000.aac')
|
||||
.then(response => response.arrayBuffer())
|
||||
.then(arrayBuffer => this.audioCtx.decodeAudioData(arrayBuffer))
|
||||
.then(audioBuffer => {
|
||||
// Set buffer on AudioBufferSourceNode
|
||||
this.source100.buffer = audioBuffer;
|
||||
this.source100.loop = true;
|
||||
// Connect nodes
|
||||
// this.source100.connect(compressorNode);
|
||||
this.source100.connect(this.Gain1000);
|
||||
// this.Gain1000.connect(this.compressorNode);
|
||||
this.Gain1000.connect(this.audioCtx.destination);
|
||||
// this.Gain1000.gain.setValueAtTime(1,this.audioCtx.currentTime);
|
||||
// Play source node
|
||||
this.source100.start();
|
||||
});
|
||||
this.SoundNode=this.audioCtx.createBufferSource();
|
||||
this.harmonicGainNode=this.audioCtx.createGain();
|
||||
fetch('/sounds/Forest.aac')
|
||||
.then(response => response.arrayBuffer())
|
||||
.then(arrayBuffer => this.audioCtx.decodeAudioData(arrayBuffer))
|
||||
.then(audioBuffer => {
|
||||
// Set buffer on AudioBufferSourceNode
|
||||
this.SoundNode.buffer = audioBuffer;
|
||||
this.SoundNode.loop = true;
|
||||
// compressorNode.attack.value = .25;
|
||||
// this.SoundNode.connect(compressorNode);
|
||||
// this.harmonicGainNode.gain.value=this.harmonicGain;
|
||||
this.currentDestination = this.audioCtx.destination;
|
||||
this.SoundNode.connect(this.harmonicGainNode);
|
||||
this.harmonicGainNode.connect(this.currentDestination);
|
||||
// Play source node
|
||||
this.SoundNode.start();
|
||||
//1102500
|
||||
|
||||
});
|
||||
|
||||
// Attack time in seconds
|
||||
|
||||
//set up the different audio nodes we will use for the app
|
||||
this.Gain1000.gain.value=Math.pow(10, (-39 / 20));
|
||||
this.Gain = this.audioCtx.createGain();
|
||||
this.Gain.gain.setValueAtTime(1.0, this.audioCtx.currentTime);
|
||||
this.Gain.gain.setValueAtTime(Math.pow(10, (-39 / 20)), this.audioCtx.currentTime);
|
||||
// this.Gain.gain.setValueAtTime(0.5,0);
|
||||
|
||||
this.HPF = this.audioCtx.createBiquadFilter();
|
||||
|
|
@ -695,7 +884,7 @@ export default {
|
|||
|
||||
this.LPF = this.audioCtx.createBiquadFilter();
|
||||
this.LPF.type = "lowpass";
|
||||
this.LPF.frequency.value = 10000;
|
||||
this.LPF.frequency.value = 1000;
|
||||
|
||||
this.bandPass1=this.audioCtx.createBiquadFilter();
|
||||
this.bandPass1.type='bandpass'
|
||||
|
|
@ -835,7 +1024,7 @@ export default {
|
|||
|
||||
|
||||
|
||||
this.source = this.audioCtx.createMediaStreamSource(stream);
|
||||
|
||||
this.source.connect(this.Gain);
|
||||
this.Gain.connect(this.HPF);
|
||||
this.HPF.connect(this.LPF);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,224 @@
|
|||
<template>
|
||||
<div>
|
||||
<button @click="startAudio">Start</button>
|
||||
<button @click="stopAudio">Stop</button>
|
||||
<div>{{ level }}</div>
|
||||
Masking Gain : <input id="gain-control" v-model="maxGain1000" type="range" min="0" max="1" step="0.01">
|
||||
Harmonic Gain : <input id="gain-control" v-model="harmonicGain" type="range" min="0" max="1" step="0.01">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
audioContext: null,
|
||||
analyserNode: null,
|
||||
bufferSize: 4096,
|
||||
snapshotInterval: 125,
|
||||
snapshotDuration: 5512.5,
|
||||
level: 0,
|
||||
snapshots: [],
|
||||
intervalId: null,
|
||||
bandPass1:null,
|
||||
Gain1000:null,
|
||||
SoundNode:null,
|
||||
source100:null,
|
||||
maxGain1000:0.5,
|
||||
lastGainValue:0,
|
||||
maskingGain1000:0,
|
||||
harmonicGain:1,
|
||||
maskGainControl:0,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
|
||||
this.source100=this.audioContext.createBufferSource()
|
||||
this.maskGainControl=this.audioContext.createGain();
|
||||
fetch('/masking/MaskingNoise_1000.aac')
|
||||
.then(response => response.arrayBuffer())
|
||||
.then(arrayBuffer => this.audioContext.decodeAudioData(arrayBuffer))
|
||||
.then(audioBuffer => {
|
||||
// Set buffer on AudioBufferSourceNode
|
||||
this.source100.buffer = audioBuffer;
|
||||
this.source100.loop = true;
|
||||
// Connect nodes
|
||||
// this.source100.connect(compressorNode);
|
||||
this.source100.connect(this.maskGainControl);
|
||||
// this.Gain1000.connect(this.compressorNode);
|
||||
this.maskGainControl.connect(this.audioContext.destination);
|
||||
// this.Gain1000.gain.setValueAtTime(1,this.audioCtx.currentTime);
|
||||
// Play source node
|
||||
|
||||
});
|
||||
this.SoundNode=this.audioContext.createBufferSource();
|
||||
this.harmonicGainNode=this.audioContext.createGain();
|
||||
fetch('/sounds/Forest.aac')
|
||||
.then(response => response.arrayBuffer())
|
||||
.then(arrayBuffer => this.audioContext.decodeAudioData(arrayBuffer))
|
||||
.then(audioBuffer => {
|
||||
// Set buffer on AudioBufferSourceNode
|
||||
this.SoundNode.buffer = audioBuffer;
|
||||
this.SoundNode.loop = true;
|
||||
// compressorNode.attack.value = .25;
|
||||
// this.SoundNode.connect(compressorNode);
|
||||
// this.harmonicGainNode.gain.value=this.harmonicGain;
|
||||
this.currentDestination = this.audioContext.destination;
|
||||
this.SoundNode.connect(this.harmonicGainNode);
|
||||
this.harmonicGainNode.connect(this.currentDestination);
|
||||
// Play source node
|
||||
|
||||
//1102500
|
||||
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
startAudio() {
|
||||
// Create the AudioContext
|
||||
|
||||
|
||||
// Create the AnalyserNode
|
||||
this.analyserNode = this.audioContext.createAnalyser();
|
||||
this.analyserNode.fftSize = this.bufferSize;
|
||||
this.analyserNode.minDecibels = -100;
|
||||
this.analyserNode.maxDecibels = -1;
|
||||
this.analyserNode.smoothingTimeConstant = 0.95;
|
||||
this.bandPass1=this.audioContext.createBiquadFilter();
|
||||
this.bandPass1.type='bandpass'
|
||||
this.bandPass1.frequency.value=63;
|
||||
this.bandPass1.Q.value=1.41;
|
||||
|
||||
// Connect the microphone input to the AnalyserNode
|
||||
navigator.mediaDevices.getUserMedia({ audio: true })
|
||||
.then((stream) => {
|
||||
this.Gain1000=this.audioContext.createGain();
|
||||
this.Gain1000.gain.value = Math.pow(10, (-39 / 20));
|
||||
const source = this.audioContext.createMediaStreamSource(stream);
|
||||
source.connect(this.Gain1000);
|
||||
this.bandPass1.connect(this.bandPass1);
|
||||
source.connect(this.analyserNode)
|
||||
this.source100.start();
|
||||
this.SoundNode.start();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error accessing microphone:', error);
|
||||
});
|
||||
|
||||
// Start capturing snapshots at the specified interval
|
||||
this.intervalId = setInterval(() => {
|
||||
this.captureSnapshot();
|
||||
}, this.snapshotInterval);
|
||||
},
|
||||
stopAudio() {
|
||||
// Stop capturing snapshots and clear the interval
|
||||
clearInterval(this.intervalId);
|
||||
|
||||
// Disconnect the audio nodes
|
||||
this.analyserNode.disconnect();
|
||||
this.audioContext.close();
|
||||
|
||||
// Reset the data
|
||||
this.snapshots = [];
|
||||
this.level = 0;
|
||||
},
|
||||
captureSnapshot() {
|
||||
const bufferLength = this.analyserNode.frequencyBinCount;
|
||||
const frequencyData = new Uint8Array(bufferLength);
|
||||
this.analyserNode.getByteFrequencyData(frequencyData);
|
||||
|
||||
const snapshot = {
|
||||
data: Array.from(frequencyData),
|
||||
timestamp: this.audioContext.currentTime,
|
||||
};
|
||||
|
||||
this.snapshots.push(snapshot);
|
||||
|
||||
// Remove old snapshots that are older than the snapshot duration
|
||||
const oldestTimestamp = snapshot.timestamp - this.snapshotDuration / 1000;
|
||||
while (this.snapshots.length > 0 && this.snapshots[0].timestamp < oldestTimestamp) {
|
||||
this.snapshots.shift();
|
||||
this.calculateLevel();
|
||||
}
|
||||
this.harmonicGainNode.gain.setValueAtTime(this.harmonicGain,this.audioContext.currentTime);
|
||||
// Calculate the integrated level value for the bandpass filter
|
||||
|
||||
},
|
||||
calculateLevel() {
|
||||
// console.log(this.snapshots);
|
||||
const filteredSnapshots = this.snapshots.filter((snapshot) => {
|
||||
return (
|
||||
snapshot.data[63] >= 0 &&
|
||||
snapshot.data[63] <= 255
|
||||
);
|
||||
});
|
||||
// console.log(this.snapshots);
|
||||
|
||||
const levelValues = filteredSnapshots.map((snapshot) => {
|
||||
return snapshot.data[63];
|
||||
});
|
||||
|
||||
// Convert level values to RMS
|
||||
const squaredValues = levelValues.map((value) => {
|
||||
return value ** 2;
|
||||
});
|
||||
|
||||
console.log(levelValues);
|
||||
const sumOfSquares = squaredValues.reduce((acc, value) => acc + value, 0);
|
||||
const meanOfSquares = sumOfSquares / squaredValues.length;
|
||||
const rms = Math.sqrt(meanOfSquares);
|
||||
|
||||
const dbfsValues = levelValues.map((value) => {
|
||||
const rmsValue = value / 255; // Normalize to 0-1 range
|
||||
const dbfsValue = 20 * Math.log10(rmsValue);
|
||||
return dbfsValue;
|
||||
});
|
||||
console.log(dbfsValues);
|
||||
|
||||
// Sort the RMS values in ascending order
|
||||
const sortedData = dbfsValues.sort((a, b) => a - b);
|
||||
// console.log(sortedData);
|
||||
|
||||
// Calculate the 10th percentile value
|
||||
const percentile10 = this.calculatePercentile(sortedData, 10);
|
||||
|
||||
// Calculate the 90th percentile value
|
||||
const percentile90 = this.calculatePercentile(sortedData, 90);
|
||||
const dbfs = 20 * Math.log10(rms / 255);
|
||||
console.log(rms);
|
||||
this.level = rms;
|
||||
this.percentile10 = percentile10;
|
||||
this.percentile90 = percentile90;
|
||||
console.log('!0th',this.percentile10);
|
||||
console.log('90th',this.percentile90);
|
||||
console.log("Percentile:",this.percentile90-this.percentile10);
|
||||
const percentile=this.percentile90-this.percentile10;
|
||||
if (!isFinite(percentile)){
|
||||
console.log('ok Inf');
|
||||
return;
|
||||
}
|
||||
const rampTime = 2;
|
||||
const startTime = this.audioContext.currentTime;
|
||||
// Map the difference to the desired range of GainValues
|
||||
const minDifference = 0; // Minimum difference value
|
||||
const maxDifference = 10; // Maximum difference value
|
||||
const minGainValue = 0.1; // Minimum GainValue
|
||||
const maxGainValue = this.maxGain1000; // Maximum GainValue
|
||||
|
||||
// Map the difference to the GainValue range
|
||||
const mappedGainValue = ((percentile - minDifference) / (maxDifference - minDifference)) *
|
||||
(maxGainValue - minGainValue) + minGainValue;
|
||||
console.log('Maped Gain',mappedGainValue);
|
||||
|
||||
this.maskGainControl.gain.setTargetAtTime(mappedGainValue,this.audioContext.currentTime,6);
|
||||
|
||||
|
||||
},
|
||||
|
||||
|
||||
calculatePercentile(sortedData, percentile) {
|
||||
const index = Math.ceil((percentile / 100) * sortedData.length);
|
||||
return sortedData[index - 1];
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<template>
|
||||
<div>
|
||||
<button @click="startRecording">Start Recording</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
audioContext: null,
|
||||
audioStream: null,
|
||||
audioInput: null,
|
||||
bufferSize: 512,
|
||||
sampleRate: 44100,
|
||||
recording: false,
|
||||
samples: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
startRecording() {
|
||||
navigator.mediaDevices.getUserMedia({ audio: true })
|
||||
.then(stream => {
|
||||
this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
|
||||
this.audioStream = stream;
|
||||
this.audioInput = this.audioContext.createMediaStreamSource(stream);
|
||||
|
||||
const analyser = this.audioContext.createAnalyser();
|
||||
analyser.fftSize = this.bufferSize * 2;
|
||||
const bufferLength = analyser.frequencyBinCount;
|
||||
const dataArray = new Float32Array(bufferLength);
|
||||
|
||||
this.audioInput.connect(analyser);
|
||||
|
||||
const requiredSamples = Math.round(this.sampleRate * 0.125);
|
||||
let totalSamples = 0;
|
||||
|
||||
const captureInterval = setInterval(() => {
|
||||
analyser.getFloatTimeDomainData(dataArray);
|
||||
this.samples.push(...dataArray);
|
||||
totalSamples += bufferLength;
|
||||
|
||||
if (totalSamples >= requiredSamples) {
|
||||
if (this.samples.length >= this.sampleRate * 5) {
|
||||
// this.samples = this.samples.slice(0, this.sampleRate * 5);
|
||||
console.log(this.samples.length);
|
||||
clearInterval(captureInterval);
|
||||
this.stopRecording();
|
||||
}
|
||||
}
|
||||
}, 1000 / (this.sampleRate / this.bufferSize));
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error accessing microphone:', error);
|
||||
});
|
||||
},
|
||||
stopRecording() {
|
||||
this.recording = false;
|
||||
this.audioInput.disconnect();
|
||||
this.audioStream.getTracks()[0].stop();
|
||||
this.audioContext.close();
|
||||
console.log('Samples:', this.samples);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -20,7 +20,7 @@
|
|||
<div class="col-12 ">
|
||||
<div class="d-none d-md-block mx-auto pb-1" style="width: 225px" >
|
||||
<div class="progress " style="height: 10px">
|
||||
<div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 88%;background-color: #e9c046" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
<div class="progress-bar bar" role="progressbar" aria-label="Basic example" :style="{width:bar_width+'%'}" style="background-color: #e9c046;transition: 0.1s" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center mb-1">
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
</div>
|
||||
<div class="d-block d-md-none mx-auto pb-1" style="width: 225px" >
|
||||
<div class="progress " style="height: 10px">
|
||||
<div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 88%;background-color: #e9c046" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
<div class="progress-bar bar" role="progressbar" aria-label="Basic example" :style="{width:bar_width+'%'}" style="background-color: #e9c046;transition: 0.1s" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -146,9 +146,49 @@ export default {
|
|||
data(){
|
||||
return{
|
||||
title:'Forest soundscape',
|
||||
bar_width:0,
|
||||
analyser:null,
|
||||
dataArray:null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
navigator.mediaDevices.getUserMedia({audio: true})
|
||||
.then((stream)=> {
|
||||
var audioCtx = new AudioContext();
|
||||
var source = audioCtx.createMediaStreamSource(stream);
|
||||
this.analyser = audioCtx.createAnalyser();
|
||||
source.connect(this.analyser);
|
||||
this.analyser.fftSize = 2048;
|
||||
var bufferLength = this.analyser.frequencyBinCount;
|
||||
this.dataArray = new Uint8Array(bufferLength);
|
||||
|
||||
this.updateMeter();
|
||||
})
|
||||
.catch(function(err) {
|
||||
console.log('Error accessing microphone', err);
|
||||
});
|
||||
},
|
||||
methods:{
|
||||
updateMeter(){
|
||||
requestAnimationFrame(this.updateMeter);
|
||||
this.analyser.getByteFrequencyData(this.dataArray);
|
||||
var rms = this.getRMS(this.dataArray);
|
||||
var level = 20 * Math.log10(rms / 128);
|
||||
level = Math.max(0, Math.min(100, level + 100));
|
||||
// bar.style.width = level + '%';
|
||||
|
||||
this.bar_width=level;
|
||||
|
||||
},
|
||||
getRMS(dataArray) {
|
||||
var rms = 0;
|
||||
for (var i = 0; i < dataArray.length; i++) {
|
||||
rms += dataArray[i] * dataArray[i];
|
||||
}
|
||||
rms /= dataArray.length;
|
||||
rms = Math.sqrt(rms);
|
||||
return rms;
|
||||
},
|
||||
handleAnimation: function (anim) {
|
||||
this.anim = anim;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
<div class="col-12 ">
|
||||
<div class="d-none d-md-block mx-auto pb-1" style="width: 225px" >
|
||||
<div class="progress " style="height: 10px">
|
||||
<div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 88%;background-color: #e9c046" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
<div class="progress-bar bar" role="progressbar" aria-label="Basic example" :style="{width:bar_width+'%'}" style="background-color: #e9c046;transition: 0.1s" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center mb-1">
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
</div>
|
||||
<div class="d-block d-md-none mx-auto pb-1" style="width: 225px" >
|
||||
<div class="progress " style="height: 10px">
|
||||
<div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 88%;background-color: #e9c046" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
<div class="progress-bar bar" role="progressbar" aria-label="Basic example" :style="{width:bar_width+'%'}" style="background-color: #e9c046;transition: 0.1s" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -144,12 +144,52 @@ export default {
|
|||
},
|
||||
data(){
|
||||
return{
|
||||
title: 'Meadow soundscape'
|
||||
title: 'Meadow soundscape',
|
||||
bar_width:0,
|
||||
analyser:null,
|
||||
dataArray:null,
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
navigator.mediaDevices.getUserMedia({audio: true})
|
||||
.then((stream)=> {
|
||||
var audioCtx = new AudioContext();
|
||||
var source = audioCtx.createMediaStreamSource(stream);
|
||||
this.analyser = audioCtx.createAnalyser();
|
||||
source.connect(this.analyser);
|
||||
this.analyser.fftSize = 2048;
|
||||
var bufferLength = this.analyser.frequencyBinCount;
|
||||
this.dataArray = new Uint8Array(bufferLength);
|
||||
|
||||
this.updateMeter();
|
||||
})
|
||||
.catch(function(err) {
|
||||
console.log('Error accessing microphone', err);
|
||||
});
|
||||
},
|
||||
|
||||
methods:{
|
||||
updateMeter(){
|
||||
requestAnimationFrame(this.updateMeter);
|
||||
this.analyser.getByteFrequencyData(this.dataArray);
|
||||
var rms = this.getRMS(this.dataArray);
|
||||
var level = 20 * Math.log10(rms / 128);
|
||||
level = Math.max(0, Math.min(100, level + 100));
|
||||
// bar.style.width = level + '%';
|
||||
|
||||
this.bar_width=level;
|
||||
|
||||
},
|
||||
getRMS(dataArray) {
|
||||
var rms = 0;
|
||||
for (var i = 0; i < dataArray.length; i++) {
|
||||
rms += dataArray[i] * dataArray[i];
|
||||
}
|
||||
rms /= dataArray.length;
|
||||
rms = Math.sqrt(rms);
|
||||
return rms;
|
||||
},
|
||||
handleAnimation: function (anim) {
|
||||
this.anim = anim;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<div class="col-12 ">
|
||||
<div class="d-none d-md-block mx-auto pb-1" style="width: 225px" >
|
||||
<div class="progress " style="height: 10px">
|
||||
<div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 88%;background-color: #e9c046" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
<div class="progress-bar bar" role="progressbar" aria-label="Basic example" :style="{width:bar_width+'%'}" style="background-color: #e9c046;transition: 0.1s" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center mb-1">
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
</div>
|
||||
<div class="d-block d-md-none mx-auto pb-1" style="width: 225px" >
|
||||
<div class="progress " style="height: 10px">
|
||||
<div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 88%;background-color: #e9c046" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
<div class="progress-bar bar" role="progressbar" aria-label="Basic example" :style="{width:bar_width+'%'}" style="background-color: #e9c046;transition: 0.1s" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -142,13 +142,54 @@ export default {
|
|||
components: {HomeBar},
|
||||
data(){
|
||||
return{
|
||||
title:'Tropics soundscape'
|
||||
title:'Tropics soundscape',
|
||||
bar_width:0,
|
||||
analyser:null,
|
||||
dataArray:null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
navigator.mediaDevices.getUserMedia({audio: true})
|
||||
.then((stream)=> {
|
||||
var audioCtx = new AudioContext();
|
||||
var source = audioCtx.createMediaStreamSource(stream);
|
||||
this.analyser = audioCtx.createAnalyser();
|
||||
source.connect(this.analyser);
|
||||
this.analyser.fftSize = 2048;
|
||||
var bufferLength = this.analyser.frequencyBinCount;
|
||||
this.dataArray = new Uint8Array(bufferLength);
|
||||
|
||||
this.updateMeter();
|
||||
})
|
||||
.catch(function(err) {
|
||||
console.log('Error accessing microphone', err);
|
||||
});
|
||||
},
|
||||
methods:{
|
||||
handleAnimation: function (anim) {
|
||||
this.anim = anim;
|
||||
},
|
||||
|
||||
updateMeter(){
|
||||
requestAnimationFrame(this.updateMeter);
|
||||
this.analyser.getByteFrequencyData(this.dataArray);
|
||||
var rms = this.getRMS(this.dataArray);
|
||||
var level = 20 * Math.log10(rms / 128);
|
||||
level = Math.max(0, Math.min(100, level + 100));
|
||||
// bar.style.width = level + '%';
|
||||
|
||||
this.bar_width=level;
|
||||
|
||||
},
|
||||
getRMS(dataArray) {
|
||||
var rms = 0;
|
||||
for (var i = 0; i < dataArray.length; i++) {
|
||||
rms += dataArray[i] * dataArray[i];
|
||||
}
|
||||
rms /= dataArray.length;
|
||||
rms = Math.sqrt(rms);
|
||||
return rms;
|
||||
},
|
||||
playPause(play){
|
||||
console.log("Play Pause");
|
||||
if (play){
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
<audio ref="audio" src="/sounds/Lagoon.aac" loop></audio>
|
||||
<video-background
|
||||
preload="auto"
|
||||
poster="/images/poster.png"
|
||||
src="/video/bg-video.mp4"
|
||||
style=" height: 100vh;"
|
||||
>
|
||||
|
|
@ -17,13 +18,13 @@
|
|||
|
||||
<div class="container-fluid">
|
||||
<div class="row justify-content-center">
|
||||
<div class="adaptive pb-2">
|
||||
<div class="adaptive pb-3">
|
||||
|
||||
|
||||
<div class="col-12 ">
|
||||
<div class="d-none d-md-block mx-auto pb-1" style="width: 225px" >
|
||||
<div class="progress " style="height: 10px">
|
||||
<div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 88%;background-color: #e9c046" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
<div class="progress-bar bar" role="progressbar" aria-label="Basic example" :style="{width:bar_width+'%'}" style="background-color: #e9c046;transition: 0.1s" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center mb-1">
|
||||
|
|
@ -31,7 +32,7 @@
|
|||
</div>
|
||||
<div class="d-block d-md-none mx-auto pb-1" style="width: 225px" >
|
||||
<div class="progress " style="height: 10px">
|
||||
<div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 88%;background-color: #e9c046" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
<div class="progress-bar bar" role="progressbar" aria-label="Basic example" :style="{width:bar_width+'%'}" style="background-color: #e9c046;transition: 0.1s" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -70,17 +71,57 @@ export default {
|
|||
localePath,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
navigator.mediaDevices.getUserMedia({audio: true})
|
||||
.then((stream)=> {
|
||||
var audioCtx = new AudioContext();
|
||||
var source = audioCtx.createMediaStreamSource(stream);
|
||||
this.analyser = audioCtx.createAnalyser();
|
||||
source.connect(this.analyser);
|
||||
this.analyser.fftSize = 2048;
|
||||
var bufferLength = this.analyser.frequencyBinCount;
|
||||
this.dataArray = new Uint8Array(bufferLength);
|
||||
|
||||
this.updateMeter();
|
||||
})
|
||||
.catch(function(err) {
|
||||
console.log('Error accessing microphone', err);
|
||||
});
|
||||
},
|
||||
|
||||
components: {BootomBar, HomeBar},
|
||||
data(){
|
||||
return{
|
||||
title:'Lagoon soundscape',
|
||||
bar_width:0,
|
||||
analyser:null,
|
||||
dataArray:null,
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
handleAnimation: function (anim) {
|
||||
this.anim = anim;
|
||||
},
|
||||
updateMeter(){
|
||||
requestAnimationFrame(this.updateMeter);
|
||||
this.analyser.getByteFrequencyData(this.dataArray);
|
||||
var rms = this.getRMS(this.dataArray);
|
||||
var level = 20 * Math.log10(rms / 128);
|
||||
level = Math.max(0, Math.min(100, level + 100));
|
||||
// bar.style.width = level + '%';
|
||||
|
||||
this.bar_width=level;
|
||||
|
||||
},
|
||||
getRMS(dataArray) {
|
||||
var rms = 0;
|
||||
for (var i = 0; i < dataArray.length; i++) {
|
||||
rms += dataArray[i] * dataArray[i];
|
||||
}
|
||||
rms /= dataArray.length;
|
||||
rms = Math.sqrt(rms);
|
||||
return rms;
|
||||
},
|
||||
playPause(play){
|
||||
console.log("Play Pause");
|
||||
if (play){
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<video-background
|
||||
src="/video/bg-video.mp4"
|
||||
style=" height: 100vh;"
|
||||
poster="/images/poster.png"
|
||||
>
|
||||
<top-logo-bar></top-logo-bar>
|
||||
<div class="container-fluid pt-3 ps-4">
|
||||
|
|
|
|||
|
|
@ -3,26 +3,46 @@
|
|||
<video-background
|
||||
src="/video/bg-video.mp4"
|
||||
style=" height: 100vh;"
|
||||
poster="/images/poster.png"
|
||||
>
|
||||
|
||||
<div class="container-fluid pt-3">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-3 text-center text-sm-start">
|
||||
<nuxt-link class="navbar-brand" to="/">
|
||||
<img src="/svglogo.svg" height="35" class="img " alt="imae">
|
||||
</nuxt-link>
|
||||
</div>
|
||||
<div class="col-12 text-center justify-content-center col-lg-9 pt-1">
|
||||
<div class="progress mx-auto ms-lg-3 mt-2 " style="width: 70%;height: 12px">
|
||||
<div class="progress-bar bar" role="progressbar" :style="{ 'width': count + '%' }" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
|
||||
|
||||
<div class="col-12 text-center d-flex justify-content-center col-lg-12 pt-1">
|
||||
<div class="progress mx-auto mt-2 " style="width: 50%;height: 12px">
|
||||
<div class="progress-bar bar" style="transition: 0.1s !important;" :style="{width:bar_width+'%'}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 pt-3">
|
||||
<h6 class="text-muted text-center">{{t("We are analyzing your background noise...")}} </h6>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<NuxtPage page-key="child" />
|
||||
|
||||
|
||||
<div class="row pt-5 mt-0 mt-sm-4 " style="position: fixed;bottom: 0px;left: 0;right: 0">
|
||||
<div class="col-12 text-center pt-5 mt-3 pb-2 mb-2" >
|
||||
<NuxtLink class="btn btn-warning px-2" exact-active-class="px-4 mx-2" :to="localePath('/onboarding')"></NuxtLink>
|
||||
<NuxtLink class="btn btn-warning mx-2" exact-active-class="px-4 mx-2" :to="localePath('/onboarding/onboarding2')"></NuxtLink>
|
||||
<NuxtLink class="btn btn-warning px-2 " exact-active-class="px-4 mx-2" :to="localePath('/onboarding/onboarding3')"></NuxtLink>
|
||||
<NuxtLink class="btn btn-warning px-2 mx-2" exact-active-class="px-4 mx-2" :to="localePath('/onboarding/onboarding4')"></NuxtLink>
|
||||
<h6 class="text-muted text-center pt-3">You can customize your selection later</h6>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</video-background>
|
||||
</div>
|
||||
|
|
@ -33,14 +53,67 @@
|
|||
import {useCounterStore} from '@/stores/counter';
|
||||
import {mapState,mapActions} from "pinia";
|
||||
export default {
|
||||
computed:{...mapState(useCounterStore,['count'])},
|
||||
setup() {
|
||||
const {t} = useI18n()
|
||||
const localePath = useLocalePath()
|
||||
|
||||
return {
|
||||
t,
|
||||
localePath,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useCounterStore, ['count'])
|
||||
},
|
||||
methods:{
|
||||
...mapActions(useCounterStore,['increment']),
|
||||
...mapActions(useCounterStore,['decrement'])
|
||||
...mapActions(useCounterStore,['decrement']),
|
||||
updateMeter(){
|
||||
requestAnimationFrame(this.updateMeter);
|
||||
this.analyser.getByteFrequencyData(this.dataArray);
|
||||
var rms = this.getRMS(this.dataArray);
|
||||
var level = 20 * Math.log10(rms / 128);
|
||||
level = Math.max(0, Math.min(100, level + 100));
|
||||
// bar.style.width = level + '%';
|
||||
|
||||
this.bar_width=level;
|
||||
|
||||
},
|
||||
getRMS(dataArray) {
|
||||
var rms = 0;
|
||||
for (var i = 0; i < dataArray.length; i++) {
|
||||
rms += dataArray[i] * dataArray[i];
|
||||
}
|
||||
rms /= dataArray.length;
|
||||
rms = Math.sqrt(rms);
|
||||
return rms;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
navigator.mediaDevices.getUserMedia({audio: true})
|
||||
.then((stream)=> {
|
||||
var audioCtx = new AudioContext();
|
||||
var source = audioCtx.createMediaStreamSource(stream);
|
||||
this.analyser = audioCtx.createAnalyser();
|
||||
source.connect(this.analyser);
|
||||
this.analyser.fftSize = 2048;
|
||||
var bufferLength = this.analyser.frequencyBinCount;
|
||||
this.dataArray = new Uint8Array(bufferLength);
|
||||
|
||||
this.updateMeter();
|
||||
})
|
||||
.catch(function(err) {
|
||||
console.log('Error accessing microphone', err);
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
bar_val:25,
|
||||
bar_width:0,
|
||||
analyser:null,
|
||||
dataArray:null,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -55,4 +128,7 @@ export default {
|
|||
width: 150px ;
|
||||
height: 134px ;
|
||||
}
|
||||
.px-4{
|
||||
transition: 1s;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,9 +1,6 @@
|
|||
<template>
|
||||
<div class="pb-5 text-center ">
|
||||
<div class="row">
|
||||
<div class="col-12 pt-3">
|
||||
<h6 class="text-muted text-center">{{t("We are analyzing your background noise...")}} </h6>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<h4 class="text-center fw-bold pt-5">{{t("What headphones do you use?")}}</h4>
|
||||
<h6 class="text-center text-muted">{{t("Make sure that your headphones are properly connected. ")}}</h6>
|
||||
|
|
@ -33,17 +30,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row pt-0 pt-sm-5 mt-0 mt-sm-3 " style="position: fixed;bottom: 0px;left: 0;right: 0">
|
||||
<div class="col-12 text-center pt-5 mt-3 mb-2">
|
||||
<NuxtLink @click.once="increment(25)" class="btn btn-warning px-4 " to="/onboarding"></NuxtLink>
|
||||
<NuxtLink @click.once="increment(50)" class="btn btn-warning px-2 mx-2 " to="/onboarding/onboarding2"></NuxtLink>
|
||||
<NuxtLink @click.once="increment(75)" class="btn btn-warning px-2 " to="/onboarding/onboarding3"></NuxtLink>
|
||||
<NuxtLink class="btn btn-warning px-2 mx-2" @click.once="increment(100)" to="/onboarding/onboarding4"></NuxtLink>
|
||||
<h6 class="text-muted text-center pt-3">{{t("You can customize your selection later")}}</h6>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -81,7 +68,7 @@ export default {
|
|||
this.$axios.post('/api/update-setting',this.form).then(({data})=>{
|
||||
console.log(data);
|
||||
if(data.success){
|
||||
this.$toast.success(data.message);
|
||||
// this.$toast.success(data.message);
|
||||
this.$router.push(this.localePath('/onboarding/onboarding2'));
|
||||
}
|
||||
}).catch((e)=>{
|
||||
|
|
|
|||
|
|
@ -1,16 +1,14 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-12 pt-3">
|
||||
<h6 class="text-muted text-center">{{ t('We are analyzing your background noise...') }}</h6>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<h4 class="text-center fw-bold pt-5">{{ t('Do your headphones have ANC?') }}</h4>
|
||||
<h6 class="text-center text-muted">{{t('What’s that?')}}</h6>
|
||||
</div>
|
||||
<div class="col-12 text-center">
|
||||
<div class="d-flex justify-content-center ">
|
||||
<a @click.prevent="saveSetting('No')" href="/onboarding/onboarding3" @click.once="increment(75)" class="checkmark pt-2 px-1 d-block d-sm-inline-block d-inline-block">
|
||||
<a @click.prevent="saveSetting('No')" href="/onboarding/onboarding3" class="checkmark pt-2 px-1 d-block d-sm-inline-block d-inline-block">
|
||||
<input type="radio" class="btn-check" name="options-outlined" id="success-outlined1" autocomplete="off" >
|
||||
<label class="btn pt-4 checklabel" for="success-outlined1">
|
||||
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
|
|
@ -29,7 +27,7 @@
|
|||
</label>
|
||||
</a>
|
||||
|
||||
<a @click.prevent="saveSetting('Yes')" href="/onboarding/onboarding3" @click.once="increment(75)" class="checkmark pt-2 px-1 d-inline-block">
|
||||
<a @click.prevent="saveSetting('Yes')" href="/onboarding/onboarding3" class="checkmark pt-2 px-1 d-inline-block">
|
||||
<input type="radio" class="btn-check checkmark" name="options-outlined" id="danger-outlined1" autocomplete="off">
|
||||
<label class="btn checklabel ms-0 ms-sm-3 pt-4" for="danger-outlined1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 46" fill="none">
|
||||
|
|
@ -41,16 +39,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row pt-5 mt-0 mt-sm-4 " style="position: fixed;bottom: 0px;left: 0;right: 0">
|
||||
<div class="col-12 text-center pt-5 mt-3 pb-2 mb-2" >
|
||||
<NuxtLink class="btn btn-warning px-2 " @click.once="increment(25)" to="/onboarding"></NuxtLink>
|
||||
<NuxtLink class="btn btn-warning px-4 mx-2" @click.once="increment(50)" to="/onboarding/onboarding2"></NuxtLink>
|
||||
<NuxtLink class="btn btn-warning px-2 " @click.once="increment(75)" to="/onboarding/onboarding3"></NuxtLink>
|
||||
<NuxtLink class="btn btn-warning px-2 mx-2" @click.once="increment(100)" to="/onboarding/onboarding4"></NuxtLink>
|
||||
<h6 class="text-muted text-center pt-3">You can customize your selection later</h6>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -86,7 +75,7 @@ export default {
|
|||
this.$axios.post('/api/update-setting',this.form).then(({data})=>{
|
||||
console.log(data);
|
||||
if(data.success){
|
||||
this.$toast.success(data.message);
|
||||
//this.$toast.success(data.message);
|
||||
this.$router.push(this.localePath('/onboarding/onboarding3'));
|
||||
}
|
||||
}).catch((e)=>{
|
||||
|
|
|
|||
|
|
@ -1,15 +1,13 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-12 pt-3">
|
||||
<h6 class="text-muted text-center">{{t('We are analyzing your background noise...')}}</h6>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<h4 class="text-center fw-bold pt-5">{{t("What are your plans for today?")}}</h4>
|
||||
</div>
|
||||
<div class=" pt-5 text-center">
|
||||
<div class=" d-flex mx-auto justify-content-center">
|
||||
<a @click.prevent="saveSetting('Creativity')" href="/onboarding/onboarding4" @click.once="increment(100)" class="checkmark px-1 pt-2 d-block d-sm-inline-block d-inline-block">
|
||||
<a @click.prevent="saveSetting('Creativity')" href="/onboarding/onboarding4" class="checkmark px-1 pt-2 d-block d-sm-inline-block d-inline-block">
|
||||
<input type="radio" class="btn-check" name="options-outlined" id="success-outlined1" autocomplete="off" >
|
||||
<label class="btn checklabel " for="success-outlined1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="60" viewBox="0 0 51 56" fill="none">
|
||||
|
|
@ -19,7 +17,7 @@
|
|||
</label>
|
||||
</a>
|
||||
|
||||
<a @click.prevent="saveSetting('Concentration')" @click.once="increment(100)" class="checkmark pt-2 px-1 d-inline-block">
|
||||
<a @click.prevent="saveSetting('Concentration')" class="checkmark pt-2 px-1 d-inline-block">
|
||||
<input type="radio" class="btn-check checkmark" name="options-outlined" id="danger-outlined1" autocomplete="off">
|
||||
<label class="btn checklabel checklabel123 ms-0 ms-sm-3 " for="danger-outlined1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="60" viewBox="0 0 57 60" fill="none">
|
||||
|
|
@ -32,16 +30,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row pt-5 mt-0 mt-sm-4 " style="position: fixed;bottom: 0;left: 0;right: 0">
|
||||
<div class="col-12 text-center pt-5 mt-3 pb-2 mb-2" >
|
||||
<NuxtLink class="btn btn-warning px-2 " @click.once="increment(25)" to="/onboarding"></NuxtLink>
|
||||
<NuxtLink class="btn btn-warning px-2 mx-2" @click.once="increment(50)" to="/onboarding/onboarding2"></NuxtLink>
|
||||
<NuxtLink class="btn btn-warning px-4 " @click.once="increment(75)" to="/onboarding/onboarding3"></NuxtLink>
|
||||
<NuxtLink class="btn btn-warning px-2 mx-2" @click.once="increment(100)" to="/onboarding/onboarding4"></NuxtLink>
|
||||
<h6 class="text-muted text-center pt-3">{{t("You can customize your selection later")}}</h6>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -77,7 +65,7 @@ export default {
|
|||
this.$axios.post('/api/update-setting',this.form).then(({data})=>{
|
||||
console.log(data);
|
||||
if(data.success){
|
||||
this.$toast.success(data.message);
|
||||
// this.$toast.success(data.message);
|
||||
this.$router.push(this.localePath('/onboarding/onboarding4'));
|
||||
}
|
||||
}).catch((e)=>{
|
||||
|
|
|
|||
|
|
@ -1,9 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-12 pt-3">
|
||||
<h6 class="text-muted text-center">{{t("We are analyzing your background noise...")}}</h6>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<h4 class="text-center fw-bold pt-5">{{t("Please choose a soundscape")}}</h4>
|
||||
</div>
|
||||
|
|
@ -55,16 +52,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row pt-5 mt-2 " style="position: fixed;bottom: 0;left: 0;right: 0">
|
||||
<div class="col-12 text-center pt-5 mt-3 pb-2 mb-2" >
|
||||
<NuxtLink class="btn btn-warning px-2 " @click.once="increment(25)" to="/onboarding"></NuxtLink>
|
||||
<NuxtLink class="btn btn-warning px-2 mx-2 " @click.once="increment(50)" to="/onboarding/onboarding2"></NuxtLink>
|
||||
<NuxtLink class="btn btn-warning px-2 " @click.once="increment(75)" to="/onboarding/onboarding3"></NuxtLink>
|
||||
<NuxtLink class="btn btn-warning px-4 mx-2 " @click.once="increment(100)" to="/onboarding/onboarding4"></NuxtLink>
|
||||
<h6 class="text-muted text-center pt-3">{{t("You can customize your selection later")}}</h6>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -101,7 +89,7 @@ export default {
|
|||
this.$axios.post('/api/update-setting',this.form).then(({data})=>{
|
||||
console.log(data);
|
||||
if(data.success){
|
||||
this.$toast.success(data.message);
|
||||
// this.$toast.success(data.message);
|
||||
this.$router.push(this.localePath('letsgo'));
|
||||
}
|
||||
}).catch((e)=>{
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@
|
|||
</a>
|
||||
</li>
|
||||
<li class="px-1">
|
||||
<a :class="{'drop-active':form.anc_type==='no'||form.anc_type==='No'}" @click.prevent="saveSetting('no','anc')" class="dropdown-item text-muted fw-bold fs-6 py-2" to="/hometropics" style="border-bottom: 1px solid lightgray;"> {{t('NO')}}
|
||||
<a :class="{'drop-active':form.anc_type==='no'||form.anc_type==='No'}" @click.prevent="saveSetting('no','anc')" class="dropdown-item text-muted fw-bold fs-6 py-2" to="/hometropics" style="border-bottom: 1px solid lightgray;"> {{t('No')}}
|
||||
<span class="float-end">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" data-v-ae18e86e=""><g clip-path="url(#clip0_143_324)" data-v-ae18e86e=""><path d="M5.16262 2.38755C5.14543 2.39067 5.12825 2.39536 5.11262 2.40005C4.92668 2.44224 4.79543 2.60942 4.80012 2.80005V17.2C4.79856 17.3438 4.87356 17.4782 4.99856 17.5516C5.12356 17.6235 5.27668 17.6235 5.40168 17.5516C5.52668 17.4782 5.60168 17.3438 5.60012 17.2V2.80005C5.60481 2.68442 5.55793 2.57349 5.47512 2.49536C5.39075 2.41567 5.27668 2.37661 5.16262 2.38755ZM14.7626 2.38755C14.7454 2.39067 14.7282 2.39536 14.7126 2.40005C14.5267 2.44224 14.3954 2.60942 14.4001 2.80005V17.2C14.3986 17.3438 14.4736 17.4782 14.5986 17.5516C14.7236 17.6235 14.8767 17.6235 15.0017 17.5516C15.1267 17.4782 15.2017 17.3438 15.2001 17.2V2.80005C15.2048 2.68442 15.1579 2.57349 15.0751 2.49536C14.9907 2.41567 14.8767 2.37661 14.7626 2.38755ZM2.76262 5.98755C2.74543 5.99067 2.72825 5.99536 2.71262 6.00005C2.52668 6.04224 2.39543 6.20942 2.40012 6.40005V13.6C2.39856 13.7438 2.47356 13.8782 2.59856 13.9516C2.72356 14.0235 2.87668 14.0235 3.00168 13.9516C3.12668 13.8782 3.20168 13.7438 3.20012 13.6V6.40005C3.20481 6.28442 3.15793 6.17349 3.07512 6.09536C2.99075 6.01567 2.87668 5.97661 2.76262 5.98755ZM17.1626 5.98755C17.1454 5.99067 17.1282 5.99536 17.1126 6.00005C16.9267 6.04224 16.7954 6.20942 16.8001 6.40005V13.6C16.7986 13.7438 16.8736 13.8782 16.9986 13.9516C17.1236 14.0235 17.2767 14.0235 17.4017 13.9516C17.5267 13.8782 17.6017 13.7438 17.6001 13.6V6.40005C17.6048 6.28442 17.5579 6.17349 17.4751 6.09536C17.3907 6.01567 17.2767 5.97661 17.1626 5.98755ZM7.56262 6.38755C7.54543 6.39067 7.52825 6.39536 7.51262 6.40005C7.32668 6.44224 7.19543 6.60942 7.20012 6.80005V10V13.2C7.19856 13.3438 7.27356 13.4782 7.39856 13.5516C7.52356 13.6235 7.67668 13.6235 7.80168 13.5516C7.92668 13.4782 8.00168 13.3438 8.00012 13.2V6.80005C8.00481 6.68442 7.95793 6.57349 7.87512 6.49536C7.79075 6.41567 7.67668 6.37661 7.56262 6.38755ZM12.3626 6.38755C12.3454 6.39067 12.3282 6.39536 12.3126 6.40005C12.1267 6.44224 11.9954 6.60942 12.0001 6.80005V13.2C11.9986 13.3438 12.0736 13.4782 12.1986 13.5516C12.3236 13.6235 12.4767 13.6235 12.6017 13.5516C12.7267 13.4782 12.8017 13.3438 12.8001 13.2V6.80005C12.8048 6.68442 12.7579 6.57349 12.6751 6.49536C12.5907 6.41567 12.4767 6.37661 12.3626 6.38755ZM0.362622 8.38755C0.345434 8.39067 0.328247 8.39536 0.312622 8.40005C0.126684 8.44224 -0.00456587 8.60942 0.000121649 8.80005V11.2C-0.00144085 11.3438 0.0735592 11.4782 0.198559 11.5516C0.323559 11.6235 0.476684 11.6235 0.601684 11.5516C0.726684 11.4782 0.801684 11.3438 0.800122 11.2V8.80005C0.804809 8.68442 0.757934 8.57349 0.675122 8.49536C0.590747 8.41567 0.476684 8.37661 0.362622 8.38755ZM9.96262 8.38755C9.94543 8.39067 9.92825 8.39536 9.91262 8.40005C9.72668 8.44224 9.59543 8.60942 9.60012 8.80005V11.2C9.59856 11.3438 9.67356 11.4782 9.79856 11.5516C9.92356 11.6235 10.0767 11.6235 10.2017 11.5516C10.3267 11.4782 10.4017 11.3438 10.4001 11.2V8.80005C10.4048 8.68442 10.3579 8.57349 10.2751 8.49536C10.1907 8.41567 10.0767 8.37661 9.96262 8.38755ZM19.5626 8.38755C19.5454 8.39067 19.5282 8.39536 19.5126 8.40005C19.3267 8.44224 19.1954 8.60942 19.2001 8.80005V11.2C19.1986 11.3438 19.2736 11.4782 19.3986 11.5516C19.5236 11.6235 19.6767 11.6235 19.8017 11.5516C19.9267 11.4782 20.0017 11.3438 20.0001 11.2V8.80005C20.0048 8.68442 19.9579 8.57349 19.8751 8.49536C19.7907 8.41567 19.6767 8.37661 19.5626 8.38755Z" fill="#030504" fill-opacity="0.8" data-v-ae18e86e=""></path><rect x="1.82617" y="0.907189" width="24.343" height="1.3" rx="0.65" transform="rotate(45 1.82617 0.907189)" fill="#333534" stroke="white" stroke-width="0.5" data-v-ae18e86e=""></rect></g><defs data-v-ae18e86e=""><clipPath id="clip0_143_324" data-v-ae18e86e=""><rect width="20" height="20" fill="white" data-v-ae18e86e=""></rect></clipPath></defs></svg>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<div class="col-12 pt-3 col-sm-4">
|
||||
<div class="card" @click="oneMonth=true;twoMonth=false;threeMonth=false" :class="{'active-sub':oneMonth,'sub-card':!oneMonth}" >
|
||||
<div class="card-body py-4">
|
||||
<h5 class="text-center fw-bolder" style="font-weight: 600;font-size: 32px">$2.99</h5>
|
||||
<h5 class="text-center fw-bolder" style="font-weight: 600;font-size: 32px">€2.99</h5>
|
||||
<p class="text-center">{{t("1 month")}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
<div class="col-12 pt-3 col-sm-4">
|
||||
<div class="card" @click="twoMonth=true;oneMonth=false;threeMonth=false" :class="{'active-sub':twoMonth,'sub-card':!twoMonth}">
|
||||
<div class="card-body py-4">
|
||||
<h5 class="text-center fw-bolder " style="font-weight: 600;font-size: 32px">$9.99</h5>
|
||||
<h5 class="text-center fw-bolder " style="font-weight: 600;font-size: 32px">€9.99</h5>
|
||||
<p class=" text-center">{{t("6 month")}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
<div class="col-12 pt-3 col-sm-4">
|
||||
<div class="card" @click="threeMonth=true;twoMonth=false;oneMonth=false" :class="{'active-sub':threeMonth,'sub-card':!threeMonth}">
|
||||
<div class="card-body py-4">
|
||||
<h5 class="text-center fw-bolder " style="font-weight: 600;font-size: 32px">$14.99</h5>
|
||||
<h5 class="text-center fw-bolder " style="font-weight: 600;font-size: 32px">€14.99</h5>
|
||||
<p class=" text-center">{{t("1 year")}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,5 +4,8 @@
|
|||
import Toaster from "@meforma/vue-toaster";
|
||||
|
||||
export default defineNuxtPlugin((nuxtApp) => {
|
||||
nuxtApp.vueApp.use(Toaster);
|
||||
nuxtApp.vueApp.use(Toaster,{ position: "bottom-left",duration: 2000,
|
||||
queue: true,max: 1,
|
||||
pauseOnHover: false
|
||||
});
|
||||
});
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 6.0 MiB |
Binary file not shown.
11
yarn.lock
11
yarn.lock
|
|
@ -2471,9 +2471,9 @@
|
|||
"resolved" "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz"
|
||||
"version" "0.9.3"
|
||||
|
||||
"esbuild-windows-64@0.15.18":
|
||||
"integrity" "sha512-qinug1iTTaIIrCorAUjR0fcBk24fjzEedFYhhispP8Oc7SFvs+XeW3YpAKiKp8dRpizl4YYAhxMjlftAMJiaUw=="
|
||||
"resolved" "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.15.18.tgz"
|
||||
"esbuild-darwin-64@0.15.18":
|
||||
"integrity" "sha512-2WAvs95uPnVJPuYKP0Eqx+Dl/jaYseZEUUT1sjg97TJa4oBtbAKnPnl3b5M9l51/nbx7+QAEtuummJZW0sBEmg=="
|
||||
"resolved" "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.15.18.tgz"
|
||||
"version" "0.15.18"
|
||||
|
||||
"esbuild@^0.15.14", "esbuild@^0.15.9":
|
||||
|
|
@ -2779,6 +2779,11 @@
|
|||
"resolved" "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
|
||||
"version" "1.0.0"
|
||||
|
||||
"fsevents@~2.3.2":
|
||||
"integrity" "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA=="
|
||||
"resolved" "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
|
||||
"version" "2.3.2"
|
||||
|
||||
"function-bind@^1.1.1":
|
||||
"integrity" "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
|
||||
"resolved" "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
|
||||
|
|
|
|||
Loading…
Reference in New Issue