AudioPlayer

AudioPlayer wraps expo-audio with a seekable Waveform, transport controls and progress callbacks. Times in PlaybackState, ProgressData and the ref methods are milliseconds.

Playback needs the optional expo-audio peer dependency (npx expo install expo-audio); without it the component renders and reports a missing-module error rather than throwing.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/ui

Examples

⁽¹⁾

Properties

⁽⁷⁶⁾

Basic Usage

Point source at a URL or a bundled clip and 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
 
{
 
Block
,
 
Text
 
}
 
from
 
'@platform-blocks/ui'
;
import
 
{
 
AudioPlayer
 
}
 
from
 
'../../AudioPlayer'
;
 
// Peaks measured from the same bundled clip the player loads.
import
 
{
 MELODY_PEAKS 
}
 
from
 
'../../../Waveform/demos/data'
;
 
export
 
default
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
 
gap
=
"sm"
 
w
=
"100%"
 
maxW
=
{
520
}
>
      
<AudioPlayer
        
source
=
{
require
(
'../../../../assets/sounds/melody.mp3'
)
}
        
peaks
=
{
MELODY_PEAKS
}
        
h
=
{
72
}
        showMetadata
        
metadata
=
{
{
 title
:
 
'Arpeggio'
,
 artist
:
 
'Demo Tones'
 
}
}
        
controlsPosition
=
"top"
        
controls
=
{
{
 playPause
:
 
true
,
 volume
:
 
true
,
 speed
:
 
true
,
 waveform
:
 
true
 
}
}
      
/>
      
<Text
 
variant
=
"small"
 
colorVariant
=
"muted"
>
        
Playback
 runs through 
`expo-audio`
.
 
Pass
 
`peaks`
 to draw the real waveform
,
 then tap it to
        seek — the progress line follows playback either way
.
      
</Text
>
    
</Block
>
  
)
;
}

Platform Blocks

A comprehensive React Native design system with components that work seamlessly across iOS, Android, and Web.

Quick Links

Components Charts Hooks

Documentation

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap