音频播放器 - Semi Design Next

代码演示

如何引入

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

基本用法

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

00:00

音频标题

00:00

音频标题1

00:00

代码

<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>

隐藏工具栏

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

音频标题

00:00

代码

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

音频标题1

00:00

代码

<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>

键盘和焦点

播放（暂停）、上一首、下一首、后退、前进、音量、重新加载都是原生按钮，各占一个 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`	`undefined`
autoPlay	是否自动播放。	`boolean`	`semiDefault("AudioPlayer", "autoPlay", false)`
showToolbar	是否显示工具栏。	`boolean`	`semiDefault("AudioPlayer", "showToolbar", true)`
skipDuration	后退、前进按钮每次跳转的秒数。	`number`	`semiDefault("AudioPlayer", "skipDuration", 10)`
theme	播放器主题，可选 dark 或 light。	`AudioPlayerTheme`	`semiDefault("AudioPlayer", "theme", "dark")`

Events

事件	说明	回调参数
无

Slots

插槽	说明	作用域参数
无

Exposes

名称	说明	类型
无

class、style 与原生属性通过 attrs 落在根元素 div 上。不支持监听 audio 元素的原生媒体事件（如 @timeupdate）：它们不会冒泡到根元素，监听不会触发。

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

AudioInfo

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