Skip to content

Commit de2de66

Browse files
michalsekmichalsek
authored
Docs: intro page (#265)
* feat: working on intro pagE * feat: its almost something * feat: intro page and couple of improvements in mds * feat: osc sqr frequencies * feat: final touches * fix: perspective * fix: opacity
1 parent 5a5a14f commit de2de66

File tree

8 files changed

+475
-16
lines changed

8 files changed

+475
-16
lines changed

‎README.md‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,10 @@ To learn more about expo development builds, please check out [Development Build
3232

3333
## Documentation
3434

35-
`react-native-audio-api` tries to strictly follow the Web Audi API specification, which can be found at [https://www.w3.org/TR/webaudio/](https://www.w3.org/TR/webaudio/).
36-
<br />
37-
[MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API) is useful resource to get familiar with audio processing basics.
35+
Check out our dedicated documentation page for info about this library, API reference and more:
36+
[https://software-mansion-labs.github.io/react-native-audio-api/](https://software-mansion-labs.github.io/react-native-audio-api/)
37+
38+
You can also check out [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API) for fully detailed description of the audio api.
3839

3940
## Coverage
4041

‎packages/audiodocs/README.md‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
11
# React Native Audio API documentation
22

3-
👉 (here would be link, if I had one)[https://docs.swmansion.com/]
4-
5-
## What's in the docs
6-
7-
TODO:
3+
The docs are available at (https://software-mansion-labs.github.io/react-native-audio-api/)(https://software-mansion-labs.github.io/react-native-audio-api/)

‎packages/audiodocs/docs/fundamentals/getting-started.mdx‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
---
2-
slug: /
3-
sidebar_position: 1
2+
sidebar_position: 2
43
---
54

65
import Tabs from '@theme/Tabs';
@@ -10,11 +9,6 @@ import TabItem from '@theme/TabItem';
109

1110
The goal of _Fundamentals_ is to guide you through the setup process of the Audio API, as well as to show the basic concepts behind audio programming using a web audio framework, giving you the confidence to explore more advanced use cases on your own. This section is packed with interactive examples, code snippets, and explanations. Are you ready? Let's make some noise!
1211

13-
## What is React Native Audio API?
14-
15-
React Native Audio API is a powerful, high-performant and low-level audio library built by [Software Mansion](https://swmansion.com/).
16-
RN Audio API is fully compatible\* with [Web Audio specification](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API), making it easy to write audio-intensive applications for iOS, Android and Web with just one codebase.
17-
1812
## Installation
1913

2014
It takes only a few steps to add Audio API to your project:

‎packages/audiodocs/docs/fundamentals/introduction.mdx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
slug: /
3+
sidebar_position: 1
4+
---
5+
6+
7+
# Introduction
8+
9+
React Native Audio API is an imperative, high-level API for processing and synthesizing audio in React Native Applications. React Native Audio API follows the [Web Audio Specification](https://www.w3.org/TR/webaudio-1.1/) making it easier to write audio-heavy applications for iOS, Android and Web with just one codebase.
10+
11+
import OscillatorSquare from '@site/src/components/LandingPage/OscillatorSquare';
12+
13+
<OscillatorSquare />
14+
15+
16+
## Highlights
17+
18+
- Supports react-native, react-native-web or any web react based project
19+
- API strictly follows the Web Audio API standard
20+
- Blazingly fast, all of the Audio API core is written in C++ to deliver the best performance possible
21+
- Truly native, we use most up-to-date native apis such as AVFoundation, CoreAudio or Oboe
22+
- Modular routing architecture to fit simple (and complex) use-cases
23+
- Sample-accurate scheduled sound playback with low-latency for musical applications requiring the highest degree of rhythmic precision.
24+
- Efficient real-time time-domain and frequency-domain analysis / visualization
25+
- Efficient biQuad filters for most common filtering methods.
26+
- Support for computational audio synthesis
27+
28+
## Motivation
29+
30+
By aligning with the Web Audio specification, we're creating a single API that works seamlessly across native iOS, Android, browsers, and even standalone desktop applications. The React Native ecosystem currently lacks a high-performance API for creating audio, adding effects, or controlling basic parameters like volume for each audio separately - and we're here to bridge that gap!
31+
32+
33+
## Alternatives
34+
35+
### Expo Audio
36+
37+
[Expo Audio](https://docs.expo.dev/versions/latest/sdk/audio/) might be a better fit for you, if you are looking for simple playback functionality, as its simple and well documented API makes it easy to use.

‎packages/audiodocs/prettier.config.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/** @type {import('prettier').Config} */
2+
module.exports = {
3+
plugins: ['prettier-plugin-jsdoc'],
4+
bracketSameLine: true,
5+
printWidth: 80,
6+
singleQuote: true,
7+
trailingComma: 'es5',
8+
tabWidth: 2,
9+
arrowParens: 'always',
10+
};

‎packages/audiodocs/src/components/LandingPage/OscillatorSquare.module.css‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
.oscillatorContainer {
2+
display: flex;
3+
flex-direction: column;
4+
align-items: center;
5+
justify-content: center;
6+
}
7+
8+
.oscillator {
9+
position: relative;
10+
cursor: pointer;
11+
background: transparent;
12+
overflow: visible;
13+
}
14+
15+
.oscillatorBorder {
16+
transform: scale(0.9);
17+
width: 100%;
18+
height: 100%;
19+
border: 4px solid var(--swm-border);
20+
}
21+
22+
.oscillatorFill {
23+
background-color: var(--swm-purple-dark-100);
24+
position: absolute;
25+
top: 0;
26+
left: 0;
27+
transition: all 100ms ease;
28+
z-index: 1;
29+
width: 100%;
30+
height: 100%;
31+
}
32+
33+
.oscillatorPointer {
34+
width: 24px;
35+
height: 24px;
36+
transform: translate(-12px, -12px);
37+
background-color: rgba(0, 0, 0, 0.3);
38+
border-radius: 12px;
39+
position: absolute;
40+
pointer-events: none;
41+
z-index: 2;
42+
}
43+
44+
.oscillatorPointerInnerOut {
45+
width: 36px;
46+
height: 36px;
47+
border-radius: 18px;
48+
left: -6px;
49+
top: -6px;
50+
background-color: rgba(0, 0, 0, 0.1);
51+
position: absolute;
52+
transition: opacity 200ms ease;
53+
animation: scaleIn 200ms ease;
54+
opacity: 1;
55+
}
56+
57+
.oscillatorPointerInnerIn {
58+
width: 36px;
59+
height: 36px;
60+
border-radius: 18px;
61+
left: -6px;
62+
top: -6px;
63+
background-color: rgba(0, 0, 0, 0.1);
64+
position: absolute;
65+
transition: opacity 200ms ease;
66+
animation: scaleOut 200ms ease;
67+
opacity: 0;
68+
}
69+
70+
71+
:root[data-theme='dark'] {
72+
.oscillatorPointer {
73+
background-color: rgba(255, 255, 255, 0.3);
74+
}
75+
76+
.oscillatorPointerInner {
77+
background-color: rgba(255, 255, 255, 0.1);
78+
}
79+
}
80+
81+
@keyframes scaleIn {
82+
from {
83+
transform: scale(0);
84+
}
85+
86+
to {
87+
transform: scale(1);
88+
}
89+
}
90+
91+
@keyframes scaleOut {
92+
from {
93+
transform: scale(1);
94+
}
95+
96+
to {
97+
transform: scale(4);
98+
}
99+
}

0 commit comments

Comments
 (0)