Compare commits
11 Commits
675cb0ba4b
...
166ec17fcf
| Author | SHA1 | Date |
|---|---|---|
 Khaled Aldayeh
|
166ec17fcf | |
waqarulzafar
|
460ebe532c | |
|
waqarulzafar
|
c784f3f4ce | |
unknown
|
0af18395fd | |
|
unknown
|
af58af3673 | |
|
Waqar Ul Zafar
|
c25b3b0293 | |
|
Waqar Ul Zafar
|
4925cc0591 | |
|
unknown
|
ec5a3050fa | |
|
Waqar Ul Zafar
|
672f0fb3bf | |
|
unknown
|
114d6af187 | |
|
Waqar Ul Zafar
|
e7612deead |
|
|
@ -5,7 +5,7 @@
|
|||
<paths name="craveteck">
|
||||
<serverdata>
|
||||
<mappings>
|
||||
<mapping deploy="/var/www/mindbost.craveteck.com" local="$PROJECT_DIR$" web="/" />
|
||||
<mapping deploy="/var/www/mindboost.craveteck.pk" local="$PROJECT_DIR$" web="/" />
|
||||
</mappings>
|
||||
</serverdata>
|
||||
</paths>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<project version="4">
|
||||
<component name="SshConfigs">
|
||||
<configs>
|
||||
<sshConfig host="46.101.77.136" id="21fb0bf5-1d7f-4512-bd29-b1d0309d6ffe" keyPath="$USER_HOME$/Documents/server keys/main Server/mykey.ppk" port="22" nameFormat="DESCRIPTIVE" username="root" useOpenSSHConfig="true" />
|
||||
<sshConfig host="138.197.70.61" id="21fb0bf5-1d7f-4512-bd29-b1d0309d6ffe" keyPath="$USER_HOME$/Documents/digitalocean" port="22" nameFormat="DESCRIPTIVE" username="root" useOpenSSHConfig="true" />
|
||||
</configs>
|
||||
</component>
|
||||
</project>
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
<component name="WebServers">
|
||||
<option name="servers">
|
||||
<webServer id="20d7843e-0e96-481a-8bed-9d6b23084f02" name="craveteck">
|
||||
<fileTransfer accessType="SFTP" host="46.101.77.136" port="22" sshConfigId="21fb0bf5-1d7f-4512-bd29-b1d0309d6ffe" sshConfig="root@46.101.77.136:22 key" keyPair="true">
|
||||
<fileTransfer accessType="SFTP" host="138.197.70.61" port="22" sshConfigId="21fb0bf5-1d7f-4512-bd29-b1d0309d6ffe" sshConfig="root@138.197.70.61:22 key" keyPair="true">
|
||||
<advancedOptions>
|
||||
<advancedOptions dataProtectionLevel="Private" keepAliveTimeout="0" passiveMode="true" shareSSLContext="true" />
|
||||
</advancedOptions>
|
||||
|
|
|
|||
|
|
@ -141,6 +141,7 @@ body{
|
|||
.checklabel123{
|
||||
padding-top: 25px !important;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 575px){
|
||||
.checklabel{
|
||||
height: 123px;
|
||||
|
|
@ -151,11 +152,7 @@ body{
|
|||
padding-top: 16px !important;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 992px) and (min-width: 575px) {
|
||||
.box12{
|
||||
padding: 11px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.form-switch .form-check-input {
|
||||
padding: 10px 16px;
|
||||
background-color: black;
|
||||
|
|
@ -164,4 +161,17 @@ body{
|
|||
.accordion-button:not(.collapsed)::after {
|
||||
background-image: var(--bs-accordion-btn-icon);
|
||||
fill: red;
|
||||
|
||||
}
|
||||
.bar{
|
||||
background-color: #e9c046 !important;
|
||||
}
|
||||
.progress-bar {
|
||||
background-color: #e9c046 !important;
|
||||
}
|
||||
.checklabel{
|
||||
background: white !important;
|
||||
}
|
||||
.checklabel:hover{
|
||||
background: #e9c046 !important;;
|
||||
}
|
||||
|
Before Width: | Height: | Size: 562 B After Width: | Height: | Size: 562 B |
|
Before Width: | Height: | Size: 864 B After Width: | Height: | Size: 864 B |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 342 B After Width: | Height: | Size: 342 B |
|
Before Width: | Height: | Size: 475 B After Width: | Height: | Size: 475 B |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.2 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 457 B After Width: | Height: | Size: 457 B |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 768 B After Width: | Height: | Size: 768 B |
|
Before Width: | Height: | Size: 333 B After Width: | Height: | Size: 333 B |
|
Before Width: | Height: | Size: 333 B After Width: | Height: | Size: 333 B |
|
Before Width: | Height: | Size: 503 B After Width: | Height: | Size: 503 B |
|
Before Width: | Height: | Size: 496 B After Width: | Height: | Size: 496 B |
|
Before Width: | Height: | Size: 530 B After Width: | Height: | Size: 530 B |
|
Before Width: | Height: | Size: 723 B After Width: | Height: | Size: 723 B |
|
Before Width: | Height: | Size: 518 B After Width: | Height: | Size: 518 B |
|
Before Width: | Height: | Size: 370 B After Width: | Height: | Size: 370 B |
|
Before Width: | Height: | Size: 668 B After Width: | Height: | Size: 668 B |
|
Before Width: | Height: | Size: 569 B After Width: | Height: | Size: 569 B |
|
Before Width: | Height: | Size: 342 B After Width: | Height: | Size: 342 B |
|
Before Width: | Height: | Size: 697 B After Width: | Height: | Size: 697 B |
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 52 KiB |
|
Before Width: | Height: | Size: 53 KiB After Width: | Height: | Size: 53 KiB |
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
|
Before Width: | Height: | Size: 53 KiB After Width: | Height: | Size: 53 KiB |
|
|
@ -0,0 +1,153 @@
|
|||
class OctaveBandProcessor extends AudioWorkletProcessor {
|
||||
constructor() {
|
||||
super();
|
||||
// Define center frequencies for 9 octave bands
|
||||
this.centerFrequencies = [63, 125, 250, 500, 1000, 2000, 4000, 8000, 16000];
|
||||
this.filters = [];
|
||||
this.lastUpdateTimestamp = 0;
|
||||
this.updateInterval = 0.125; // Update every 0.125 seconds
|
||||
|
||||
// Create an A-weighting filter for specific frequencies
|
||||
this.createAWeightingFilter();
|
||||
|
||||
// Create bandpass filters for each center frequency
|
||||
this.centerFrequencies.forEach(frequency => {
|
||||
const filter = new BiquadFilterNode(audioContext, {
|
||||
type: 'bandpass',
|
||||
frequency: frequency,
|
||||
Q: 1.41, // Set the desired Q value
|
||||
});
|
||||
this.filters.push(filter);
|
||||
});
|
||||
|
||||
// Set up analyzers for calculating percentiles
|
||||
this.setupAnalyzers();
|
||||
}
|
||||
|
||||
createAWeightingFilter() {
|
||||
// Use the provided A-weighting filter coefficients
|
||||
const aWeightingCoefficients = [0, -0.051, -0.142, -0.245, -0.383, -0.65, -1.293, -2.594, -6.554]; //David
|
||||
|
||||
// Create a custom IIR filter node with the A-weighting coefficients
|
||||
this.aWeightingFilter = new IIRFilterNode(audioContext, {
|
||||
feedforward: aWeightingCoefficients,
|
||||
feedback: [1],
|
||||
});
|
||||
}
|
||||
|
||||
setupAnalyzers() {
|
||||
this.analyzers = [];
|
||||
this.centerFrequencies.forEach(frequency => {
|
||||
this.analyzers.push([]);
|
||||
for (let i = 0; i < 5; i++) { // Unique identifiers from 0 to 4
|
||||
const analyzer = audioContext.createAnalyser();
|
||||
analyzer.fftSize = 2048;
|
||||
|
||||
// Check if the identifier is 0 (microphone audio) before connecting to the A-weighting filter
|
||||
if (i === 0) {
|
||||
this.aWeightingFilter.connect(analyzer);
|
||||
}
|
||||
|
||||
this.analyzers[this.analyzers.length - 1].push(analyzer);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
process(inputs, outputs) {
|
||||
const numOutputChannels = outputs.length;
|
||||
for (let i = 0; i < numOutputChannels; i++) {
|
||||
const outputChannel = outputs[i][0];
|
||||
const inputChannel = inputs[i][0];
|
||||
|
||||
// Apply the filter to the input channel
|
||||
const filteredSignal = this.filters[i].process(inputChannel);
|
||||
|
||||
// Apply A-weighting only to the microphone signal (channel 0)
|
||||
if (i === 0) {
|
||||
const aWeightedSignal = this.aWeightingFilter.process(filteredSignal);
|
||||
outputChannel.set(aWeightedSignal);
|
||||
} else {
|
||||
// For other channels, pass the signal without A-weighting
|
||||
outputChannel.set(filteredSignal);
|
||||
}
|
||||
|
||||
// Check if it's time to update percentiles
|
||||
const currentTime = this.currentTime;
|
||||
if (currentTime - this.lastUpdateTimestamp >= this.updateInterval) {
|
||||
this.updatePercentiles(i);
|
||||
this.lastUpdateTimestamp = currentTime;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
calculateRMSLevel(signal, channelIndex) {
|
||||
const data = new Float32Array(signal.length);
|
||||
signal.copyFromChannel(data, 0);
|
||||
const sum = data.reduce((acc, val) => acc + val * val, 0);
|
||||
const rmsLevel = Math.sqrt(sum / data.length);
|
||||
const dBLevel = 20 * Math.log10(rmsLevel); // Convert to dB
|
||||
return dBLevel;
|
||||
}
|
||||
|
||||
updatePercentiles(channelIndex) {
|
||||
for (let i = 0; i < this.centerFrequencies.length; i++) {
|
||||
const analyzer = this.analyzers[i][channelIndex];
|
||||
const levelData = new Float32Array(analyzer.frequencyBinCount);
|
||||
analyzer.getFloatFrequencyData(levelData);
|
||||
|
||||
// Calculate percentiles for each octave band and each channel
|
||||
const percentile10 = this.calculatePercentile(levelData, 10);
|
||||
const percentile90 = this.calculatePercentile(levelData, 90);
|
||||
|
||||
const percentileDiff = percentile10 - percentile90;
|
||||
|
||||
// Store the percentile difference for each channel and each octave band
|
||||
// You can use suitable data structures to store these values for future comparisons
|
||||
}
|
||||
}
|
||||
|
||||
calculatePercentile(data, percentile) {
|
||||
const sortedData = data.slice().sort((a, b) => a - b);
|
||||
const index = Math.floor((percentile / 100) * sortedData.length);
|
||||
return sortedData[index];
|
||||
}
|
||||
|
||||
combineAndCalculate() {
|
||||
let LAF10_90_total = 0; // Initialize the total LAF10%-90%
|
||||
|
||||
for (let i = 0; i < this.centerFrequencies.length; i++) {
|
||||
const micAnalyzer = this.analyzers[i][0]; // Analyzer for microphone audio (identifier 0)
|
||||
const audioFile1Analyzer = this.analyzers[i][3]; // Analyzer for audioFile1 (identifier 3)
|
||||
const audioFile2Analyzer = this.analyzers[i][4]; // Analyzer for audioFile2 (identifier 4)
|
||||
|
||||
// Calculate percentiles for the microphone audio
|
||||
const micPercentile10 = this.calculatePercentile(micAnalyzer, 10);
|
||||
const micPercentile90 = this.calculatePercentile(micAnalyzer, 90);
|
||||
|
||||
// Calculate percentiles for audioFile1
|
||||
const audioFile1Percentile10 = this.calculatePercentile(audioFile1Analyzer, 10);
|
||||
const audioFile1Percentile90 = this.calculatePercentile(audioFile1Analyzer, 90);
|
||||
|
||||
// Calculate percentiles for audioFile2
|
||||
const audioFile2Percentile10 = this.calculatePercentile(audioFile2Analyzer, 10);
|
||||
const audioFile2Percentile90 = this calculatePercentile(audioFile2Analyzer, 90);
|
||||
|
||||
// Calculate LAF10%-90% for microphone audio, audioFile1, and audioFile2 separately
|
||||
const micLAF10_90 = micPercentile10 - micPercentile90;
|
||||
const audioFile1LAF10_90 = audioFile1Percentile10 - audioFile1Percentile90;
|
||||
const audioFile2LAF10_90 = audioFile2Percentile10 - audioFile2Percentile90;
|
||||
|
||||
// Calculate combined LAF10%-90% for microphone audio, audioFile1, and audioFile2
|
||||
const combinedLAF10_90 = micLAF10_90 + audioFile1LAF10_90 + audioFile2LAF10_90;
|
||||
|
||||
// Add the combined LAF10%-90% to the total
|
||||
LAF10_90_total += combinedLAF10_90;
|
||||
}
|
||||
|
||||
return LAF10_90_total;
|
||||
}
|
||||
}
|
||||
|
||||
registerProcessor('octave', OctaveBandProcessor);
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
-----BEGIN PRIVATE KEY-----
|
||||
MIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQCxQKVsWo37+7Ut
|
||||
gaYs8JN0Gxx8QrxA4+NqOZnwgu5dJnwEuWWJGiT/oTuBSiI+x4HeoFWlTFoFrc5v
|
||||
XL7K1AUdS0AL2XhXha2Bsd6E5xyJKf8wkBFGB9ENBiNI7PvoOATsA71SxZHf4uNx
|
||||
DF7Gg6cYC8MquhWWCn+bLPJzVnEe7fHss6tBcLufrAOXPFbCeUp/VVVPkF0bBwh+
|
||||
jREdvhvArj03FVBlgsUK3EXH5RwJ2pZaKg6ZNdyb5fHURCOIYjv5UJxdsdKyvKbt
|
||||
rY12i/ebB5P7pquIIykmo4FsP2aLvfUf2WDcEVaBum7DD3kUqjBE/54i/A3hVhVD
|
||||
kfZJpOCrAgMBAAECggEABaNekfr7tDbfZ43NslCuulZhk4ICf62gDCyZmHNHdC3L
|
||||
2RpWCR/n2GDtDyGxMVB0303KLeunCR/sRpr9tBXPtUPD3WpXZtVNpsyK1Bqz3isT
|
||||
45wQaJjJxOYSlR0wrdaGVY4i5XpW7nciMIaXtOQbmn1HAev+rH982XvWdHhTpvlf
|
||||
JtSzqBB20GJLUKhmDx/wyAJ8m2RXBHCnztRqDqqfJMfavbxIahwhXAmTANcMOErl
|
||||
ugElPPei5oiH6Ecv+SwljptG1C7q++pYAsjkAuD2t8rTRNQWRhBYT3oumGBmEjh5
|
||||
3jneSBdPGIdv1bnjsmuPl8sdPzwXc6y/EQ9Iiqk68QKBgQDuFGSolBzLMZNITLs/
|
||||
rf3HWNs8AxGol7XLg8dRpPGuflGgB6pGOsYsfMQv2YXT3FndAeMCMR0VB3kuYo77
|
||||
Q20gj4c2MDdbjPUGZi76wlLwYw36H46TsBiuoOZfk46FbZlaaFYydLHZPrWbnDzn
|
||||
KgFXjYnojIFn86AO+u3Z2Mad0QKBgQC+mCmDZzORu5AowhIGAe42gEq1e9nIh9BB
|
||||
iupo4I/+/EtSi4+m0KoDOUoR99bbs3md25rC6+6oLI9FAc4bp8pKd9443kr7SUy6
|
||||
YYr70QFr9ubZOYMabjkUhXw/kzhqjfU6B1ce1JPS/3/mEdAxjHAppN+jqxp8+efT
|
||||
lwryLV9JuwKBgD21pX2YnnoAiJd15BcWZzAzlOfSN9KGOEXfC1vbMBW1gjzDn9wC
|
||||
QfmoAUYR0MFgXR6O7aNUzZ/0xvFB9KOmD3QgH8Do8IBXYe9drxGqKstKMYZChbc8
|
||||
Lrmc1PmzCn8FMHmhj64WVz7jJTmHXrXgSmbCNhvDx4sFN9iKK/qKWLjxAoGBAJGr
|
||||
5v7B4A5glvwv6GqjCxio0XEIahn0g920eRkTmbs/xaofdPoAvhCcttoo3RUqhad7
|
||||
czvL66qp9A7AJHHKurhUCYrZi+Gn0ncZmoqA4l9MZIBejq+i0wm2RJKqyRHX0jg5
|
||||
6AJuY1V/ZpfHwaI9PnT1yOBlJGek8eUsqncS6qOFAoGBAIqGzvI43w51hdT/tvS9
|
||||
kUhoef++BuT7Rod6rK40l4ti3YfyABN5jFtPG/Bsz7nn7gb3YT/Q2RKzuEQFpLIK
|
||||
JzMu6ElRSLyMTNbtSntq9Qw/hmpcSmzj0iao3kp5Arr9mkhua6ZbUUM0xDYMt4eN
|
||||
EWsxmbuQkcHzvSBHV9w3NBak
|
||||
-----END PRIVATE KEY-----
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
-----BEGIN CERTIFICATE-----
|
||||
MIID3zCCAscCFFB62ppfH5aXwlofGjPHdDOoRDZmMA0GCSqGSIb3DQEBCwUAMIGr
|
||||
MQswCQYDVQQGEwJERTEbMBkGA1UECAwSQmFkZW4tV3VlcnR0ZW1iZXJnMRIwEAYD
|
||||
VQQHDAlTdHV0dGdhcnQxEjAQBgNVBAoMCU1pbmRib29zdDEWMBQGA1UECwwNSVQg
|
||||
RGVwYXJ0bWVudDEUMBIGA1UEAwwLUm9iZXJ0IFJhcHAxKTAnBgkqhkiG9w0BCQEW
|
||||
GnJvYmVydC5yYXBwQG1pbmRib29zdC50ZWFtMB4XDTIzMTEwMzE1MzkzM1oXDTI0
|
||||
MTEwMjE1MzkzM1owgasxCzAJBgNVBAYTAkRFMRswGQYDVQQIDBJCYWRlbi1XdWVy
|
||||
dHRlbWJlcmcxEjAQBgNVBAcMCVN0dXR0Z2FydDESMBAGA1UECgwJTWluZGJvb3N0
|
||||
MRYwFAYDVQQLDA1JVCBEZXBhcnRtZW50MRQwEgYDVQQDDAtSb2JlcnQgUmFwcDEp
|
||||
MCcGCSqGSIb3DQEJARYacm9iZXJ0LnJhcHBAbWluZGJvb3N0LnRlYW0wggEiMA0G
|
||||
CSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQCxQKVsWo37+7UtgaYs8JN0Gxx8QrxA
|
||||
4+NqOZnwgu5dJnwEuWWJGiT/oTuBSiI+x4HeoFWlTFoFrc5vXL7K1AUdS0AL2XhX
|
||||
ha2Bsd6E5xyJKf8wkBFGB9ENBiNI7PvoOATsA71SxZHf4uNxDF7Gg6cYC8MquhWW
|
||||
Cn+bLPJzVnEe7fHss6tBcLufrAOXPFbCeUp/VVVPkF0bBwh+jREdvhvArj03FVBl
|
||||
gsUK3EXH5RwJ2pZaKg6ZNdyb5fHURCOIYjv5UJxdsdKyvKbtrY12i/ebB5P7pquI
|
||||
Iykmo4FsP2aLvfUf2WDcEVaBum7DD3kUqjBE/54i/A3hVhVDkfZJpOCrAgMBAAEw
|
||||
DQYJKoZIhvcNAQELBQADggEBAJ17zv0dhYSAFD1RBMBh6bVvsyzPFLe7P79dmo/I
|
||||
DbZRi91rIfZMZa6vbnwcYh6tyi9bGtm/tWaCglnJ6ENjSgAupZUGWQ4TTGS4C0sj
|
||||
rRjygWtLYchQVOKGeTbMqG/75GDciwKXhmNNflGWkBSbqdBPubBm+9lr3C2HArYB
|
||||
+FvdIfWxLcpgZANZ4h4lThin40kUJ/3cD8d7RCqk+KhWZ09tMyMojBlNaRv0ejvS
|
||||
I7Yb/Rvnf5gWK3UCmHlcSrX0zO0ulSL2Cgi9EswLnHNiFRYhDoCfSRfY1NlBUhF6
|
||||
xpCSStKIS3CzZpDR4F1U32VqOQx3bfl5gb/cnMAu0FEQtgM=
|
||||
-----END CERTIFICATE-----
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -8,82 +8,6 @@
|
|||
|
||||
</div>
|
||||
|
||||
<div class="modal fade " id="adaptive-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<div class=" 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" data-bs-dismiss="modal"></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>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -113,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",
|
||||
|
|
@ -168,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,
|
||||
|
|
@ -190,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>
|
||||
|
|
@ -1,13 +1,19 @@
|
|||
import {useUserStore} from '@/stores/user';
|
||||
// @ts-ignore
|
||||
export default defineNuxtRouteMiddleware(async ({store, redirect}) => {
|
||||
export default defineNuxtRouteMiddleware( (from,to) => {
|
||||
const app = useNuxtApp();
|
||||
const user = await useUserStore(app.$pinia);
|
||||
const localePath = useLocalePath()
|
||||
// @ts-ignore
|
||||
const user = useUserStore(app.$pinia)
|
||||
console.log(user.is_login);
|
||||
const localePath = useLocalePath()
|
||||
// console.log(user.is_login);
|
||||
// console.log(from)
|
||||
// isAuthenticated() is an example method verifying if a user is authenticated
|
||||
if (!user.is_login) {
|
||||
console.log('User not logged in');
|
||||
if (user.is_login) {
|
||||
console.log('User logged in');
|
||||
|
||||
}else {
|
||||
console.log('User not logged in')
|
||||
return navigateTo(localePath('/auth/login'));
|
||||
}
|
||||
})
|
||||
|
|
@ -1,9 +1,28 @@
|
|||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
// @ts-ignore
|
||||
|
||||
import path from 'path'
|
||||
import fs from 'fs'
|
||||
// import { defineNuxtConfig } from 'nuxt3'
|
||||
|
||||
export default defineNuxtConfig({
|
||||
|
||||
|
||||
|
||||
|
||||
devServer: {
|
||||
|
||||
https: {
|
||||
|
||||
// key: fs.readFileSync(path.resolve(__dirname, '.nuxt/cert/privater-schluessel.key')),
|
||||
// cert: fs.readFileSync(path.resolve(__dirname, '.nuxt/cert/zertifikat.crt'))
|
||||
key:'cert/privater-schluessel.key',
|
||||
cert:'cert/zertifikat.crt'
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
ssr:false,
|
||||
plugins:[
|
||||
{src: '~/plugins/AudioVisual.client', mode: 'client'},
|
||||
{src: '~/plugins/PiniaPlugin', mode: 'client'},
|
||||
|
|
@ -146,7 +165,7 @@ export default defineNuxtConfig({
|
|||
"Log In":"Log In",
|
||||
"Already have an Account?":"Already have an Account?",
|
||||
"I agree to Mindboost's terms and conditions. You can read about how we use and protect your information in our Privacy Policy.":"I agree to Mindboost's terms and conditions. You can read about how we use and protect your information in our Privacy Policy.",
|
||||
"Hello,":"Hello,!",
|
||||
"Hello,":"Hello,",
|
||||
"First Name,":"First Name,",
|
||||
"Surname,":"Surname,",
|
||||
"Email,":"Email,",
|
||||
|
|
@ -282,7 +301,8 @@ 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.",
|
||||
|
||||
'Audio_Output':'Audio Output',
|
||||
'Audio_Input':'Audio Input',
|
||||
},
|
||||
de: {
|
||||
"welcome": "Willkommen",
|
||||
|
|
@ -487,9 +507,12 @@ export default defineNuxtConfig({
|
|||
"Sie haben das Recht, aus Gründen, die sich aus Ihrer besonderen Situation ergeben, jederzeit gegen die Verarbeitung Sie betreffender personenbezogener Daten Widerspruch einzulegen, die auf Artikel 6 Absatz 1 Buchstabe e DSGVO (Datenverarbeitung im öffentlichen Interesse) und Artikel 6 Absatz 1 Buchstabe f DSGVO (Datenverarbeitung auf der Grundlage einer Interessenabwägung) beruht; dies gilt auch für ein auf dieser Bestimmung beruhendes Profiling nach Artikel 4 Nr. 4 DSGVO.":"Sie haben das Recht, aus Gründen, die sich aus Ihrer besonderen Situation ergeben, jederzeit gegen die Verarbeitung Sie betreffender personenbezogener Daten Widerspruch einzulegen, die auf Artikel 6 Absatz 1 Buchstabe e DSGVO (Datenverarbeitung im öffentlichen Interesse) und Artikel 6 Absatz 1 Buchstabe f DSGVO (Datenverarbeitung auf der Grundlage einer Interessenabwägung) beruht; dies gilt auch für ein auf dieser Bestimmung beruhendes Profiling nach Artikel 4 Nr. 4 DSGVO.",
|
||||
"Informationen zu Ihrem Widerspruchsrecht gemäß Art. 21 DSGVO":"Informationen zu Ihrem Widerspruchsrecht gemäß Art. 21 DSGVO",
|
||||
"gemäß Art. 77 DSGVO bei einer Aufsichtsbehörde zu beschweren. In der Regel können Sie sich hierfür an die Aufsichtsbehörde an Ihrem üblichen Aufenthaltsort oder Arbeitsplatz oder unserem Firmensitz wenden.":"gemäß Art. 77 DSGVO bei einer Aufsichtsbehörde zu beschweren. In der Regel können Sie sich hierfür an die Aufsichtsbehörde an Ihrem üblichen Aufenthaltsort oder Arbeitsplatz oder unserem Firmensitz wenden.",
|
||||
'Audio_Output':'Audioausgang',
|
||||
'Audio_Input':'Audioeingang',
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
})
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -11,7 +11,7 @@
|
|||
"@nuxt/vite-builder": "^3.0.0",
|
||||
"@nuxtjs/i18n": "^8.0.0-beta.10",
|
||||
"@nuxtjs/tailwindcss": "^6.1.3",
|
||||
"nuxt": "3.0.0",
|
||||
"nuxt": "^3.8.0",
|
||||
"nuxt-headlessui": "^1.0.4",
|
||||
"vue-stripe-js": "^1.0.1"
|
||||
},
|
||||
|
|
@ -23,8 +23,10 @@
|
|||
"@stripe/stripe-js": "^1.46.0",
|
||||
"axios": "^1.3.2",
|
||||
"bootstrap": "^5.2.3",
|
||||
"chart.js": "^4.4.0",
|
||||
"pinia": "^2.0.28",
|
||||
"pinia-plugin-persistedstate": "^3.0.2",
|
||||
"standardized-audio-context": "^25.3.58",
|
||||
"toastr": "^2.1.4",
|
||||
"vite": "^3.2.5",
|
||||
"vue": "^3.2.26",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,70 @@
|
|||
<template>
|
||||
<div>
|
||||
<button @click="startMicrophone">Start Microphone</button>
|
||||
<button @click="stopMicrophone">Stop Microphone</button>
|
||||
<div v-if="errorMessage">{{ errorMessage }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
audioContext: null,
|
||||
microphoneStream: null,
|
||||
audioProcessorNode: null,
|
||||
errorMessage: null,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async startMicrophone() {
|
||||
|
||||
this.audioContext = new window.AudioContext ();
|
||||
|
||||
// Request access to the microphone
|
||||
this.microphoneStream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
||||
|
||||
// Check if the microphone stream is available
|
||||
if (!this.microphoneStream) {
|
||||
console.error("Microphone stream is not available.");
|
||||
this.errorMessage = "Microphone stream is not available.";
|
||||
return;
|
||||
}
|
||||
|
||||
// Ensure that the microphoneStream is a MediaStream object
|
||||
if (!(this.microphoneStream instanceof MediaStream)) {
|
||||
console.error("Invalid microphone stream.");
|
||||
this.errorMessage = "Invalid microphone stream.";
|
||||
return;
|
||||
}
|
||||
|
||||
// Create a MediaStreamAudioSourceNode from the microphone stream
|
||||
const microphoneSource = this.audioContext.createMediaStreamSource(this.microphoneStream);
|
||||
await this.audioContext.audioWorklet.addModule('@/plugins/octave.js');
|
||||
this.audioProcessorNode = new AudioWorkletNode(this.audioContext, 'octave');
|
||||
microphoneSource.connect(this.audioProcessorNode);
|
||||
this.audioProcessorNode.connect(this.audioContext.destination);
|
||||
// Try to add the Audio Worklet module
|
||||
|
||||
},
|
||||
stopMicrophone() {
|
||||
if (this.audioContext) {
|
||||
// Disconnect and close the AudioWorkletNode
|
||||
if (this.audioProcessorNode) {
|
||||
this.audioProcessorNode.disconnect();
|
||||
this.audioProcessorNode.port.postMessage({ command: 'stop' });
|
||||
}
|
||||
|
||||
// Close the AudioContext
|
||||
this.audioContext.close();
|
||||
|
||||
// Reset variables
|
||||
this.audioContext = null;
|
||||
this.microphoneStream = null;
|
||||
this.audioProcessorNode = null;
|
||||
this.errorMessage = null;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -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,8 +122,8 @@ export default {
|
|||
this.login(data.user,data.authorisation.token);
|
||||
|
||||
|
||||
this.$toast.success('Login Successfully....');
|
||||
this.$router.push(this.localePath('/onboarding'));
|
||||
// this.$toast.success('Login Successfully....');
|
||||
this.$router.push(this.localePath('/onboarding/selectinput'));
|
||||
|
||||
}else{
|
||||
this.$toast.error(`Email or password is incorrect.`);
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
<div>
|
||||
<video-background
|
||||
src="/video/bg-video.mp4"
|
||||
poster="/images/poster.png"
|
||||
style=" height: 100vh;"
|
||||
>
|
||||
<div class="container-fluid">
|
||||
|
|
@ -79,7 +80,7 @@
|
|||
<span class="sr-only">{{t("Loading...")}}</span>
|
||||
</div>
|
||||
</button>
|
||||
<p class="pt-3">{{t("Already have an Account?")}} <NuxtLink class="signup-link" href="login">{{t("Log In")}}</NuxtLink></p>
|
||||
<p class="pt-3">{{t("Already have an Account?")}} <NuxtLink class="signup-link" :to="localePath('/auth/login')">{{t("Log In")}}</NuxtLink></p>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,35 @@
|
|||
<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="attackTime" class="form-control" placeholder="Enter time ramp to increase or decrease smoothing">
|
||||
</div>
|
||||
<div class="col-md-3 form-group">
|
||||
<label>Release Time:</label>
|
||||
<input type="text" v-model="releaseTime" 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 +41,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 +55,7 @@
|
|||
<th>Band Frequency</th>
|
||||
<th>Percentile</th>
|
||||
<th>Result ABC</th>
|
||||
<th>Masking Gain</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
@ -32,57 +63,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 +145,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:11,
|
||||
|
||||
// This object holds all state of the app
|
||||
classes: [
|
||||
['h1', 'Heading 1', '6rem', '300', '-.015625em', -1],
|
||||
|
|
@ -158,6 +225,7 @@ export default {
|
|||
totalms:0,
|
||||
audioCtx:{},
|
||||
source:{},
|
||||
|
||||
stream:{},
|
||||
Gain:{},
|
||||
HPF:{},
|
||||
|
|
@ -274,12 +342,45 @@ 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:{},
|
||||
attackTime:25,
|
||||
releaseTime:30,
|
||||
targetValue:0,
|
||||
currentValue:0,
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
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 +440,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 +457,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 +465,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) {
|
||||
|
|
@ -409,10 +520,6 @@ export default {
|
|||
},
|
||||
|
||||
frame() {
|
||||
// if (this.height == 100) {
|
||||
// this.stopmeasurement();
|
||||
// console.log(this.LevelValues);
|
||||
//console.log("Before",this.LevelValues65);
|
||||
|
||||
this.Percentile_Global= this.Percentile(this.LevelValues,0);
|
||||
this.Percentile_65=this.Percentile(this.LevelValues65,65)
|
||||
|
|
@ -424,23 +531,10 @@ export default {
|
|||
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();
|
||||
|
||||
// console.log("After",this.LevelValues65);
|
||||
|
||||
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);
|
||||
// }
|
||||
// }
|
||||
|
||||
},
|
||||
|
||||
startmeasurement() {
|
||||
|
|
@ -464,33 +558,50 @@ export default {
|
|||
|
||||
if(this.timeHeight>40){
|
||||
this.frame();
|
||||
// this.reset25();
|
||||
|
||||
// console.log("Array Counter",this.ArrayCounter);
|
||||
// console.log("Last",this.lastArrayCouhter);
|
||||
// this.lastArrayCouhter=this.ArrayCounter;
|
||||
var linearGain = (this.Percentile_1000.percentile - 0) / (10 - 0);
|
||||
// const linearGain = (Math.pow(10, this.Percentile_1000.percentile / 20))*0.5;
|
||||
// this.envelop(this.maxGain1000*this.Percentile_1000.percentile);
|
||||
this.envelop(linearGain);
|
||||
|
||||
console.log('Linear Gian',linearGain);
|
||||
// this.logarithmicSmooth(linearGain,5,10);
|
||||
|
||||
}
|
||||
// console.log(this.ArrayCounter);
|
||||
// console.log("Last",this.lastArrayCouhter);
|
||||
// this.lastArrayCouhter=this.ArrayCounter;
|
||||
|
||||
// if(this.timeHeight <= 0){
|
||||
// this.firstArrayCounter=this.ArrayCounter;
|
||||
// // console.log("First",this.firstArrayCounter);
|
||||
// }
|
||||
++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)
|
||||
},
|
||||
envelop(targetValue){
|
||||
|
||||
const now = this.audioCtx.currentTime;
|
||||
// Cancel all previous Schedule
|
||||
this.Gain1000.gain.cancelScheduledValues(now);
|
||||
//Set the value for the previous gain
|
||||
this.Gain1000.gain.setValueAtTime(this.currentValue, now);
|
||||
//Linear ramp to the the attack time normal 25s
|
||||
this.Gain1000.gain.linearRampToValueAtTime(targetValue, now + this.attackTime);
|
||||
// Set Target
|
||||
this.Gain1000.gain.setTargetAtTime(targetValue, now + this.attackTime, this.releaseTime);
|
||||
// Store the current value for the next iteration
|
||||
this.currentValue = this.Gain1000.gain.value;
|
||||
|
||||
console.log('Current Value',this.currentValue);
|
||||
|
||||
|
||||
// Use the target value for audio processing or as needed
|
||||
console.log("Target Value:", targetValue);
|
||||
},
|
||||
CancleMeasurement() {
|
||||
this.stopmeasurement();
|
||||
this.previousPage();
|
||||
|
|
@ -512,7 +623,8 @@ export default {
|
|||
this.AnalyserbandPass2000.getByteTimeDomainData(this.bandPass2000Buffer)
|
||||
this.AnalyserbandPass4000.getByteTimeDomainData(this.bandPass4000Buffer)
|
||||
this.AnalyserbandPass8000.getByteTimeDomainData(this.bandPass8000Buffer)
|
||||
this.AnalyserbandPass16000.getByteTimeDomainData(this.bandPass16000Buffer)
|
||||
this.AnalyserbandPass16000.getByteTimeDomainData(this.bandPass16000Buffer);
|
||||
// console.log('Buffer 1000',this.bandPass1000Buffer);
|
||||
|
||||
for (var i = 0; i < 512; i++) {
|
||||
this.ByteToDecimal = (this.LevelBuffer[i]-128)/128;
|
||||
|
|
@ -667,26 +779,75 @@ export default {
|
|||
|
||||
|
||||
|
||||
|
||||
StartButtonPressed(){
|
||||
|
||||
let constraints = {
|
||||
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.Gain1000.gain.setValueAtTime(0,this.audioCtx.currentTime);
|
||||
|
||||
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
|
||||
const sampleRate = this.audioCtx.sampleRate;
|
||||
this.source100.buffer = audioBuffer;
|
||||
this.source100.loop = true;
|
||||
// Connect nodes
|
||||
// this.source100.connect(compressorNode);
|
||||
this.source100.connect(this.Gain1000);
|
||||
this.Gain1000.connect(this.audioCtx.destination);
|
||||
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 +856,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 +996,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
|
|
@ -5,7 +5,7 @@
|
|||
<div class="col-12 px-0 mx-0">
|
||||
<audio ref="audio" src="/sounds/Forest.aac" loop></audio>
|
||||
<video-background
|
||||
poster="/images/posters/poster1.png"
|
||||
poster="/images/posters/poster2.png"
|
||||
src="/video/Forest.mp4"
|
||||
style=" height: 100vh;"
|
||||
preload="auto"
|
||||
|
|
@ -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;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<video-background
|
||||
preload="auto"
|
||||
src="/video/Meadow.mp4"
|
||||
poster="/images/posters/poster1.png"
|
||||
poster="/images/posters/poster2.png"
|
||||
style=" height: 100vh;"
|
||||
>
|
||||
<home-bar :title="title" v-on:play="playPause" />
|
||||
|
|
@ -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;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<div class="row">
|
||||
<div class="col-12 px-0 mx-0">
|
||||
<audio ref="audio" src="/sounds/Tropics.aac" loop></audio>
|
||||
<video-background src="/video/Tropics.mp4" preload="auto" poster="/images/posters/poster1.png" style=" height: 100vh;">
|
||||
<video-background src="/video/Tropics.mp4" preload="auto" poster="/images/posters/poster2.png" style=" height: 100vh;">
|
||||
<home-bar v-on:play="playPause" :title="title" />
|
||||
<div class="container-fluid">
|
||||
<div class="row justify-content-center">
|
||||
|
|
@ -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){
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="container-fluid">
|
||||
<div class="container-fluid" style="background-image: url('/images/posters/poster2.png');background-size: cover">
|
||||
<div class="row">
|
||||
<div class="col-12 px-0 mx-0">
|
||||
<audio ref="audio" src="/sounds/Lagoon.aac" loop></audio>
|
||||
<video-background
|
||||
preload="auto"
|
||||
poster="/images/poster.png"
|
||||
src="/video/bg-video.mp4"
|
||||
poster="/images/posters/poster1.png"
|
||||
style=" height: 100vh;"
|
||||
>
|
||||
|
||||
|
|
@ -18,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">
|
||||
|
|
@ -32,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>
|
||||
|
|
@ -71,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){
|
||||
|
|
|
|||
|
|
@ -20,20 +20,90 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<canvas id="audioSignalChart" width="400" height="200"></canvas>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import BandpassProcessor from '~/plugin/octav.js'; // Adjust the path
|
||||
// import Chart from 'chart.js';
|
||||
|
||||
export default {
|
||||
name:'HomePage',
|
||||
name: 'HomePage',
|
||||
|
||||
created() {
|
||||
return{
|
||||
player : '',
|
||||
canvas : '',
|
||||
mySource : "./symphony.mp3",
|
||||
}
|
||||
}
|
||||
data() {
|
||||
return {
|
||||
bandpassProcessor: null,
|
||||
audioContext: null,
|
||||
oscillator: null,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
// Initialize the BandpassProcessor
|
||||
this.bandpassProcessor = new BandpassProcessor();
|
||||
|
||||
// Initialize the AudioContext
|
||||
this.audioContext = new AudioContext();
|
||||
|
||||
// Create an oscillator
|
||||
this.oscillator = this.audioContext.createOscillator();
|
||||
this.oscillator.type = 'sine'; // You can change the waveform type
|
||||
this.oscillator.frequency.setValueAtTime(440, this.audioContext.currentTime); // Set the initial frequency
|
||||
|
||||
// Connect the oscillator to the BandpassProcessor
|
||||
this.oscillator.connect(this.bandpassProcessor);
|
||||
|
||||
// Start the oscillator
|
||||
this.oscillator.start();
|
||||
|
||||
// Send parameters to the BandpassProcessor
|
||||
this.bandpassProcessor.port.postMessage({
|
||||
frequency: 1000, // Adjust the frequency value as needed
|
||||
Q: 5, // Adjust the Q value as needed
|
||||
});
|
||||
|
||||
// Listen for processed data from the BandpassProcessor
|
||||
this.bandpassProcessor.port.onmessage = (event) => {
|
||||
const { rms, dbValues, percentile10, percentile90 } = event.data;
|
||||
// Use the processed data as needed
|
||||
};
|
||||
|
||||
// Create a line chart
|
||||
const ctx = document.getElementById('audioSignalChart').getContext('2d');
|
||||
this.audioSignalChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [], // You can add time labels or use an array index
|
||||
datasets: [
|
||||
{
|
||||
label: 'Audio Signal',
|
||||
data: [], // Populate this with your audio signal data
|
||||
borderColor: 'rgb(75, 192, 192)',
|
||||
borderWidth: 2,
|
||||
fill: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
x: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Time',
|
||||
},
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Amplitude',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,162 @@
|
|||
new AudioWorkletProcessor ()
|
||||
|
||||
class OctaveBandProcessor extends AudioWorkletProcessor {
|
||||
constructor() {
|
||||
super();
|
||||
// Define center frequencies for 9 octave bands
|
||||
this.centerFrequencies = [63, 125, 250, 500, 1000, 2000, 4000, 8000, 16000];
|
||||
this.filters = [];
|
||||
this.lastUpdateTimestamp = 0;
|
||||
this.updateInterval = 0.125; // Update every 0.125 seconds
|
||||
|
||||
// Create an A-weighting filter for specific frequencies
|
||||
this.createAWeightingFilter();
|
||||
|
||||
// Create bandpass filters for each center frequency
|
||||
this.centerFrequencies.forEach(frequency => {
|
||||
const filter = new BiquadFilterNode(audioContext, {
|
||||
type: 'bandpass',
|
||||
frequency: frequency,
|
||||
Q: 1.41, // Set the desired Q value
|
||||
},
|
||||
this.filters.push(filter))
|
||||
});
|
||||
|
||||
// Set up analyzers for calculating percentiles
|
||||
this.setupAnalyzers();
|
||||
|
||||
}
|
||||
|
||||
setupAnalyzers() {
|
||||
this.analyzers = [];
|
||||
this.centerFrequencies.forEach(frequency => {
|
||||
this.analyzers.push([]);
|
||||
for (let i = 0; i < 5; i++) { // Unique identifiers from 0 to 4
|
||||
const analyzer = audioContext.createAnalyser();
|
||||
analyzer.fftSize = 2048;
|
||||
|
||||
// Check if the identifier is 0 (microphone audio) before connecting to the A-weighting filter
|
||||
if (i === 0) {
|
||||
this.aWeightingFilter.connect(analyzer);
|
||||
}
|
||||
|
||||
this.analyzers[this.analyzers.length - 1].push(analyzer);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
process(inputs, outputs) {
|
||||
const numOutputChannels = outputs.length;
|
||||
for (let i = 0; i < numOutputChannels; i++) {
|
||||
const outputChannel = outputs[i][0];
|
||||
const inputChannel = inputs[i][0];
|
||||
|
||||
// Apply the filter to the input channel
|
||||
const filteredSignal = this.filters[i].process(inputChannel);
|
||||
|
||||
// Apply A-weighting only to the microphone signal (channel 0)
|
||||
if (i === 0) {
|
||||
const aWeightedSignal = this.aWeightingFilter.process(filteredSignal);
|
||||
outputChannel.set(aWeightedSignal);
|
||||
} else {
|
||||
// For other channels, pass the signal without A-weighting
|
||||
outputChannel.set(filteredSignal);
|
||||
}
|
||||
|
||||
// Check if it's time to update percentiles
|
||||
const currentTime = this.currentTime;
|
||||
if (currentTime - this.lastUpdateTimestamp >= this.updateInterval) {
|
||||
this.updatePercentiles(i);
|
||||
this.lastUpdateTimestamp = currentTime;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
calculateRMSLevel(signal, channelIndex) {
|
||||
const data = new Float32Array(signal.length);
|
||||
signal.copyFromChannel(data, 0);
|
||||
const sum = data.reduce((acc, val) => acc + val * val, 0);
|
||||
const rmsLevel = Math.sqrt(sum / data.length);
|
||||
const dBLevel = 20 * Math.log10(rmsLevel); // Convert to dB
|
||||
return dBLevel;
|
||||
}
|
||||
|
||||
updatePercentiles(channelIndex) {
|
||||
for (let i = 0; i < this.centerFrequencies.length; i++) {
|
||||
const analyzer = this.analyzers[i][channelIndex];
|
||||
const levelData = new Float32Array(analyzer.frequencyBinCount);
|
||||
analyzer.getFloatFrequencyData(levelData);
|
||||
|
||||
// Calculate percentiles for each octave band and each channel
|
||||
const percentile10 = this.calculatePercentile(levelData, 10);
|
||||
const percentile90 = this.calculatePercentile(levelData, 90);
|
||||
|
||||
const percentileDiff = percentile10 - percentile90;
|
||||
|
||||
// Store the percentile difference for each channel and each octave band
|
||||
// You can use suitable data structures to store these values for future comparisons
|
||||
}
|
||||
}
|
||||
|
||||
calculatePercentile(data, percentile) {
|
||||
const sortedData = data.slice().sort((a, b) => a - b);
|
||||
const index = Math.floor((percentile / 100) * sortedData.length);
|
||||
return sortedData[index];
|
||||
}
|
||||
|
||||
createAWeightingFilter() {
|
||||
// Use the provided A-weighting filter coefficients
|
||||
const aWeightingCoefficients = [0, -0.051, -0.142, -0.245, -0.383, -0.65, -1.293, -2.594, -6.554]; //David
|
||||
|
||||
// Create a custom IIR filter node with the A-weighting coefficients
|
||||
this.aWeightingFilter = new IIRFilterNode(audioContext, {
|
||||
feedforward: aWeightingCoefficients,
|
||||
feedback: [1],
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
combineAndCalculate() {
|
||||
let LAF10_90_total = 0; // Initialize the total LAF10%-90%
|
||||
|
||||
for (let i = 0; i < this.centerFrequencies.length; i++) {
|
||||
const micAnalyzer = this.analyzers[i][0]; // Analyzer for microphone audio (identifier 0)
|
||||
const audioFile1Analyzer = this.analyzers[i][3]; // Analyzer for audioFile1 (identifier 3)
|
||||
const audioFile2Analyzer = this.analyzers[i][4]; // Analyzer for audioFile2 (identifier 4)
|
||||
|
||||
// Calculate percentiles for the microphone audio
|
||||
const micPercentile10 = this.calculatePercentile(micAnalyzer, 10);
|
||||
const micPercentile90 = this.calculatePercentile(micAnalyzer, 90);
|
||||
|
||||
// Calculate percentiles for audioFile1
|
||||
const audioFile1Percentile10 = this.calculatePercentile(audioFile1Analyzer, 10);
|
||||
const audioFile1Percentile90 = this.calculatePercentile(audioFile1Analyzer, 90);
|
||||
|
||||
// Calculate percentiles for audioFile2
|
||||
const audioFile2Percentile10 = this.calculatePercentile(audioFile2Analyzer, 10);
|
||||
const audioFile2Percentile90 = this.calculatePercentile(audioFile2Analyzer, 90);
|
||||
|
||||
// Calculate LAF10%-90% for microphone audio, audioFile1, and audioFile2 separately
|
||||
const micLAF10_90 = micPercentile10 - micPercentile90;
|
||||
const audioFile1LAF10_90 = audioFile1Percentile10 - audioFile1Percentile90;
|
||||
const audioFile2LAF10_90 = audioFile2Percentile10 - audioFile2Percentile90;
|
||||
|
||||
// Calculate combined LAF10%-90% for microphone audio, audioFile1, and audioFile2
|
||||
const combinedLAF10_90 = micLAF10_90 + audioFile1LAF10_90 + audioFile2LAF10_90;
|
||||
|
||||
// Add the combined LAF10%-90% to the total
|
||||
LAF10_90_total += combinedLAF10_90;
|
||||
}
|
||||
|
||||
// return LAF10_90_total;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
registerProcessor('octave', OctaveBandProcessor);
|
||||
|
||||
|
|
@ -3,26 +3,47 @@
|
|||
<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 mx-1" exact-active-class="px-4 mx-2" :to="localePath('/onboarding/selectinput')"></NuxtLink>
|
||||
<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 +54,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,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -48,10 +122,14 @@ export default {
|
|||
|
||||
<style >
|
||||
.bar{
|
||||
background-color: #e9c046;
|
||||
background-color: #e9c046 !important;
|
||||
}
|
||||
.checklabel{
|
||||
background-color: white ;
|
||||
width: 150px;
|
||||
background-color: white !important;
|
||||
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: 50px;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: 50px;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)=>{
|
||||
|
|
@ -100,7 +89,7 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
.bar{
|
||||
background-color: #e9c046;
|
||||
background-color: #e9c046 !important;
|
||||
}
|
||||
.checklabel:hover{
|
||||
border-color: #e9c046;
|
||||
|
|
|
|||
|
|
@ -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: 50px;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: 50px;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)=>{
|
||||
|
|
@ -144,4 +132,9 @@ export default {
|
|||
fill: white;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 992px) and (min-width: 575px) {
|
||||
.box12{
|
||||
padding: 11px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,166 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-12 ">
|
||||
<h4 class="text-center fw-bold pt-5">{{t("How is your audio hardware connected?")}}</h4>
|
||||
<p class="text-center mb-0 pb-0 text-muted">As input, please select the microphone of your laptop or mobile device – not of your headphones.</p>
|
||||
<p class="text-center mt-0 pt-0 text-muted">To use Mindboost, headphones are required.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-11 pt-md-4">
|
||||
<form>
|
||||
<div class="row justify-content-center ">
|
||||
<div class="col-md-3 text-center">
|
||||
<h6 class="pb-0 mb-0">Input device:</h6>
|
||||
<p class="pt-0 mt-0 text-muted pb-0 mb-0" style="font-size: 14px;font-weight: 500">(select laptop or mobile device microphone)</p>
|
||||
<select class="form-select pt-1 mt-0 select-box " v-model="selectedInput">
|
||||
<option :value="index" v-for="(item,index) in audioInputDevices" :key="index" >{{item.label}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-center pt-3">
|
||||
<div class="col-md-3 text-center">
|
||||
<h6 class="pb-0 mb-0 " >Output device:</h6>
|
||||
<p class="pt-0 mt-0 text-muted pb-0 mb-0" style="font-size: 14px;font-weight: 500">(select headphones or headphone output)</p>
|
||||
<select class="form-select pt-1 mt-0 select-box " v-model="selectedOutput">
|
||||
<option :value="index" v-for="(item,index) in audioOutputDevices" :key="index">{{item.label}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-center pt-3">
|
||||
<div class="col-md-3 text-center" style="z-index: 1000000;">
|
||||
<a href="#" @click.prevent="saveDevices" style="z-index: 1000000" class="btn col-4 next-btn" >NEXT</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {useCounterStore} from '@/stores/counter';
|
||||
import {mapState,mapActions} from "pinia";
|
||||
import {useUserStore} from "~/stores/user";
|
||||
export default {
|
||||
setup() {
|
||||
const { t } = useI18n()
|
||||
const localePath = useLocalePath()
|
||||
|
||||
return {
|
||||
t,
|
||||
localePath,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
computed:{...mapState(useUserStore,['audioInputDevice','audioOutputDevice'])},
|
||||
|
||||
data(){
|
||||
return{
|
||||
bar_val:100,
|
||||
form:{
|
||||
soundscape:'',
|
||||
},
|
||||
audioInputDevices: [],
|
||||
audioOutputDevices:[],
|
||||
selectedInput: null,
|
||||
selectedOutput: null,
|
||||
stream: null,
|
||||
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
...mapActions(useUserStore,['saveInputdevice','saveOutputDevice']),
|
||||
async changeDevice() {
|
||||
await this.getUserMedia();
|
||||
},
|
||||
saveDevices(){
|
||||
console.log('Save');
|
||||
this.saveInputdevice(this.audioInputDevices[this.selectedInput])
|
||||
this.saveOutputDevice(this.audioOutputDevices[this.selectedOutput]);
|
||||
this.$router.push(this.localePath('/onboarding'));
|
||||
},
|
||||
getUserMedia() {
|
||||
const constraints = {
|
||||
audio: { deviceId: this.selectedDevice ? { exact: this.selectedDevice } : undefined },
|
||||
};
|
||||
|
||||
try {
|
||||
return navigator.mediaDevices.getUserMedia(constraints);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error accessing media devices: ', error);
|
||||
}
|
||||
},
|
||||
},
|
||||
handleError(error) {
|
||||
console.error('Error: ', error);
|
||||
},
|
||||
saveSetting(value){
|
||||
this.form.soundscape=value;
|
||||
this.$axios.post('/api/update-setting',this.form).then(({data})=>{
|
||||
console.log(data);
|
||||
if(data.success){
|
||||
// this.$toast.success(data.message);
|
||||
this.$router.push(this.localePath('onboarding'));
|
||||
}
|
||||
}).catch((e)=>{
|
||||
this.$toast.error("something went wrong while saving...");
|
||||
})
|
||||
},
|
||||
created() {
|
||||
try {
|
||||
this.getUserMedia().then(()=>{
|
||||
navigator.mediaDevices.enumerateDevices().then((devices)=>{
|
||||
console.log(devices);
|
||||
this.audioInputDevices = devices.filter((device) => device.kind === 'audioinput');
|
||||
this.audioOutputDevices = devices.filter((device) => device.kind === 'audiooutput');
|
||||
this.selectedDevice = this.audioInputDevices.length > 0 ? this.audioInputDevices[0].deviceId : null;
|
||||
this.selectedInput=this.audioInputDevices.findIndex((item)=>item.deviceId==this.audioInputDevice.deviceId);
|
||||
this.selectedOutput=this.audioOutputDevices.findIndex((item)=>item.deviceId==this.audioOutputDevice.deviceId);
|
||||
console.log(this.selectedDevice);
|
||||
});
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error enumerating media devices: ', error);
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bar{
|
||||
background-color: #e9c046;
|
||||
}
|
||||
|
||||
.select-box{
|
||||
border: 2px solid #e9c046;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.select-box:focus{
|
||||
border: 2px solid #e9c046;
|
||||
box-shadow: none;
|
||||
|
||||
}
|
||||
.next-btn{
|
||||
background: #e9c046;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
.next-btn:hover{
|
||||
background: #e9c046;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -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>
|
||||
|
|
@ -75,30 +75,84 @@
|
|||
|
||||
</ul>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="row pt-3">
|
||||
<div class="col-7 ps-4 ">
|
||||
<p class="fs-6 ms-2">{{t("Adaptive soundcape")}} </p>
|
||||
</div>
|
||||
<div class="col-5 pe-4">
|
||||
<div class="form-check form-switch float-end">
|
||||
<input class="form-check-input" :checked="adaptiveSounscape" @change="saveSetting(true,'adaptiveSounscape')" type="checkbox" role="switch" id="flexSwitchCheckDefault">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="panelsStayOpen-headingThree" type="button" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
|
||||
{{t("Audio_Input")}}
|
||||
</button>
|
||||
</h2>
|
||||
|
||||
<ul class="dropdown-menu dropdown-menu-end me-4" aria-labelledby="dropdownMenuButton2">
|
||||
<li class="px-1" v-for="(item,index) in audioInputDevices">
|
||||
<a :class="{'drop-active':item.deviceId==audioInputDevice().deviceId}" @click.prevent="saveInputdevice(item)" class="dropdown-item py-2 text-muted fw-bold fs-6" to="/" style="border-bottom: 1px solid lightgray;" :key="index"> {{item.label}} <span class="float-end">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="20" height="20" viewBox="0 0 256 256" xml:space="preserve">
|
||||
|
||||
<defs>
|
||||
</defs>
|
||||
<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: #e9c046; fill-rule: nonzero; opacity: 1;" transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)" >
|
||||
<path d="M 45 70.968 c -16.013 0 -29.042 -13.028 -29.042 -29.042 c 0 -1.712 1.388 -3.099 3.099 -3.099 c 1.712 0 3.099 1.388 3.099 3.099 C 22.157 54.522 32.404 64.77 45 64.77 c 12.595 0 22.843 -10.248 22.843 -22.843 c 0 -1.712 1.387 -3.099 3.099 -3.099 s 3.099 1.388 3.099 3.099 C 74.042 57.94 61.013 70.968 45 70.968 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: #e9c046; fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
|
||||
<path d="M 45 60.738 L 45 60.738 c -10.285 0 -18.7 -8.415 -18.7 -18.7 V 18.7 C 26.3 8.415 34.715 0 45 0 h 0 c 10.285 0 18.7 8.415 18.7 18.7 v 23.337 C 63.7 52.322 55.285 60.738 45 60.738 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: #e9c046; fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
|
||||
<path d="M 45 89.213 c -1.712 0 -3.099 -1.387 -3.099 -3.099 V 68.655 c 0 -1.712 1.388 -3.099 3.099 -3.099 c 1.712 0 3.099 1.387 3.099 3.099 v 17.459 C 48.099 87.826 46.712 89.213 45 89.213 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: #e9c046; fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
|
||||
<path d="M 55.451 90 H 34.549 c -1.712 0 -3.099 -1.387 -3.099 -3.099 s 1.388 -3.099 3.099 -3.099 h 20.901 c 1.712 0 3.099 1.387 3.099 3.099 S 57.163 90 55.451 90 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill:#e9c046; fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="panelsStayOpen-headingThree" type="button" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
|
||||
{{t("Audio_Output")}}
|
||||
</button>
|
||||
</h2>
|
||||
|
||||
<ul class="dropdown-menu dropdown-menu-end me-4" aria-labelledby="dropdownMenuButton2">
|
||||
<li class="px-1" v-for="(item,index) in audioOutputDevices">
|
||||
<a :class="{'drop-active':item.deviceId==audioOutputDevice().deviceId}" @click.prevent="saveOutputDevice(item)" class="dropdown-item py-2 text-muted fw-bold fs-6" to="/" style="border-bottom: 1px solid lightgray;" :key="index"> {{item.label}} <span class="float-end">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="15" height="15" viewBox="0 0 75 75">
|
||||
<path d="M39.389,13.769 L22.235,28.606 L6,28.606 L6,47.699 L21.989,47.699 L39.389,62.75 L39.389,13.769z"
|
||||
style="stroke:#111;stroke-width:5;stroke-linejoin:round;fill:#111;"
|
||||
/>
|
||||
<path d="M48,27.6a19.5,19.5 0 0 1 0,21.4M55.1,20.5a30,30 0 0 1 0,35.6M61.6,14a38.8,38.8 0 0 1 0,48.6" style="fill:none;stroke:#111;stroke-width:5;stroke-linecap:round"/>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="row pt-3">
|
||||
<div class="col-7 ps-4 ">
|
||||
<p class="fs-6 ms-2">{{t("Adaptive soundcape")}} </p>
|
||||
</div>
|
||||
<div class="col-5 pe-4">
|
||||
<div class="form-check form-switch float-end">
|
||||
<input class="form-check-input" checked v-model="adaptiveSounscape" @change="saveSetting" type="checkbox" role="switch" id="flexSwitchCheckDefault">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script >
|
||||
import audioVisualClient from "~/plugins/AudioVisual.client";
|
||||
import {mapActions,mapState} from "pinia";
|
||||
import {useUserStore} from "~/stores/user";
|
||||
|
||||
export default {
|
||||
name:'Soundscape',
|
||||
setup(){
|
||||
|
|
@ -114,7 +168,11 @@ data(){
|
|||
headphone_type:"",
|
||||
anc_type:"",
|
||||
adaptive_sound_scape:"",
|
||||
}
|
||||
|
||||
},
|
||||
audioInputDevices:[],
|
||||
audioOutputDevices:[],
|
||||
...mapState(useUserStore,['audioInputDevice','audioOutputDevice'])
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -122,21 +180,36 @@ data(){
|
|||
},
|
||||
|
||||
methods:{
|
||||
...mapActions(useUserStore,['saveInputdevice','saveOutputDevice']),
|
||||
audioVisualClient,
|
||||
getUserMedia() {
|
||||
const constraints = {
|
||||
audio: { deviceId: this.selectedDevice ? { exact: this.selectedDevice } : undefined },
|
||||
};
|
||||
|
||||
try {
|
||||
return navigator.mediaDevices.getUserMedia(constraints);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error accessing media devices: ', error);
|
||||
}
|
||||
},
|
||||
fetchSettings(){
|
||||
this.$axios.post('/api/fetch-settings',this.form).then(({data})=>{
|
||||
console.log(data);
|
||||
if(data.success){
|
||||
this.form=data.setting;
|
||||
if (data.setting.adaptive_sound_scape==='yes' || data.setting.adaptive_sound_scape==='Yes'){
|
||||
this.form.adaptive_sound_scape=true;
|
||||
this.adaptiveSounscape=true;
|
||||
}else{
|
||||
this.form.adaptive_sound_scape=false;
|
||||
this.adaptiveSounscape=false;
|
||||
}
|
||||
}
|
||||
}).catch((e)=>{
|
||||
this.$toast.error("something went wrong while saving...");
|
||||
})
|
||||
},
|
||||
|
||||
saveSetting(value,type){
|
||||
console.log(this.adaptiveSounscape);
|
||||
if(type=='soundscape'){
|
||||
|
|
@ -151,9 +224,9 @@ data(){
|
|||
this.form.anc_type=value;
|
||||
}
|
||||
if (this.adaptiveSounscape==true){
|
||||
this.form.adaptive_sound_scape='yes';
|
||||
}else {
|
||||
this.form.adaptive_sound_scape='no';
|
||||
}else {
|
||||
this.form.adaptive_sound_scape='yes';
|
||||
}
|
||||
|
||||
this.$axios.post('/api/update-setting',this.form).then(({data})=>{
|
||||
|
|
@ -166,7 +239,22 @@ data(){
|
|||
this.$toast.error("something went wrong while saving...");
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
try {
|
||||
this.getUserMedia().then(()=>{
|
||||
navigator.mediaDevices.enumerateDevices().then((devices)=>{
|
||||
console.log(devices);
|
||||
this.audioInputDevices = devices.filter((device) => device.kind === 'audioinput');
|
||||
this.audioOutputDevices = devices.filter((device) => device.kind === 'audiooutput');
|
||||
this.selectedDevice = this.audioInputDevices.length > 0 ? this.audioInputDevices[0].deviceId : null;
|
||||
});
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error enumerating media devices: ', error);
|
||||
}
|
||||
},
|
||||
}
|
||||
</script >
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -38,11 +38,19 @@
|
|||
<div class="row pt-5">
|
||||
<div class="col-12 px-md-5 px-0">
|
||||
<h6 class="text-center text-muted" style="font-style: normal;font-weight: 500;font-size: 14px;line-height: 20px;">{{t("You can cancel Mindboost at any time. The subscription will start automatically after the end of the trial period unless it is canceled before the end of the trial period. The total price is charged per period, price includes VAT.")}}</h6>
|
||||
|
||||
</div>
|
||||
<div class="col-12 text-end">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row pt-5 justify-content-center ">
|
||||
<div class="col-6 text-center">
|
||||
<div class="col-12 col-md-6 col-lg-6 text-center">
|
||||
<button :disabled="loading" type="button" @click="paynow" class="btn text-white fs-5 col-12 fw-bold py-2 " style="background-color: #e9c046">{{t("Save Changes")}} <span v-if="loading" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span></button>
|
||||
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-6" v-if="subscription=='monthly'||subscription=='sixmonth'||subscription=='yearly'">
|
||||
<button @click="cancelNow" :disabled="cancel_loading" class="btn text-white fs-5 col-12 fw-bold py-2 " style="background-color: #dc042a">Cancel Now <span v-if="cancel_loading" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span></button>
|
||||
</div>
|
||||
<!-- <StripeElements-->
|
||||
<!-- v-if="stripeLoaded"-->
|
||||
|
|
@ -104,7 +112,7 @@ export default {
|
|||
// }
|
||||
|
||||
|
||||
|
||||
this.fetchSubscription();
|
||||
},
|
||||
|
||||
|
||||
|
|
@ -119,6 +127,8 @@ export default {
|
|||
twoMonth:false,
|
||||
threeMonth:false,
|
||||
loading:false,
|
||||
cancel_loading:false,
|
||||
subscription:'',
|
||||
form:{
|
||||
type:"one",
|
||||
}
|
||||
|
|
@ -127,10 +137,13 @@ export default {
|
|||
methods:{
|
||||
|
||||
|
||||
...mapActions(useUserStore,['updateUser']),
|
||||
...mapActions(useUserStore,['updateUser','logout']),
|
||||
updateUserNow(){
|
||||
this.$axios.post('/api/auth/me').then(({data})=>{
|
||||
this.updateUser(data.user);
|
||||
}).catch((e)=>{
|
||||
this.logout();
|
||||
this.$router.push(this.localePath('/auth/login'));
|
||||
})
|
||||
},
|
||||
paynow(){
|
||||
|
|
@ -157,9 +170,52 @@ export default {
|
|||
this.loading=false;
|
||||
this.$toast.error('Error while saving....');
|
||||
console.log(error);
|
||||
|
||||
|
||||
})
|
||||
},
|
||||
cancelNow(){
|
||||
this.cancel_loading=true;
|
||||
this.$axios.post('/api/cancel-subscription').then(({data})=>{
|
||||
console.log(data);
|
||||
this.cancel_loading=false;
|
||||
if (data.success){
|
||||
this.$toast.success('Subscription canceled successfully...');
|
||||
this.oneMonth=false;
|
||||
this.twoMonth=false;
|
||||
this.threeMonth=false
|
||||
;
|
||||
this.subscription='';
|
||||
}
|
||||
|
||||
}).catch((error)=>{
|
||||
console.log(error)
|
||||
this.cancel_loading=false;
|
||||
})
|
||||
},
|
||||
fetchSubscription(){
|
||||
this.$axios.post('/api/fetch-subscription').then(({data})=>{
|
||||
console.log(data);
|
||||
this.subscription=data.name;
|
||||
if(data.name=='monthly'){
|
||||
this.oneMonth=true;
|
||||
this.twoMonth=false;
|
||||
this.threeMonth=false;
|
||||
}
|
||||
if (data.name=='sixmonth'){
|
||||
this.oneMonth=false;
|
||||
this.twoMonth=true;
|
||||
this.threeMonth=false;
|
||||
}
|
||||
if (data.name=='yearly'){
|
||||
this.oneMonth=false;
|
||||
this.twoMonth=false;
|
||||
this.threeMonth=true;
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
// export default {
|
||||
|
|
@ -215,6 +271,7 @@ export default {
|
|||
.active-sub{
|
||||
background: #E9C046;box-shadow: 0px 0px 16px 1px rgba(108, 97, 97, 0.05);border-radius: 12px;
|
||||
color:white;
|
||||
background-color:#E9C046 !important;
|
||||
}
|
||||
.sub-card{
|
||||
background: #FFFFFF;box-shadow: 0px 0px 16px 1px rgba(108, 97, 97, 0.05);border-radius: 12px;
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue