AudioPlayer
AudioPlayer combines audio playback controls with a seekable waveform.
Source
LLM docs
Package
npm install @plocks/mediaExamples
1
Properties
82
Basics
Point
source at a URL or a bundled clip and pass its peaks to draw the real waveform; the player handles loading, play/pause, seeking and progress. Playback requires expo-audio; without it the controls render but report a missing-module error.Loading demo…
import { AudioPlayer } from '@plocks/media';
import { Block } from '@plocks/ui';
const MELODY_PEAKS = [
0.765, 0.683, 0.598, 0.528, 0.464, 0.407, 0.36, 0.316, 0.277, 0.243, 0.949, 0.876,
0.776, 0.698, 0.592, 0.533, 0.477, 0.407, 0.365, 0.323, 0.528, 0.922, 0.851, 0.738,
0.643, 0.569, 0.489, 0.438, 0.383, 0.34, 0.297, 0.954, 0.885, 0.798, 0.693, 0.606,
0.525, 0.468, 0.41, 0.354, 0.308, 0.925, 0.919, 0.828, 0.727, 0.64, 0.557, 0.474,
0.415, 0.376, 0.338, 0.297, 0.997, 0.869, 0.775, 0.667, 0.595, 0.51, 0.444, 0.408,
0.356, 0.316, 1, 0.872, 0.786, 0.691, 0.619, 0.555, 0.483, 0.4, 0.359, 0.322,
0.288, 0.941, 0.835, 0.748, 0.661, 0.588, 0.506, 0.439, 0.39, 0.342, 0.306, 0.272,
0.238, 0.203, 0.148, 0.13, 0.114, 0.101, 0.088, 0.078, 0.068, 0.06, 0.053, 0.047,
];
export function Demo() {
return (
<Block fullWidth>
<AudioPlayer
source={require('../../../../assets/sounds/melody.mp3')}
peaks={MELODY_PEAKS}
fullWidth
/>
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources