AudioPlayer

Demos

How to import

<script setup lang="ts">
    import { AudioPlayer } from '@fibrous/semi-ui-vue';
</script>

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

<script setup lang="ts">
    import { AudioPlayer } from '@fibrous/semi-ui-vue';

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

<template>
    <div style="width: 100%">
        <div style="margin-top: 10px">
            <AudioPlayer :audioUrl="audioUrl" :autoPlay="false" />
        </div>
        <div style="margin-top: 10px">
            <AudioPlayer :audioUrl="audioUrlObj" :autoPlay="false" />
        </div>
        <div style="margin-top: 10px">
            <AudioPlayer :audioUrl="audioUrlArr" :autoPlay="false" />
        </div>
        <div style="margin-top: 10px">
            <AudioPlayer :audioUrl="audioUrlArrObj" :autoPlay="false" />
        </div>
    </div>
</template>

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

音频标题

00:00

Code

<script setup lang="ts">
    import { AudioPlayer } from '@fibrous/semi-ui-vue';

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

<template>
    <div style="width: 100%">
        <AudioPlayer :audioUrl="audioUrlObj" :autoPlay="false" :showToolbar="false" />
    </div>
</template>

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

<script setup lang="ts">
    import { AudioPlayer } from '@fibrous/semi-ui-vue';

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

<template>
    <div style="width: 100%">
        <AudioPlayer :audioUrl="audioUrlArrObj" theme="light" />
    </div>
</template>

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`	`undefined`
autoPlay	Whether to play automatically.	`boolean`	`semiDefault("AudioPlayer", "autoPlay", false)`
showToolbar	Whether to display the toolbar.	`boolean`	`semiDefault("AudioPlayer", "showToolbar", true)`
skipDuration	Seconds skipped by each backward or forward button press.	`number`	`semiDefault("AudioPlayer", "skipDuration", 10)`
theme	Player theme: dark or light.	`AudioPlayerTheme`	`semiDefault("AudioPlayer", "theme", "dark")`

Events

Event	Description	Callback parameters
None

Slots

Slot	Description	Scope parameters
None

Exposes

Name	Description	Type
None

class, style and native attributes are passed through attrs to the root div. Native media events of the audio element (such as @timeupdate) 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