音频播放器 - Semi Design Next

代码演示

如何引入

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

基本用法

基本使用，通过audioUrl传入音频地址
audioUrl 可以传入字符串，字符串数组，对象，对象数组，具体参数参考 AudioPlayer

00:00

音频标题

00:00

音频标题1

00:00

代码

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>
    );
}

隐藏工具栏

showToolbar 设置为 false 时隐藏工具栏，即音量、后退、前进、倍速与重新加载按钮。

音频标题

00:00

代码

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 设置音频播放器主题，支持 light 和 dark，默认 dark。倍速菜单与音量弹层渲染在播放器之外，会各自带上与 theme 对应的主题修饰类（如 semi-audio-player-control-volume-light），样式随主题切换

音频标题1

00:00

代码

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>
    );
}

键盘和焦点

播放（暂停）、上一首、下一首、后退、前进、音量、重新加载都是原生按钮，各占一个 Tab 停靠点，用 Enter 或空格触发；音量按钮切换静音。
进度条是原生 range，占一个 Tab 停靠点：方向键按 1 秒增减，PageUp、PageDown 按总时长的十分之一增减，Home、End 跳到两端。
音量按钮获得焦点时展开以「音量」命名的对话框弹层，下方向键或上方向键把焦点移到弹层内的音量滑块；滑块键位同进度条，方向键按 1% 增减。Esc 关闭弹层，焦点回到音量按钮。
倍速按钮获得焦点时展开菜单，下方向键、上方向键把焦点移到第一项、最后一项；菜单内用上下方向键、Home、End 移动，Enter 或空格选择，Esc 关闭。倍速按钮的名称为用途加当前倍速（如「倍速 1.0x」），菜单项是单选项（menuitemradio），以 aria-checked 标出当前倍速。

API 参考

AudioPlayer

Props

属性	说明	类型	默认值
audioUrl	音频地址，可以是字符串、`AudioInfo` 对象，或由它们组成的数组；传入数组时显示上一首、下一首按钮。	`AudioUrl`	-
autoPlay	是否自动播放。	`boolean`	`false`
className	根元素的类名。	`string`	-
ref	根元素 `div` 的引用。	`Type`	-
showToolbar	是否显示工具栏，即音量、后退、前进、倍速与重新加载按钮。	`boolean`	`true`
skipDuration	后退、前进按钮每次跳转的秒数。	`number`	`10`
style	根元素的内联样式。	`React.CSSProperties`	-
theme	播放器主题，可选 `dark` 或 `light`。	`AudioPlayerTheme`	`"dark"`

未列出的原生属性与事件（如 aria-label、id、onClick）展开到根元素 div 上。不支持监听 audio 元素的原生媒体事件（如 onTimeUpdate）：它们不会冒泡到根元素，监听不会触发。

根元素带 aria-label 或 aria-labelledby 时会加上 role="group"。

AudioInfo

属性	说明	类型	默认值
src	音频地址	string	-
title	音频标题	string	-
cover	封面图片	string	-