Mic icon change.

[ameerzulkarnain]

Is it possible to change the green microphone icon?

[b4dnewz]

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]

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]

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

[ameerzulkarnain]

@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]

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]

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]

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 tag

[b4dnewz]

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]

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]

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]

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]

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.

[HarrisWebApps]

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]

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]

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?