122 lines
3.0 KiB
Vue
122 lines
3.0 KiB
Vue
<template>
|
|
<div v-show="false" id="hiddenAudio">
|
|
<AudioTagWebAudio
|
|
ref="audioElement"
|
|
:src="audioSrc"
|
|
:volume="volume"
|
|
:play="playing"
|
|
:master-gain="masterGain"
|
|
@canplay="onCanPlay"
|
|
/>
|
|
<div class="noise-controlled-band">
|
|
Gain: {{ gainValueDB }}
|
|
<RNBOControlValue
|
|
:center-frequency="centerFrequency"
|
|
:status="playing"
|
|
:attack="masterAttack"
|
|
:release="masterRelease"
|
|
:q-factor="qFactor"
|
|
@control-value-change="handleValueChange"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, ref, computed } from 'vue'
|
|
import type { Logger } from 'pino'
|
|
import RNBOControlValue from '../../tests/ControlValues/RNBOControlValue.vue'
|
|
import AudioTagWebAudio from '../../AudioTagWebAudio.vue'
|
|
import { calculateNormalizedVolume } from '~/lib/AudioFunctions'
|
|
import { useAudioStore } from '~/stores/audio'
|
|
|
|
export default defineComponent({
|
|
name: 'NoiseControlledWebAudio3Band',
|
|
components: {
|
|
AudioTagWebAudio,
|
|
RNBOControlValue
|
|
},
|
|
props: {
|
|
centerFrequency: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
masterGain: {
|
|
type: GainNode,
|
|
required: true
|
|
},
|
|
masterAttack: {
|
|
type: Number,
|
|
default: 120000 * 2,
|
|
required: false
|
|
},
|
|
masterRelease: {
|
|
type: Number,
|
|
default: 144000 / 1000,
|
|
required: false
|
|
},
|
|
qFactor: {
|
|
type: Number,
|
|
required: true
|
|
}
|
|
},
|
|
emits: ['ready'],
|
|
setup (props, { emit }) {
|
|
const audioElement = ref<InstanceType<typeof HTMLElement> | null>(null)
|
|
const gainValueDB = ref(0)
|
|
const volume = ref(1)
|
|
const playing = computed(() => { return useAudioStore().getPlaying }) // the playing state is bind to the audioStore
|
|
const logger = useNuxtApp().$logger as Logger
|
|
const audioSrc = computed(() => {
|
|
try {
|
|
const frequency = props.centerFrequency
|
|
|
|
let band = ''
|
|
if (frequency < 500) {
|
|
band = 'low_band'
|
|
} else if (frequency >= 500 && frequency < 4000) {
|
|
band = 'mid_band'
|
|
} else {
|
|
band = 'high_band'
|
|
}
|
|
|
|
const path = `/masking/3bands/${band}_256kbps.webm`
|
|
const fullPath = `${window.location.origin}${encodeURI(path)}`
|
|
return fullPath
|
|
} catch (error) {
|
|
return ''
|
|
}
|
|
})
|
|
const handleValueChange = (data: { frequency: number; value: number }) => {
|
|
// Convert dB to linear scale
|
|
gainValueDB.value = calculateNormalizedVolume(data.value)
|
|
volume.value = gainValueDB.value
|
|
}
|
|
|
|
const onCanPlay = () => {
|
|
logger.info(`Audio for frequency ${props.centerFrequency} is ready to play`)
|
|
emit('ready', props.centerFrequency)
|
|
}
|
|
|
|
return {
|
|
audioElement,
|
|
audioSrc,
|
|
gainValueDB,
|
|
volume,
|
|
handleValueChange,
|
|
onCanPlay,
|
|
playing
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.noise-controlled-band {
|
|
border: 1px solid #ccc;
|
|
padding: 10px;
|
|
margin-bottom: 10px;
|
|
border-radius: 5px;
|
|
}
|
|
</style>
|