grishkovelli / vue-audio-recorder Goto Github PK
View Code? Open in Web Editor NEWA simple audio recorder for VueJS applications
License: MIT License
A simple audio recorder for VueJS applications
License: MIT License
With the addition of wav the uploading component is now incorrect with .mp3 for the filename.
It'd bring much more flexibility to make uploading just a callback function or similar to allow support for like direct to s3 uploading etc.
I want to use audio recording together with speech to text apis, is it possible to get the raw audio buffer recorded to pass it to an external api directly without using the upload-url ?
To make this awesome package even more usefull... would be possible to make it a single audio recorder like a whatsapp audio recorder for example... release to send
Check #14
Wav support has been added but not available with npm current version, what version does implement this ?
It's that possible to use props to doesn't show the audio player?
How can I clear the record list after successful upload?
Another point, it's possible to get the actual value of the player on a pause-recording event, just like after-recording do?
Tks
Recordings are extremely low volume.
Is there any way to adjust the gain?
as you can see, "format" prop to tell component to generate other format (like wav) is documented on this project's README but it's not published (until this last version - 3.0.1).
I guess should publish new version with this feature or remove it from README 🙏
I tried testing this in Quasar and get the following error:
vue.runtime.esm.js?5593:619 [Vue warn]: Failed to mount component: template or render function not defined.
Imported correctly, registered component, added header to data, and add stub method for callbacks
There is an issue with upload, "this.record" doesn't exist in uploader.vue component.
I like to use a custom Axios instance with appropriate Auth
headers, etc. It would be nice to use that (via callback, etc) rather than have to provide a url.
Can you add a save or upload button under the player for better UX instead of clicking on the recording and save using that small save button?
Great work on this project!
One issue I've run into is that the successful-upload method gets called multiple times when I upload more than once. I can see this because in my callback I'm showing a message using $noty, and the noty will appear one more time than the previous upload for each upload.
Any suggestions would be appreciated.
Is it possible to work on the mobile?
Thanks for creating this package, looks great!
I noticed the file sizes of the recorded audio is quite large. Is it possible to compress the WAV files on the fly or somehow reduce the recorded file size?
Hi,
I am getting error as :
Uncaught TypeError: Cannot read property 'post' of undefined
Below is the code:
<audio-recorder
upload-url="/api/upload/audio"
:attempts="1"
:headers="headers"
:time="1"
:start-record="callback"
:stop-record="callback"
:start-upload="mystartfunction"
:successful-upload="mysuccessfunction"
:failed-upload="myfailfunction"/>
Please suggest
I just wanted a library easy to use and now I love this library.
But can anyone tell me how to save recorded files to user's device.
Maybe computer, phone or other thing. It should create a folder named something I gave.
And then save all the things in that folder. And read everything from that folder.
For windows maybe in documents folder on mobile in the storage and on the others pcs too.
There's a really weird bug that slows down the recordings by a lot. Using anything bellow 3.0.1 fixes the issue, so it must be something pushed recently. I can provide more info if needed.
如题,电脑端可以,用手机访问不行,是否有解决的办法
Hello, the widget is looking ace, thanks!
However, my passed functions to event props are not working.
Even on demo here https://jsfiddle.net/L8v5yqc6/
Chrome on macOS.
Hello,
thanks for this amazing plugin.
I want to change the 'audio' key name with a custom one, for example, 'file'.
I could not find any prop for it, is there any possibilities to do it?
Hello,
Do you have any plans to add tests?
Thanks.
I am trying to upload recorded file using
<audio-recorder v-if="showRecorder"
upload-url="some url"
with some url being linked to a php callback like :
admin_url( 'admin-ajax.php' )."?action=my_action
The callback is called on server side, and audio file can be retrieve.
Nevertheless, how to add more data in upload URL call ?
https://github.com/grishkovelli/vue-audio-recorder/blob/master/src/components/uploader.vue
while val==0 something error maybe happen
_onChangeVolume (val) {
if (val) {
this.player.volume = val
}
}
hi !
i'm uploading the recorded file manually with :after-recording event, but I want to delete it after the uploading is successfull.
how can i do that ?
Hello! The library works well, thanks!
But I got an error message saying,
Error in mounted hook: "TypeError: Cannot read property '$on' of undefined"
I think the error occurred because this.$eventBus in recorder's mounted hook is undefined.
Do you know how to fix it? Thanks!
Hi,
I've loaded Vue into a wordpress plugin, but can't see any recorder appearing, although no error, and recorder loaded as described in your example.
Vue.prototype.$http = axios
Vue.use(VueAudioRecorder);
var vm = new Vue({
el: document.querySelector('#mount'),
components: {VueAudioRecorder},
methods: {
callback (msg) {
console.debug('Event: ', msg)
}
}
})
Can you please advise why the recorder is not showing up ?
Please locate #mount in this page
Thank you very much
There hasn't been an npm publish since December 2018. There have been a number of fixes/tweaks since then that would be great to get incorporated :)
Hi,
Great module, thanks a lot!
I have a feature request: is it possible to make headers['Content-Type'] = `multipart/form-data; boundary=${data._boundary} optional.
The API I use doesn't accept that, I configed 'Content-Type': 'application/octet-stream', but I see uploader.vue adds the above header hard coded.
-- Thanks in advance, Joris
Hi, the demo looks great. with the audio player within the same box of the recorder. It also allows you to play the file when you click the recording. Is it possible to upload the source code or have a better documentation?
Hi,
As per the ToDo's in the README, you still need to have Wave conversion. Can you tell me what needs to be done on this, I can try and take a look, it's a feature I need.
Kind Regards,
Fox
Can you help me ?
<audio-recorder v-if="showRecorder"
upload-url=""
filename="ninja"
format="mp3"
:attempts="1"
:headers="headers"
:after-recording="afterRecording"
:bit-rate="192"/>
When pausing the recording and then resuming, the final uploaded track is just the last one.
Perhaps I've missed something, but it would be nice to be able to remove a recording in the list before uploading without having to close the dialog and restart. For example, if I have 3 recordings, and I botch the 4th recording, I don't want to have to start over, or upload all 4 with the bad one, before recording a 5th. 🤔
I want to upload multiple files which i have recorded at once not one by one ?
hi thanks for awesome package
how i can select first voice after stop recording?
The early recording stream lost when recording is a pause and start it again.
The code works well when using the default laptop microphone with 44100
sampling rate. However, the same done with a bluetooth earpiece is completely messed up and cannot be used.
Is there something I can do to get this working or is it a major fix?
Hi, your component is amazing, but when user does not grant access to microphone, the record button keep in recording state, it should go back to initial state until user allows it, this issue is related to #20 too, because it will start waiting for tracks.
Thanks.
I see this was supposed to be addressed in #17 but I've just installed the npm package, but I am still running into this problem. The jsfiddle provided in the demo also seems to have this issue: https://jsfiddle.net/grishkovelli/rb1anxyj/.
I get an error thrown here: https://github.com/grishkovelli/vue-audio-recorder/blob/master/src/lib/recorder.js#L52
The code works well when using the default laptop microphone with 44100
sampling rate. However, the same done with a bluetooth earpiece is completely messed up and cannot be used.
Is there something I can do to get this working or is it a major fix?
Hey thank you for this amazing component really like the design and simplicity of it.
I would like to be able to listen to the audio Context so that i can attach a Wavesurfer.js to get some visiualization of the audio being recorded or selected.
is there any possible way that can be easily done?
thanks.
Hey,
The record volume to low.
Is there a build in solution to set the volume as hight by default?
https://jsfiddle.net/grishkovelli/rb1anxyj/ does not work on Chrome, Firefox and Safari 11.1.2 (13605.3.8), on mac.
On chrome: "35:15 Uncaught TypeError: console.debug is not a function" in the status.
Just got strange low frequency sound when recording mp3 with sampleRate=16000, while sound recorded with 44100 sample rate is normal.
Safari on iphone does not respond to clicking the recording, does it need to get permission
Hi there!
Is there a way to upload recorded file by myself calling axios and appending recorded file?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.