search

codekraft-studio / vue-record

VueJs components for MediaRecorder API
https://codekraft-studio.github.io/vue-record/
MIT License
94 stars 57 forks source link

Mic icon change. #2

Open ameerzulkarnain opened 4 years ago

ameerzulkarnain commented 4 years ago

Is it possible to change the green microphone icon?

b4dnewz commented 4 years ago

no, unfortunately right now is not possible but is one features I will like to add to this module, but require some changes.

I would like to replace the actual icon which is created by css with a SVG icon optionally customizable or fully replaceable.

b4dnewz commented 4 years ago

at the moment, you can try to override the css code which create the icon, this is the relevant code: https://github.com/codekraft-studio/vue-record/blob/master/src/components/VueRecordAudio.vue#L70-L120

ameerzulkarnain commented 4 years ago

Hi. Thank you for your suggestion. Will look into it

ameerzulkarnain commented 4 years ago

@b4dnewz One more question, on the demo page, why is it when I click download, the download file was a .txt file. Can I know the exact mimetype of the audio file.

b4dnewz commented 4 years ago

it's a html5 thing, since iny demo code I didn't specified the source type on audio element as described in the mdn documentation I guess is just trying to guess the download file type

In the demo page I literally put less effort as possible since is only demonstrative

b4dnewz commented 4 years ago

A few updates, after months that I've been using mdi icons I just discovered it offers SVG code for every icons.

So I can just grab the desired icons from there and embed them in the plugin as default icons, benefit of svg is that the icons can be deeply customized then.

When I've some spare time I'll do this.

ameerzulkarnain commented 4 years ago

Yes. Currently I mod the code to use SVG icon. On other notes, I notice that this package uses MediaRecorder which supports audio/webm mimetype. However, after recording I notice that it recorded the audio as video/webm. It can be played no error on that but I cannot read its total time by using html

b4dnewz commented 4 years ago

mm.. I didn't understand exactly what you mean by it:

However, after recording I notice that it recorded the audio as video/webm. It can be played no error on that but I cannot read its total time by using html tag

If you provide some code or describe further the problem maybe I can help.

ameerzulkarnain commented 4 years ago

After a few research on that, it was actually a chrome bug with MediaRecorder. It will produce a file with mimetype video/webm with no metadata. That's why I cant have the audio duration. If I was using firefox it was working fine because it produces a audio/ogg file.

Reference: https://air.ghost.io/recording-to-an-audio-file-using-html5-and-js/ Look for the issues segment

b4dnewz commented 4 years ago

actually you can customize what mime type you want with props, it's not documented but there is if that help on chrome

the problem with documenting things it's i'm not a native english speaker so it takes me more time to write a understandable and sensible documentation that writing the actual code itself 😄

ameerzulkarnain commented 4 years ago

No worries. I did trywith props already. However it is only working with Firefox. With Chrome, if I set something else other than webm, it will throw error saying MediaRecorder not supported this format.

So I guess it's just a chrome bug

b4dnewz commented 4 years ago

I'm working on the customizable icons, probably tomorrow I will release a beta version with the new features, if you want to help me testing it.

The default icon style is quite different, but I've added a bunch of style related props to customize it in many ways and also a slot to replace the inner icon. I'm not quite sure how to deal with the animation, previously there was a pulse animation but doesn't play well with the customizations since is wrote in css.

Here a screenshot of the beta branch where i'm working on it.

beta_screenshot

HarrisWebApps commented 4 years ago

Nice work Filippo ....If you are not inclined to write your own css for the animated icon...you may want to check out this codepen that animates a mic using the animate.css lib:

Speech to text with Vue and Vuetify using Web SpeechRecognition

Animate CSS @3.5.2

b4dnewz commented 4 years ago

awesome, @HarrisWebApps I've just checked it and it's exactly what I was looking for, an example of speech recognition which relay on a graphic framework (such as vutify, in this case), it also make me think a possible code refactoring

If you are not inclined to write your own css for the animated icon

Exactly, I'm not a good designer nor very good with styles and I would like to write this plugin as much "general" as possible to let the final users handle their styles and animations as they prefer

As soon as I can I'll write this little refactor and publish a new version

joaokrabbe commented 4 years ago

Hi @b4dnewz . Great compenent, excelent job, congrats. I wondering if you have finished this feature "Mic icon change". And if you could release it on master and npm?