1
I am doing a project in Vue.js, where an audio file is generated. After this audio is generated, I want to be able to run it during the same run.
Here is the component that Gara the audio player (is conditionally connected by this variable "audio", which is only true after the audio has already been created):
<div ref="base" id="base">
<solution-base
@generate-audio="generateAudio">
</solution-base>
<audio-base v-if="audio" class="audio" :key="enteredText"></audio-base>
</div>
And this is where the call to the API that produces the audio is made:
async generateAudio(enteredText,selected){
this.audio = true;
await api.post('/createAudio', null, { params: {
text:enteredText,
tool: selected
}})
}
But when the page is accessed this error appears:
Error: Can’t resolve '.. /audio.wav' in '/Users/pilarfernandez/Projetospuc/text-to-Speech-Tester/project/src/Components'
I understand that this error is because, in fact, the file does not exist in the folder. However, the file would be generated during execution and with the error is not possible since the page does not load.
How can I make HTML not give this error if the file does not exist, and create it during execution?
Hello! Um, I’m not sure I understand your code, if you can put the component code where the audio is read, since the error is happening there
– Pliavi
I don’t understand very well. Are you wanting to create a file on the user’s machine? If so, remember that a Vue application runs on the client (browser) and for obvious security reasons is not allowed to create files on the filesystem. If that’s the problem, what you can do is... create a
Blobwith the contents of the file and trigger an event to download it.– Renan Gomes
Yes, I’m creating the file on the user’s machine. This is being done in the backend (Node.js), so in Vue it would just read it anyway.
– user214762