Skip to content

Commit

Permalink
fix: first tutorial wanna-be urls and finish example code
Browse files Browse the repository at this point in the history
  • Loading branch information
michalsek committed Dec 17, 2024
1 parent 940b906 commit e23123b
Show file tree
Hide file tree
Showing 3 changed files with 38 additions and 5 deletions.
38 changes: 35 additions & 3 deletions packages/audiodocs/docs/fundamentals/lets-make-some-noise.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export default function App() {
const audioContext = new AudioContext();

const audioBuffer = await FileSystem.downloadAsync(
'https://docs.swmansion.com/audio-api/audio/music/example-music-01.mp3',
'https://software-mansion-labs.github.io/react-native-audio-api/audio/music/example-music-01.mp3',
`${FileSystem.documentDirectory}/example-music-01.mp3`
).then(({ uri }) => audioContext.decodeAudioDataSource(uri));
};
Expand All @@ -62,8 +62,40 @@ We have used `decodeAudioDataSource` method of the `AudioContext`, which takes u

## Play the audio

Last and final step is to create `AudioBufferSourceNode`. It is one of few nodes that are starting points in the audio graph and can "produce" sounds. All of them have `start` and `stop` functions.
We can assign the `audioBuffer` obtained in previous step to finally play it!
Last and final step is to create `AudioBufferSourceNode`, connect it to the `AudioContext` destination and start playing the sound. For the purpose of this guide, we will play the sound for only 10 seconds.

```jsx {15-16,18-20}
import React from 'react';
import * as FileSystem from 'expo-file-system';
import { View, Button } from 'react-native';
import { AudioContext } from 'react-native-audio-api';

export default function App() {
const handlePlay = async () => {
const audioContext = new AudioContext();

const audioBuffer = await FileSystem.downloadAsync(
'https://software-mansion-labs.github.io/react-native-audio-api/audio/music/example-music-01.mp3',
`${FileSystem.documentDirectory}/example-music-01.mp3`
).then(({ uri }) => audioContext.decodeAudioDataSource(uri));

const playerNode = audioContext.createBufferSource();
playerNode.buffer = audioBuffer;

playerNode.connect(audioContext.destination);
playerNode.start(audioContext.currentTime);
playerNode.stop(audioContext.currentTime + 10);
};

return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Button onPress={handlePlay} title="Play sound!" />
</View>
);
}
```

And that's it! You have just played Your first sound using react-native-audio-api. You can hear how it works in the live example below:

import InteractiveExample from '@site/src/components/InteractiveExample';
import LetsMakeSomeNoise from '@site/src/examples/LetsMakeSomeNoise/Component';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,15 @@ export default function App() {
const audioContext = new AudioContext();

const audioBuffer = await audioContext.decodeAudioDataSource(
'/audio/music/example-music-01.mp3'
'/react-native-audio-api/audio/music/example-music-01.mp3'
);

const playerNode = audioContext.createBufferSource();
playerNode.buffer = audioBuffer;

playerNode.connect(audioContext.destination);
playerNode.start(audioContext.currentTime);
playerNode.stop(audioContext.currentTime + 10);
};

return (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export default function App() {
const audioContext = new AudioContext();

const audioBuffer = await FileSystem.downloadAsync(
'https://docs.swmansion.com/audio-api/audio/music/example-music-01.mp3',
'https://software-mansion-labs.github.io/react-native-audio-api/audio/music/example-music-01.mp3',
`${FileSystem.documentDirectory}/example-music-01.mp3`
).then(({ uri }) => audioContext.decodeAudioDataSource(uri));

Expand Down

0 comments on commit e23123b

Please sign in to comment.