113 lines
3.1 KiB
Vue
113 lines
3.1 KiB
Vue
|
<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 {
|
||
|
mounted() {
|
||
|
console.log("mounted Bandprocessor");
|
||
|
//this.initAudioContext();
|
||
|
},
|
||
|
data() {
|
||
|
return {
|
||
|
audioContext: null,
|
||
|
microphoneStream: null,
|
||
|
audioProcessorNode: null,
|
||
|
errorMessage: null,
|
||
|
};
|
||
|
},
|
||
|
methods: {
|
||
|
async initAudioContext() {
|
||
|
try {
|
||
|
const audioContext = new AudioContext();
|
||
|
console.log("Current URL:", window.location.href);
|
||
|
await audioContext.audioWorklet.addModule("/scripts/octave.js"
|
||
|
|
||
|
);
|
||
|
// Now the 'bandpass-processor' is registered and can be used
|
||
|
} catch (e) {
|
||
|
console.error("Error loading audio worklet:", e);
|
||
|
}
|
||
|
},
|
||
|
async startMicrophone() {
|
||
|
console.log("Start initialization of AudioContext");
|
||
|
try {
|
||
|
this.initializeAudioContext();
|
||
|
await this.requestMicrophoneAccess();
|
||
|
await this.setupAudioProcessing();
|
||
|
console.log("AudioContext sucessful initialized");
|
||
|
} catch (error) {
|
||
|
console.error("Error starting microphone:", error.message);
|
||
|
this.errorMessage = error.message;
|
||
|
}
|
||
|
},
|
||
|
stopMicrophone() {
|
||
|
this.cleanup();
|
||
|
},
|
||
|
initializeAudioContext() {
|
||
|
this.audioContext = new AudioContext();
|
||
|
},
|
||
|
async requestMicrophoneAccess() {
|
||
|
try {
|
||
|
this.microphoneStream = await navigator.mediaDevices.getUserMedia({
|
||
|
audio: true,
|
||
|
});
|
||
|
} catch (error) {
|
||
|
console.error("Error accessing microphone:", error.message);
|
||
|
this.errorMessage =
|
||
|
"Microphone access denied. Please grant permission in your browser settings.";
|
||
|
throw new Error("Microphone access denied.");
|
||
|
}
|
||
|
|
||
|
if (
|
||
|
!this.microphoneStream ||
|
||
|
!(this.microphoneStream instanceof MediaStream)
|
||
|
) {
|
||
|
throw new Error("Microphone stream is not available.");
|
||
|
}
|
||
|
},
|
||
|
async setupAudioProcessing() {
|
||
|
try {
|
||
|
const microphoneSource = this.audioContext.createMediaStreamSource(
|
||
|
this.microphoneStream
|
||
|
);
|
||
|
await this.audioContext.audioWorklet.addModule("/scripts/octave.js");
|
||
|
|
||
|
this.audioProcessorNode = new AudioWorkletNode(this.audioContext, 'octave');
|
||
|
microphoneSource.connect(this.audioProcessorNode);
|
||
|
this.audioProcessorNode.connect(this.audioContext.destination);
|
||
|
} catch (error) {
|
||
|
console.error("Error setting up audio processing:", error.message);
|
||
|
this.errorMessage =
|
||
|
"Error setting up audio processing. Please check your microphone and try again.";
|
||
|
throw new Error("Audio processing setup failed.");
|
||
|
}
|
||
|
},
|
||
|
cleanup() {
|
||
|
if (this.audioContext) {
|
||
|
if (this.audioProcessorNode) {
|
||
|
this.audioProcessorNode.disconnect();
|
||
|
this.audioProcessorNode.port.postMessage({ command: "stop" });
|
||
|
}
|
||
|
this.audioContext.close();
|
||
|
this.resetVariables();
|
||
|
}
|
||
|
},
|
||
|
resetVariables() {
|
||
|
this.audioContext = null;
|
||
|
this.microphoneStream = null;
|
||
|
this.audioProcessorNode = null;
|
||
|
this.errorMessage = null;
|
||
|
},
|
||
|
},
|
||
|
beforeDestroy() {
|
||
|
this.cleanup();
|
||
|
},
|
||
|
};
|
||
|
</script>
|