AudioPlayer

Demos

How to import

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

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-solid';

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',
    },
];

export default function AudioPlayerDemo() {
    return (
        <div style={{ width: '100%' }}>
            <div style={{ 'margin-top': '10px' }}>
                <AudioPlayer autoPlay={false} audioUrl={audioUrl} />
            </div>
            <div style={{ 'margin-top': '10px' }}>
                <AudioPlayer autoPlay={false} audioUrl={audioUrlObj} />
            </div>
            <div style={{ 'margin-top': '10px' }}>
                <AudioPlayer autoPlay={false} audioUrl={audioUrlArr} />
            </div>
            <div style={{ 'margin-top': '10px' }}>
                <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-solid';

const audioUrlObj = {
    src: '/assets/components/audio1.mp3',
    title: '音频标题',
};

export default function AudioPlayerDemo() {
    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-solid';

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',
    },
];

export default function AudioPlayerDemo() {
    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`
showToolbar	Whether to display the toolbar.	`boolean`	`true`
skipDuration	Seconds skipped by each backward or forward button press.	`number`	`10`
theme	Player theme: dark or light.	`AudioPlayerTheme`	`"dark"`

class, style, ref and native attributes and events land on 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