OvidijusParsiunas / deep-chat

Fully customizable AI chatbot component for your website
https://deepchat.dev
MIT License
1.26k stars 170 forks source link

Microphone recording audio format issue #204

Open delsoul6104 opened 1 month ago

delsoul6104 commented 1 month ago

When enabling the microphone function to record, I have set the audioRecordingFiles to: audioRecordingFiles: { format: "wav", maxDurationSeconds: 3600, } However, when uploading to the backend, although the file extension is .wav, the format is still parsed as webm. How can this be resolved? Thank you.

OvidijusParsiunas commented 1 month ago

Hi @delsoul6104.

Could you elaborate on what you mean by format is still parsed, are you perhaps using some custom library?

DeepChat audio recording implementation is quite simple. The audio gets recorded via the MediaRecorder object (code here) and the result data from the dataavailable event is used to create a Blob with the specified format/extension that is then used to create an audio file (code here).

I don't think the MediaRecorder object allows the captured data to be encoded in a certain way, hence what I can do here is quite limited. Because you have a clear view of the issue on your end, I would recommend to potentially fork/clone the repository and run Deep Chat locally on your machine. It is quite easy to do and the setup instructions are here. To note, if you do this some property names used in this version of Deep Chat will be different to the latest release, this is because the repo contains all the code that will be released in our next version. The core difference is that request is called connect. All of the other old properties should work just fine - but you might get TS/console warnings which you can ignore. Let me know if you need any further assistance. Thanks!

delsoul6104 commented 1 month ago

When I specify the format as webm, uploading formdata to the backend program developed with .NET Core and saving it locally, the webm format is fine. However, if I set the audio format to mp3 in deep-chat, although the file extension is mp3 when uploaded to the backend, it still parses as webm

delsoul6104 commented 1 month ago

I found another issue with uploading an AUDIO file, :audio="audio" audio:{ "files": {"acceptedFormats": ".mp3,.wav,.webm"}, "button": {"position": "outside-left"} } , after clicking the button and selecting a wav file, upon executing the submit action, an error message appears stating "The program cannot access the file because it is being used by another process" 程序無法存取檔案,因為檔案正由另一個程序使用。 (0x80070020) deepChat.js:3265

I only performed the action of selecting and uploading a file, Note: This issue only occurs with wav or mp3 files, it does not happen with webm files.

OvidijusParsiunas commented 1 month ago

Hmmmmm, I have tested this on my computer and I can upload mp3 files just fine. When you get this error, can you try to upload the mp3 file to some other website to see if it is not an OS or a browser issue?

delsoul6104 commented 1 month ago

Hmmmmm, I have tested this on my computer and I can upload mp3 files just fine. When you get this error, can you try to upload the mp3 file to some other website to see if it is not an OS or a browser issue?

I ran deep-chat locally and uploaded an audio file, but the file is still inaccessible. I also tried uploading the MP3 file to https://www.freeconvert.com/mp3-to-wav for testing, and it was successfully uploaded. My development environment is Windows 11.

delsoul6104 commented 1 month ago

I still cannot upload. Can disable the preview upload audio file,like this image

thank u~~~~

OvidijusParsiunas commented 3 weeks ago

Hi @delsoul6104. I would recommend you to fork/clone the repository and run it locally yourself to see if you can fix the issue. It is actually very easy to do if you follow the setup guide here. You can start by editing the following file. Let me know if you need any further help!

delsoul6104 commented 3 weeks ago

Hi @delsoul6104. I would recommend you to fork/clone the repository and run it locally yourself to see if you can fix the issue. It is actually very easy to do if you follow the setup guide here. You can start by editing the following file. Let me know if you need any further help!

HI @OvidijusParsiunas I have found the issue. It was a problem with my code. Sorry for bothering you. Thank you for your help. Thank you.