The following example demonstrates how to use of the react-audio-canvas library. These examples are styled with Tailwind CSS. However, these components can be styles and customized with any CSS framework. These components are not dependent on the Tailwind CSS, even custom CSS Classs are supported.
Along with Tailwind CSS we have also used react-icons for the icons.
Note that these examples are not responsive and they are crafted at very basic level & sloppyly.
Inline styling is also supported, check out the docummentation for more information.
Static <Audio/>
The following example shows how to render a static <Audio/> component with basic styling using tailwind CSS. The Static Audio element will print the Audio representation in the canvas. We have used CSS to position the duration and current audio time. The following component is not responsive.
0s
0s
Dynamic <AudioPlayer/>
The following example shows how to render a dynamic <AudioPlayer/> component with basic styling using tailwind CSS. The following component will animate the bars upon being played, upon pause it won't show any visualization.
0s
0s
Audio Player Progress
The following example shows how to use the <Audio/> component and craft a custom Audio Player with progress bar. The following component will animate the bars upon being played, upon pause it won't show any visualization.
0s
0s
Audio Player Controls
The following example shows how to use the <Audio/> component and craft a custom Audio Player with controls.
0%
0s
0s
Audio From Mic
The following example shows how to use the <AudioStream/> component to grab the live Audio from the mic. The following component will animate the bars upon being played, upon pause it won't show any visualization.
Dynamic Colors
The following example shows how to render the <AudioPlayer/> bars with multiple colors.
0s
0s
Custom Visualizer
The following example shows how to pass a customVisualizer function.
0s
0s
react-audio-canvas is still in it's experimental stage, it's not polished or perfected. However, it does few things quite well that we have discussed in the docs.
We do need more people to support the project and feedback so that it can be a great addition to the react family.We also hope people will actively participate and add more examples to the project.
We do hope this project will grow further in future and by people. Thank you very much for visiting and checking it out!! 🩷