Merge pull request #3 from imaimai17468/feat/imaimai/readme

add reame.md

README.md

@@ -0,0 +1,60 @@
+# ts-audio-visualizer
+
+[![][license]][license-url] [![][stars]][gh-url] [![][commit]][gh-url]
+
+## 💐 Features
+
+- Microphone audio converted to graphs
+- Cleaner HTML
+- Customizable and themeable
+
+## 📈 Install now !
+
+```
+npm i ts-audio-visualizer
+```
+```
+yarn add ts-audio-visualizer
+```
+
+## 🚀 Use
+
+### 🖊️ Example
+- Just paste this code into tsx!
+```
+<AudioVisualizer
+  mode="bars"
+  height="100px"
+  width="50%"
+  bgColor="#252525"
+  barColor="#efefef"
+/>
+```
+
+### ⚙️ props
+|name|description|type|default|
+|-|-|:-:|:-:|
+|mode|Change the shape of the visualizer|`bars` / `grid` / `wave`|`bars`|
+|height|Change the width of the visualizer|`string`|`100%`|
+|width|Change the height of the visualizer|`string`|`100%`|
+|bgColor|Change the background color of the visualizer|`string`|`#000`|
+|barColor|Change the color of the bars in the visualizer|`string`|`#fff`|
+
+
+---
+
+<div align="center">
+
+🐸 < Please share !
+
+[![][tweet]][tweet-url]
+
+</div>
+
+[tweet-url]: https://twitter.com/intent/tweet?text=ts-audio-visualizer%20%0D%0Ahttps://github.com/imaimai17468/ts-audio-visualizer
+[tweet]: https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Fgithub.com%2Fimaimai17468%2Fts-audio-visualizer
+[license]: https://badgen.net/github/license/imaimai17468/ts-audio-visualizer?color=green
+[license-url]: https://github.com/imaimai17468/ts-audio-visualizer/blob/master/LICENSE
+[stars]: https://badgen.net/github/stars/imaimai17468/ts-audio-visualizer?color=green
+[gh-url]: https://github.com/imaimai17468/ts-audio-visualizer
+[commit]: https://badgen.net/github/last-commit/imaimai17468/ts-audio-visualizer?icon=github&color=green

src/components/AudioVisualizer/_sample.tsx

@@ -16,15 +16,15 @@ return (
       mode="grid"
       height="100px"
       width="50%"
-      bgColor="#efdddd"
-      barColor="#ddefef"
+      bgColor="#efcccc"
+      barColor="#ccefef"
     />
     <AudioVisualizer
       mode="wave"
       height="100px"
       width="50%"
-      bgColor="#ddefdd"
-      barColor="#ddddef"
+      bgColor="#ccefcc"
+      barColor="#ccccef"
     />
   </div>
 )