AudioPlayer

Demos

How to import

import { AudioPlayer } from '@fibrous/semi-ui-react';

Basic Usage

Basic usage by passing audio URL through audioUrl.
audioUrl supports string, string array, object, and object array. See AudioPlayer for detailed parameters.

00:00

音频标题

00:00

音频标题1

00:00

Code

import { AudioPlayer } from '@fibrous/semi-ui-react';

export default function AudioPlayerDemo() {
    const audioUrl = '/assets/components/audio2.mp3';
    const audioUrlArr = ['/assets/components/audio1.mp3', '/assets/components/audio2.mp3'];
    const audioUrlObj = {
        src: '/assets/components/audio1.mp3',
        title: '音频标题',
        cover: '/assets/root-web-sites/abstract.jpg',
    };
    const audioUrlArrObj = [
        {
            src: '/assets/components/audio1.mp3',
            title: '音频标题1',
            cover: '/assets/root-web-sites/abstract.jpg',
        },
        {
            src: '/assets/components/audio2.mp3',
            title: '音频标题2',
            cover: '/assets/root-web-sites/abstract.jpg',
        },
    ];

    return (
        <div style={{ width: '100%' }}>
            <div style={{ marginTop: 10 }}>
                <AudioPlayer autoPlay={false} audioUrl={audioUrl} />
            </div>
            <div style={{ marginTop: 10 }}>
                <AudioPlayer autoPlay={false} audioUrl={audioUrlObj} />
            </div>
            <div style={{ marginTop: 10 }}>
                <AudioPlayer autoPlay={false} audioUrl={audioUrlArr} />
            </div>
            <div style={{ marginTop: 10 }}>
                <AudioPlayer autoPlay={false} audioUrl={audioUrlArrObj} />
            </div>
        </div>
    );
}

Set showToolbar to false to hide the toolbar: the volume, backward, forward, speed and reload buttons.

音频标题

00:00

Code

import { AudioPlayer } from '@fibrous/semi-ui-react';

export default function AudioPlayerDemo() {
    const audioUrlObj = {
        src: '/assets/components/audio1.mp3',
        title: '音频标题',
    };

    return (
        <div style={{ width: '100%' }}>
            <AudioPlayer autoPlay={false} audioUrl={audioUrlObj} showToolbar={false} />
        </div>
    );
}

Theme

Set the audio player theme through theme, supports light and dark, default is dark. The speed menu and the volume popup render outside the player, so each carries its own theme modifier class matching theme (such as semi-audio-player-control-volume-light) and follows the theme

音频标题1

00:00

Code

import { AudioPlayer } from '@fibrous/semi-ui-react';

export default function AudioPlayerDemo() {
    const audioUrlArrObj = [
        {
            src: '/assets/components/audio1.mp3',
            title: '音频标题1',
            cover: '/assets/root-web-sites/abstract.jpg',
        },
        {
            src: '/assets/components/audio2.mp3',
            title: '音频标题2',
            cover: '/assets/root-web-sites/abstract.jpg',
        },
    ];

    return (
        <div style={{ width: '100%' }}>
            <AudioPlayer audioUrl={audioUrlArrObj} theme="light" />
        </div>
    );
}

Keyboard and focus

Play (pause), previous, next, backward, forward, volume and reload are native buttons. Each is one Tab stop, triggered with Enter or Space; the volume button toggles mute.
The progress bar is a native range and one Tab stop: the arrow keys change it by 1 second, PageUp and PageDown by a tenth of the duration, and Home and End jump to the ends.
The volume popup, a dialog named "Volume", opens when the volume button receives focus. Down Arrow or Up Arrow moves focus to the volume slider inside it, which takes the same keys as the progress bar, with the arrow keys changing it by 1%. Escape closes the popup and returns focus to the volume button.
The speed menu opens when the speed button receives focus. Down Arrow and Up Arrow move focus to the first and last item; inside the menu, the up and down arrow keys, Home and End move between items, Enter or Space selects one, and Escape closes the menu. The speed button is named by its purpose followed by the current speed (such as "Playback speed 1.0x"), and its items are radio items (menuitemradio) that mark the current speed with aria-checked.

API Reference

Props

Property	Description	Type	Default
audioUrl	Audio address: a string, an `AudioInfo` object, or an array of them. An array shows the previous and next track buttons.	`AudioUrl`	-
autoPlay	Whether to play automatically.	`boolean`	`false`
className	Class name of the root element.	`string`	-
ref	Reference to the root `div` element.	`Type`	-
showToolbar	Whether to show the toolbar: the volume, backward, forward, playback rate and refresh buttons.	`boolean`	`true`
skipDuration	Seconds skipped by each backward or forward button press.	`number`	`10`
style	Inline style of the root element.	`React.CSSProperties`	-
theme	Player theme: `dark` or `light`.	`AudioPlayerTheme`	`"dark"`

Native attributes and events not listed above (such as aria-label, id and onClick) are spread onto the root div. Native media events of the audio element (such as onTimeUpdate) cannot be listened to: they do not bubble to the root, so the listener never fires.

The root gets role="group" when it has aria-label or aria-labelledby.

AudioInfo

Property	Description	Type	Default
src	Audio address	string	-
title	Audio title	string	-
cover	Cover image	string	-

Demos

How to import

Basic Usage

Hide Toolbar

Theme

Keyboard and focus

API Reference

AudioPlayer

AudioInfo