master
parent
c3651f2f86
commit
21640ed93e
|
@ -124,9 +124,17 @@
|
||||||
fill: white;
|
fill: white;
|
||||||
background-color: #e9c046;
|
background-color: #e9c046;
|
||||||
}
|
}
|
||||||
|
.nav-icons.router-link-active{
|
||||||
|
fill: white;
|
||||||
|
background-color: #e9c046;
|
||||||
|
}
|
||||||
.nav-icons.router-link-exact-active svg path{
|
.nav-icons.router-link-exact-active svg path{
|
||||||
fill: white;
|
fill: white;
|
||||||
}
|
}
|
||||||
|
.nav-icons.router-link-active svg path{
|
||||||
|
fill: white;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 396px){
|
@media only screen and (max-width: 396px){
|
||||||
.checklabel{
|
.checklabel{
|
||||||
|
|
|
@ -17,11 +17,11 @@
|
||||||
<ul class="nav float-end px-1 py-1 " style="border-radius: 6px;background-color: #f5f5f5">
|
<ul class="nav float-end px-1 py-1 " style="border-radius: 6px;background-color: #f5f5f5">
|
||||||
|
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<nuxt-link to="/" class="nav-link nav-icons " style="padding: 5px 8px" id="foucused-icon" >
|
<a @click.prevent="playSound" :class="{'router-link-exact-active':play}" class="nav-link nav-icons " style="padding: 5px 8px" id="foucused-icon" >
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="24" viewBox="0 0 19 20" fill="none">
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="24" viewBox="0 0 19 20" fill="none">
|
||||||
<path d="M2.69824 0.055674C1.5521 0.101019 0.5 1.0361 0.5 2.29591V17.7041C0.5 19.3839 2.37138 20.486 3.84082 19.6719L17.7451 11.9678C19.2568 11.1301 19.2568 8.86988 17.7451 8.03224L3.84082 0.328135C3.47346 0.124617 3.08029 0.0405589 2.69824 0.055674ZM2.71582 1.53321C2.84512 1.53266 2.98064 1.56618 3.11328 1.63966L17.0186 9.34376C17.5678 9.64811 17.5678 10.3519 17.0186 10.6563L3.11328 18.3604C2.58272 18.6543 2 18.3104 2 17.7041V2.29591C2 1.99278 2.14535 1.75582 2.35742 1.63087C2.46346 1.5684 2.58652 1.53377 2.71582 1.53321Z" fill="#030504" fill-opacity="0.4"/>
|
<path d="M2.69824 0.055674C1.5521 0.101019 0.5 1.0361 0.5 2.29591V17.7041C0.5 19.3839 2.37138 20.486 3.84082 19.6719L17.7451 11.9678C19.2568 11.1301 19.2568 8.86988 17.7451 8.03224L3.84082 0.328135C3.47346 0.124617 3.08029 0.0405589 2.69824 0.055674ZM2.71582 1.53321C2.84512 1.53266 2.98064 1.56618 3.11328 1.63966L17.0186 9.34376C17.5678 9.64811 17.5678 10.3519 17.0186 10.6563L3.11328 18.3604C2.58272 18.6543 2 18.3104 2 17.7041V2.29591C2 1.99278 2.14535 1.75582 2.35742 1.63087C2.46346 1.5684 2.58652 1.53377 2.71582 1.53321Z" fill="#030504" fill-opacity="0.4"/>
|
||||||
</svg>
|
</svg>
|
||||||
</nuxt-link>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="nav-item dropdown ">
|
<li class="nav-item dropdown ">
|
||||||
|
@ -133,6 +133,22 @@ export default {
|
||||||
name:'HomeBar',
|
name:'HomeBar',
|
||||||
props:{
|
props:{
|
||||||
title:String
|
title:String
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
|
||||||
|
play:false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
playSound(){
|
||||||
|
if(!this.play){
|
||||||
|
this.play=true;
|
||||||
|
}else {
|
||||||
|
this.play=false;
|
||||||
|
}
|
||||||
|
this.$emit('play',this.play)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -7,7 +7,64 @@
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data(){
|
mounted() {
|
||||||
|
let audioCtx = new (window.AudioContext || window.webkitAudioContext)();
|
||||||
|
let upperPercentile = 0.9;
|
||||||
|
let lowerPercentile = 0.1;
|
||||||
|
let buffer = [];
|
||||||
|
let levelValues = [];
|
||||||
|
let upperValue = 0;
|
||||||
|
let lowerValue = 0;
|
||||||
|
|
||||||
|
navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {
|
||||||
|
let source = audioCtx.createMediaStreamSource(stream);
|
||||||
|
|
||||||
|
let bandPass65 = audioCtx.createBiquadFilter();
|
||||||
|
bandPass65.type = "bandpass";
|
||||||
|
bandPass65.frequency.value = 65;
|
||||||
|
bandPass65.Q.value = 1.41;
|
||||||
|
|
||||||
|
let bandPass125 = audioCtx.createBiquadFilter();
|
||||||
|
bandPass125.type = "bandpass";
|
||||||
|
bandPass125.frequency.value = 125;
|
||||||
|
bandPass125.Q.value = 1.41;
|
||||||
|
|
||||||
|
let analyser = audioCtx.createAnalyser();
|
||||||
|
analyser.fftSize = 512;
|
||||||
|
analyser.minDecibels = -100;
|
||||||
|
analyser.maxDecibels = -1;
|
||||||
|
|
||||||
|
source.connect(bandPass65);
|
||||||
|
bandPass65.connect(bandPass125);
|
||||||
|
bandPass125.connect(analyser);
|
||||||
|
|
||||||
|
let dataArray = new Float32Array(analyser.frequencyBinCount);
|
||||||
|
|
||||||
|
function update() {
|
||||||
|
analyser.getFloatFrequencyData(dataArray);
|
||||||
|
buffer.push(...dataArray);
|
||||||
|
if (buffer.length > 10 * audioCtx.sampleRate) {
|
||||||
|
buffer = buffer.slice(-10 * audioCtx.sampleRate);
|
||||||
|
}
|
||||||
|
|
||||||
|
levelValues = buffer.map(val => Math.pow(10, (val / 20)));
|
||||||
|
levelValues = levelValues.map(val => Math.floor(val));
|
||||||
|
|
||||||
|
let sortedData = levelValues.slice().sort((a, b) => a - b);
|
||||||
|
upperValue = sortedData[Math.floor(upperPercentile * sortedData.length)];
|
||||||
|
lowerValue = sortedData[Math.floor(lowerPercentile * sortedData.length)];
|
||||||
|
|
||||||
|
console.log("Upper Percentile in Decimal: " + upperValue);
|
||||||
|
|
||||||
|
|
||||||
|
console.log("Lower Percentile in Decimal: " + lowerValue);
|
||||||
|
requestAnimationFrame(update);
|
||||||
|
}
|
||||||
|
|
||||||
|
update();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
data(){
|
||||||
return{
|
return{
|
||||||
text : "Helo World",
|
text : "Helo World",
|
||||||
}
|
}
|
||||||
|
|
163
pages/band.vue
163
pages/band.vue
|
@ -13,6 +13,12 @@
|
||||||
|
|
||||||
<div><CircleProgress :size="80" :percent="height" :viewport="true" :is-gradient="true" /></div>
|
<div><CircleProgress :size="80" :percent="height" :viewport="true" :is-gradient="true" /></div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-2">
|
||||||
|
<p>Mili Seconds: {{totalms}}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
<table class="table table-bordered">
|
<table class="table table-bordered">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
|
@ -81,6 +87,9 @@
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
{{LevelValues}}
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -140,11 +149,13 @@ export default {
|
||||||
time:{},
|
time:{},
|
||||||
|
|
||||||
Timeframe: 125,
|
Timeframe: 125,
|
||||||
|
timeHeight:0,
|
||||||
UpperPercentile: 0.9,
|
UpperPercentile: 0.9,
|
||||||
LowerPercentile: 0.1,
|
LowerPercentile: 0.1,
|
||||||
LimitA: 2.5,
|
LimitA: 2.5,
|
||||||
LimitB:10.0,
|
LimitB:10.0,
|
||||||
|
|
||||||
|
totalms:0,
|
||||||
audioCtx:{},
|
audioCtx:{},
|
||||||
source:{},
|
source:{},
|
||||||
stream:{},
|
stream:{},
|
||||||
|
@ -260,7 +271,10 @@ export default {
|
||||||
bandPass4000:{},
|
bandPass4000:{},
|
||||||
bandPass8000:{},
|
bandPass8000:{},
|
||||||
bandPass16000:{},
|
bandPass16000:{},
|
||||||
|
lastArrayCouhter:0,
|
||||||
|
firstArrayCounter:0,
|
||||||
|
data125CountArray:[],
|
||||||
|
dt125counter:0
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -311,8 +325,13 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
RMStoDBFS(InputArray){
|
RMStoDBFS(InputArray){
|
||||||
for (var i = 0; i < InputArray.length; i++) {
|
for (var i = 0; i < InputArray.length; i++) {
|
||||||
|
if (typeof InputArray[i] !== 'number' || InputArray[i] <= 0) {
|
||||||
|
// console.log("InputArray[" + i + "] is not a valid number or <=0, skipping...");
|
||||||
|
continue;
|
||||||
|
}
|
||||||
InputArray[i] = 20 * Math.log10(InputArray[i])
|
InputArray[i] = 20 * Math.log10(InputArray[i])
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -333,7 +352,7 @@ export default {
|
||||||
this.IndexMin = Math.round(this.SortedArray.length * this.LowerPercentile);
|
this.IndexMin = Math.round(this.SortedArray.length * this.LowerPercentile);
|
||||||
this.PercentileValue = this.SortedArray[this.IndexMax] - this.SortedArray[this.IndexMin];
|
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);
|
// console.log('percentile Value = ' + this.PercentileValue);
|
||||||
|
|
||||||
if (this.PercentileValue < this.LimitA) {
|
if (this.PercentileValue < this.LimitA) {
|
||||||
this.Result = 1
|
this.Result = 1
|
||||||
|
@ -352,6 +371,27 @@ export default {
|
||||||
|
|
||||||
return {percentile:this.PercentileValue,result:this.ResultABC,band:band};
|
return {percentile:this.PercentileValue,result:this.ResultABC,band:band};
|
||||||
},
|
},
|
||||||
|
reset25(){
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// this.LevelValues65.splice(0,this.firstArrayCounter);
|
||||||
|
// this.LevelValues125.slice(this.firstArrayCounter);
|
||||||
|
// this.LevelValues250.slice(this.firstArrayCounter);
|
||||||
|
// this.LevelValues500.slice(this.firstArrayCounter);
|
||||||
|
// this.LevelValues1000.slice(this.firstArrayCounter);
|
||||||
|
// this.LevelValues2000.slice(this.firstArrayCounter);
|
||||||
|
// this.LevelValues4000.slice(this.firstArrayCounter);
|
||||||
|
// this.LevelValues8000.slice(this.firstArrayCounter);
|
||||||
|
// this.LevelValues16000.slice(this.firstArrayCounter);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// this.ArrayCounter=this.LevelValues65.length;
|
||||||
|
// console.log("Real Array Counter",this.ArrayCounter);
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
stopmeasurement() {
|
stopmeasurement() {
|
||||||
|
@ -368,6 +408,8 @@ export default {
|
||||||
// if (this.height == 100) {
|
// if (this.height == 100) {
|
||||||
// this.stopmeasurement();
|
// this.stopmeasurement();
|
||||||
// console.log(this.LevelValues);
|
// console.log(this.LevelValues);
|
||||||
|
//console.log("Before",this.LevelValues65);
|
||||||
|
|
||||||
this.Percentile_Global= this.Percentile(this.LevelValues,0);
|
this.Percentile_Global= this.Percentile(this.LevelValues,0);
|
||||||
this.Percentile_65=this.Percentile(this.LevelValues65,65)
|
this.Percentile_65=this.Percentile(this.LevelValues65,65)
|
||||||
this.Percentile_125=this.Percentile(this.LevelValues125,125)
|
this.Percentile_125=this.Percentile(this.LevelValues125,125)
|
||||||
|
@ -379,11 +421,12 @@ export default {
|
||||||
this.Percentile_8000=this.Percentile(this.LevelValues8000,8000)
|
this.Percentile_8000=this.Percentile(this.LevelValues8000,8000)
|
||||||
this.Percentile_16000=this.Percentile(this.LevelValues16000,16000)
|
this.Percentile_16000=this.Percentile(this.LevelValues16000,16000)
|
||||||
// this.Percentile(this.LevelValues65);
|
// this.Percentile(this.LevelValues65);
|
||||||
this.ResetLevelValues();
|
// this.ResetLevelValues();
|
||||||
|
|
||||||
|
// console.log("After",this.LevelValues65);
|
||||||
this.height++;
|
this.height++;
|
||||||
// this.ResetLevelValues();
|
// this.ResetLevelValues();
|
||||||
console.log("OK");
|
// console.log("OK");
|
||||||
// }
|
// }
|
||||||
// else {
|
// else {
|
||||||
// this.height++;
|
// this.height++;
|
||||||
|
@ -406,12 +449,42 @@ export default {
|
||||||
//requestAnimationFrame(this.RecentLevel);
|
//requestAnimationFrame(this.RecentLevel);
|
||||||
this.height = 0;
|
this.height = 0;
|
||||||
requestAnimationFrame(this.RecentLevel);
|
requestAnimationFrame(this.RecentLevel);
|
||||||
setTimeout(()=>{
|
// setTimeout(()=>{
|
||||||
this.id = setInterval(this.frame, this.Timeframe);
|
// this.id = setInterval(this.frame, this.Timeframe);
|
||||||
},5000)
|
// },5000)
|
||||||
|
|
||||||
//this.frame();
|
//this.frame();
|
||||||
|
|
||||||
|
|
||||||
|
this.id=setInterval(()=>{
|
||||||
|
|
||||||
|
if(this.timeHeight>40){
|
||||||
|
this.frame();
|
||||||
|
// this.reset25();
|
||||||
|
|
||||||
|
// console.log("Array Counter",this.ArrayCounter);
|
||||||
|
// console.log("Last",this.lastArrayCouhter);
|
||||||
|
// this.lastArrayCouhter=this.ArrayCounter;
|
||||||
|
|
||||||
|
}
|
||||||
|
// 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);
|
||||||
|
// this.data125CountArray[this.dt125counter]=this.ArrayCounter;
|
||||||
|
// ++this.dt125counter;
|
||||||
|
// // console.log('Array',this.data125CountArray);
|
||||||
|
// console.log(this.data125CountArray);
|
||||||
|
|
||||||
|
},this.Timeframe)
|
||||||
},
|
},
|
||||||
|
|
||||||
CancleMeasurement() {
|
CancleMeasurement() {
|
||||||
|
@ -419,6 +492,10 @@ export default {
|
||||||
this.previousPage();
|
this.previousPage();
|
||||||
this.MicError=0;
|
this.MicError=0;
|
||||||
},
|
},
|
||||||
|
Reset125(){
|
||||||
|
this.LevelValues65.shift();
|
||||||
|
this.ArrayCounter=this.LevelValues65.length;
|
||||||
|
},
|
||||||
|
|
||||||
//RMS Value
|
//RMS Value
|
||||||
RecentLevel(){
|
RecentLevel(){
|
||||||
|
@ -492,6 +569,7 @@ export default {
|
||||||
this.RecentRMS65 /= 512;
|
this.RecentRMS65 /= 512;
|
||||||
this.RecentLevelValue65 = Math.sqrt(this.RecentRMS65);
|
this.RecentLevelValue65 = Math.sqrt(this.RecentRMS65);
|
||||||
|
|
||||||
|
// console.log(this.RecentLevelValue65);
|
||||||
// Freq 125
|
// Freq 125
|
||||||
this.RecentRMS125 /= 512;
|
this.RecentRMS125 /= 512;
|
||||||
this.RecentLevelValue125= Math.sqrt(this.RecentRMS125);
|
this.RecentLevelValue125= Math.sqrt(this.RecentRMS125);
|
||||||
|
@ -519,34 +597,61 @@ export default {
|
||||||
this.RecentLevelValue16000= Math.sqrt(this.RecentRMS16000);
|
this.RecentLevelValue16000= Math.sqrt(this.RecentRMS16000);
|
||||||
|
|
||||||
|
|
||||||
this.LevelValues[this.ArrayCounter] = this.RecentLevelValue;
|
this.LevelValues.push(this.RecentLevelValue);
|
||||||
this.LevelValues65[this.ArrayCounter] = this.RecentLevelValue65;
|
this.LevelValues65.push(this.RecentLevelValue65) ;
|
||||||
this.LevelValues125[this.ArrayCounter]=this.RecentLevelValue125;
|
this.LevelValues125.push(this.RecentLevelValue125);
|
||||||
this.LevelValues250[this.ArrayCounter]=this.RecentLevelValue250;
|
this.LevelValues250.push(this.RecentLevelValue250);
|
||||||
this.LevelValues500[this.ArrayCounter]=this.RecentLevelValue500;
|
this.LevelValues500.push(this.RecentLevelValue500);
|
||||||
this.LevelValues1000[this.ArrayCounter]=this.RecentLevelValue1000;
|
this.LevelValues1000.push(this.RecentLevelValue1000);
|
||||||
this.LevelValues2000[this.ArrayCounter]=this.RecentLevelValue2000;
|
this.LevelValues2000.push(this.RecentLevelValue2000);
|
||||||
this.LevelValues4000[this.ArrayCounter]=this.RecentLevelValue4000;
|
this.LevelValues4000.push(this.RecentLevelValue4000);
|
||||||
this.LevelValues8000[this.ArrayCounter]=this.RecentLevelValue8000;
|
this.LevelValues8000.push(this.RecentLevelValue8000);
|
||||||
this.LevelValues16000[this.ArrayCounter]=this.RecentLevelValue16000;
|
this.LevelValues16000.push(this.RecentLevelValue16000);
|
||||||
|
|
||||||
|
if (this.timeHeight > 40){
|
||||||
|
this.LevelValues.shift();
|
||||||
|
this.LevelValues65.shift();
|
||||||
|
this.LevelValues125.shift();
|
||||||
|
this.LevelValues250.shift();
|
||||||
|
this.LevelValues500.shift();
|
||||||
|
this.LevelValues1000.shift();
|
||||||
|
this.LevelValues2000.shift();
|
||||||
|
this.LevelValues4000.shift();
|
||||||
|
this.LevelValues8000.shift();
|
||||||
|
this.LevelValues16000.shift();
|
||||||
|
}
|
||||||
|
// console.log('Level 65',this.LevelValues65.length)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
this.CummulatedLevelValues = this.CummulatedLevelValues + this.RecentLevelValue*1000;
|
this.CummulatedLevelValues = this.CummulatedLevelValues + this.RecentLevelValue*1000;
|
||||||
if (this.ArrayCounter > 200 && this.CummulatedLevelValues < 50){
|
// if (this.ArrayCounter > 200 && this.CummulatedLevelValues < 50){
|
||||||
this.stopmeasurement();
|
// this.stopmeasurement();
|
||||||
this.MicError = 1;
|
// this.MicError = 1;
|
||||||
}
|
// }
|
||||||
|
|
||||||
if (isNaN(this.RecentLevelValue)){
|
// if (isNaN(this.RecentLevelValue)
|
||||||
this.stopmeasurement();
|
// || isNaN(this.RecentLevelValue65)
|
||||||
this.MicError = 1;
|
// || isNaN(this.RecentLevelValue125)
|
||||||
}
|
// || isNaN(this.RecentLevelValue250)
|
||||||
|
// || isNaN(this.RecentLevelValue500)
|
||||||
|
// || isNaN(this.RecentLevelValue1000)
|
||||||
|
// || isNaN(this.RecentLevelValue2000)
|
||||||
|
// || isNaN(this.RecentLevelValue4000)
|
||||||
|
// || isNaN(this.RecentLevelValue16000)
|
||||||
|
// ){
|
||||||
|
// this.stopmeasurement();
|
||||||
|
// this.MicError = 1;
|
||||||
|
// }
|
||||||
|
|
||||||
if (this.RecentLevelValue > 0.5){
|
// if (this.RecentLevelValue > 0.5){
|
||||||
this.stopmeasurement();
|
// this.stopmeasurement();
|
||||||
this.MicError = 2;
|
// this.MicError = 2;
|
||||||
}
|
// }
|
||||||
++this.ArrayCounter;
|
++this.ArrayCounter;
|
||||||
|
// if(this.timeHeight >=40){
|
||||||
|
// this.Reset125()
|
||||||
|
// }
|
||||||
// console.log("Recent Level",this.RecentLevelValue);
|
// console.log("Recent Level",this.RecentLevelValue);
|
||||||
// console.log("Recent Level 65",this.RecentLevelValue65);
|
// console.log("Recent Level 65",this.RecentLevelValue65);
|
||||||
this.AnimationID = requestAnimationFrame(this.RecentLevel);
|
this.AnimationID = requestAnimationFrame(this.RecentLevel);
|
||||||
|
|
|
@ -3,12 +3,12 @@
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-12 px-0 mx-0">
|
<div class="col-12 px-0 mx-0">
|
||||||
<audio autoplay src="/sounds/Forest.aac" loop></audio>
|
<audio ref="audio" src="/sounds/Forest.aac" loop></audio>
|
||||||
<video-background
|
<video-background
|
||||||
src="video/Forest.mp4"
|
src="video/Forest.mp4"
|
||||||
style=" height: 100vh;"
|
style=" height: 100vh;"
|
||||||
>
|
>
|
||||||
<home-bar :title="title" />
|
<home-bar :title="title" v-on:play="playPause" />
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
<div class="adaptive pb-3">
|
<div class="adaptive pb-3">
|
||||||
|
@ -238,12 +238,21 @@ export default {
|
||||||
components: {HomeBar},
|
components: {HomeBar},
|
||||||
data(){
|
data(){
|
||||||
return{
|
return{
|
||||||
title:'Forest soundscape'
|
title:'Forest soundscape',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
handleAnimation: function (anim) {
|
handleAnimation: function (anim) {
|
||||||
this.anim = anim;
|
this.anim = anim;
|
||||||
|
},
|
||||||
|
playPause(play){
|
||||||
|
console.log("Play Pause");
|
||||||
|
if (play){
|
||||||
|
this.$refs['audio'].play();
|
||||||
|
}else {
|
||||||
|
this.$refs['audio'].pause();
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -3,12 +3,12 @@
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-12 px-0 mx-0">
|
<div class="col-12 px-0 mx-0">
|
||||||
<audio autoplay src="/sounds/Meadow.aac" loop></audio>
|
<audio ref="audio" src="/sounds/Meadow.aac" loop></audio>
|
||||||
<video-background
|
<video-background
|
||||||
src="video/Meadow.mp4"
|
src="video/Meadow.mp4"
|
||||||
style=" height: 100vh;"
|
style=" height: 100vh;"
|
||||||
>
|
>
|
||||||
<home-bar :title="title" />
|
<home-bar :title="title" v-on:play="playPause" />
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
<div class="adaptive pb-3">
|
<div class="adaptive pb-3">
|
||||||
|
@ -245,6 +245,15 @@ export default {
|
||||||
methods:{
|
methods:{
|
||||||
handleAnimation: function (anim) {
|
handleAnimation: function (anim) {
|
||||||
this.anim = anim;
|
this.anim = anim;
|
||||||
|
},
|
||||||
|
playPause(play){
|
||||||
|
console.log("Play Pause");
|
||||||
|
if (play){
|
||||||
|
this.$refs['audio'].play();
|
||||||
|
}else {
|
||||||
|
this.$refs['audio'].pause();
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -3,13 +3,9 @@
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-12 px-0 mx-0">
|
<div class="col-12 px-0 mx-0">
|
||||||
<audio autoplay src="/sounds/Tropics.aac" loop></audio>
|
<audio ref="audio" src="/sounds/Tropics.aac" loop></audio>
|
||||||
<video-background
|
<video-background src="video/Tropics.mp4" style=" height: 100vh;">
|
||||||
src="video/Tropics.mp4"
|
<home-bar v-on:play="playPause" :title="title" />
|
||||||
style=" height: 100vh;"
|
|
||||||
>
|
|
||||||
<home-bar :title="title" />
|
|
||||||
|
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
<div class="adaptive pb-3">
|
<div class="adaptive pb-3">
|
||||||
|
@ -248,6 +244,15 @@ export default {
|
||||||
methods:{
|
methods:{
|
||||||
handleAnimation: function (anim) {
|
handleAnimation: function (anim) {
|
||||||
this.anim = anim;
|
this.anim = anim;
|
||||||
|
},
|
||||||
|
playPause(play){
|
||||||
|
console.log("Play Pause");
|
||||||
|
if (play){
|
||||||
|
this.$refs['audio'].play();
|
||||||
|
}else {
|
||||||
|
this.$refs['audio'].pause();
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -3,14 +3,14 @@
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-12 px-0 mx-0">
|
<div class="col-12 px-0 mx-0">
|
||||||
<audio autoplay src="/sounds/Lagoon.aac" loop></audio>
|
<audio ref="audio" src="/sounds/Lagoon.aac" loop></audio>
|
||||||
<video-background
|
<video-background
|
||||||
src="video/bg-video.mp4"
|
src="video/bg-video.mp4"
|
||||||
style=" height: 100vh;"
|
style=" height: 100vh;"
|
||||||
>
|
>
|
||||||
|
|
||||||
|
|
||||||
<home-bar :title="title" />
|
<home-bar v-on:play="playPause" :title="title" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@ -174,6 +174,15 @@ export default {
|
||||||
methods:{
|
methods:{
|
||||||
handleAnimation: function (anim) {
|
handleAnimation: function (anim) {
|
||||||
this.anim = anim;
|
this.anim = anim;
|
||||||
|
},
|
||||||
|
playPause(play){
|
||||||
|
console.log("Play Pause");
|
||||||
|
if (play){
|
||||||
|
this.$refs['audio'].play();
|
||||||
|
}else {
|
||||||
|
this.$refs['audio'].pause();
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<video-background
|
<video-background
|
||||||
src="video/bg-video.mp4"
|
src="/video/bg-video.mp4"
|
||||||
style=" height: 100vh;"
|
style=" height: 100vh;"
|
||||||
>
|
>
|
||||||
|
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="row pt-5 text-center">
|
<div class="row pt-5 text-center">
|
||||||
<div class="d-flex mx-auto justify-content-center ">
|
<div class="d-flex mx-auto justify-content-center ">
|
||||||
<div class="checkmark pt-2 d-block d-sm-inline-block px-1">
|
<nuxt-link to="/onboarding/onboarding2" @click.once="increment(50)" class="checkmark pt-2 d-block d-sm-inline-block px-1">
|
||||||
<input type="radio" class="btn-check" name="options-outlined" id="success-outlined1" autocomplete="off">
|
<input type="radio" class="btn-check" name="options-outlined" id="success-outlined1" autocomplete="off">
|
||||||
<label class="btn pt-4 px-5 checklabel" for="success-outlined1">
|
<label class="btn pt-4 px-5 checklabel" for="success-outlined1">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 41" fill="none">
|
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 41" fill="none">
|
||||||
|
@ -19,7 +19,7 @@
|
||||||
</svg>
|
</svg>
|
||||||
<p class=" text-center">In-Ear</p>
|
<p class=" text-center">In-Ear</p>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</nuxt-link>
|
||||||
|
|
||||||
<nuxt-link to="/onboarding/onboarding2" @click.once="increment(50)" class="checkmark px-1 pt-2 d-inline-block">
|
<nuxt-link to="/onboarding/onboarding2" @click.once="increment(50)" class="checkmark px-1 pt-2 d-inline-block">
|
||||||
<input type="radio" class="btn-check checkmark" name="options-outlined" id="danger-outlined1" autocomplete="off">
|
<input type="radio" class="btn-check checkmark" name="options-outlined" id="danger-outlined1" autocomplete="off">
|
||||||
|
|
|
@ -10,7 +10,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class=" pt-5 text-center">
|
<div class=" pt-5 text-center">
|
||||||
<div class="d-flex mx-auto justify-content-center ">
|
<div class="d-flex mx-auto justify-content-center ">
|
||||||
<div class="checkmark pt-2 px-1 d-block d-sm-inline-block d-inline-block">
|
<nuxt-link to="/onboarding/onboarding3" @click.once="increment(75)" 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" >
|
<input type="radio" class="btn-check" name="options-outlined" id="success-outlined1" autocomplete="off" >
|
||||||
<label class="btn pt-4 px-5 checklabel" for="success-outlined1">
|
<label class="btn pt-4 px-5 checklabel" for="success-outlined1">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 46" fill="none">
|
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 46" fill="none">
|
||||||
|
@ -18,7 +18,7 @@
|
||||||
</svg>
|
</svg>
|
||||||
<p class=" text-center">No</p>
|
<p class=" text-center">No</p>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</nuxt-link>
|
||||||
|
|
||||||
<nuxt-link to="/onboarding/onboarding3" @click.once="increment(75)" class="checkmark pt-2 px-1 d-inline-block">
|
<nuxt-link to="/onboarding/onboarding3" @click.once="increment(75)" class="checkmark pt-2 px-1 d-inline-block">
|
||||||
<input type="radio" class="btn-check checkmark" name="options-outlined" id="danger-outlined1" autocomplete="off">
|
<input type="radio" class="btn-check checkmark" name="options-outlined" id="danger-outlined1" autocomplete="off">
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class=" pt-5 text-center">
|
<div class=" pt-5 text-center">
|
||||||
<div class=" d-flex mx-auto justify-content-center">
|
<div class=" d-flex mx-auto justify-content-center">
|
||||||
<div class="checkmark px-1 pt-2 d-block d-sm-inline-block d-inline-block">
|
<nuxt-link to="/onboarding/onboarding4" @click.once="increment(100)" 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" >
|
<input type="radio" class="btn-check" name="options-outlined" id="success-outlined1" autocomplete="off" >
|
||||||
<label class="btn pt-4 px-5 checklabel" for="success-outlined1">
|
<label class="btn pt-4 px-5 checklabel" for="success-outlined1">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="60" viewBox="0 0 51 56" fill="none">
|
<svg xmlns="http://www.w3.org/2000/svg" width="60" viewBox="0 0 51 56" fill="none">
|
||||||
|
@ -17,7 +17,7 @@
|
||||||
</svg>
|
</svg>
|
||||||
<p class=" text-center">Creativity</p>
|
<p class=" text-center">Creativity</p>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</nuxt-link>
|
||||||
|
|
||||||
<nuxt-link to="/onboarding/onboarding4" @click.once="increment(100)" class="checkmark pt-2 px-1 d-inline-block">
|
<nuxt-link to="/onboarding/onboarding4" @click.once="increment(100)" class="checkmark pt-2 px-1 d-inline-block">
|
||||||
<input type="radio" class="btn-check checkmark" name="options-outlined" id="danger-outlined1" autocomplete="off">
|
<input type="radio" class="btn-check checkmark" name="options-outlined" id="danger-outlined1" autocomplete="off">
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 text-center ">
|
<div class="col-12 text-center ">
|
||||||
<div class="d-flex mx-auto justify-content-center ">
|
<div class="d-flex mx-auto justify-content-center ">
|
||||||
<div class="checkmark px-1 pt-2 d-block d-sm-inline-block d-inline-block">
|
<nuxt-link to="/letsgo" 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" >
|
<input type="radio" class="btn-check" name="options-outlined" id="success-outlined1" autocomplete="off" >
|
||||||
<label class="btn pt-4 px-5 checklabel" for="success-outlined1">
|
<label class="btn pt-4 px-5 checklabel" for="success-outlined1">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="55" height="60" viewBox="0 0 60 46" fill="none">
|
<svg xmlns="http://www.w3.org/2000/svg" width="55" height="60" viewBox="0 0 60 46" fill="none">
|
||||||
|
@ -17,7 +17,7 @@
|
||||||
</svg>
|
</svg>
|
||||||
<p class=" text-center">In-Ear</p>
|
<p class=" text-center">In-Ear</p>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</nuxt-link>
|
||||||
|
|
||||||
<nuxt-link to="/letsgo" class="checkmark px-1 pt-2 d-inline-block">
|
<nuxt-link to="/letsgo" class="checkmark px-1 pt-2 d-inline-block">
|
||||||
<input type="radio" class="btn-check checkmark" name="options-outlined" id="danger-outlined1" autocomplete="off">
|
<input type="radio" class="btn-check checkmark" name="options-outlined" id="danger-outlined1" autocomplete="off">
|
||||||
|
@ -30,7 +30,7 @@
|
||||||
</nuxt-link>
|
</nuxt-link>
|
||||||
</div>
|
</div>
|
||||||
<div class="d-flex mx-auto justify-content-center ">
|
<div class="d-flex mx-auto justify-content-center ">
|
||||||
<div class="checkmark pt-2 pt-sm-3 px-1 d-block d-sm-inline-block">
|
<nuxt-link to="/letsgo" class="checkmark pt-2 pt-sm-3 px-1 d-block d-sm-inline-block">
|
||||||
<input type="radio" class="btn-check" name="options-outlined" id="success-outlined2" autocomplete="off" >
|
<input type="radio" class="btn-check" name="options-outlined" id="success-outlined2" autocomplete="off" >
|
||||||
<label class="btn checklabel py-3 px-5" for="success-outlined2">
|
<label class="btn checklabel py-3 px-5" for="success-outlined2">
|
||||||
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
@ -39,8 +39,8 @@
|
||||||
|
|
||||||
<p class=" text-center">Forest</p>
|
<p class=" text-center">Forest</p>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</nuxt-link>
|
||||||
<div class="checkmark pt-2 px-1 pt-sm-3 d-block d-sm-inline-block">
|
<nuxt-link to="/letsgo" class="checkmark pt-2 px-1 pt-sm-3 d-block d-sm-inline-block">
|
||||||
<input type="radio" class="btn-check " name="options-outlined" id="danger-outlined" autocomplete="off">
|
<input type="radio" class="btn-check " name="options-outlined" id="danger-outlined" autocomplete="off">
|
||||||
<label class="btn checklabel ms-0 ms-lg-3 py-3 px-5 " for="danger-outlined">
|
<label class="btn checklabel ms-0 ms-lg-3 py-3 px-5 " for="danger-outlined">
|
||||||
<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
@ -50,7 +50,7 @@
|
||||||
<p class=" text-center">Meadow</p>
|
<p class=" text-center">Meadow</p>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
</div>
|
</nuxt-link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue