AudioPlayer

代码演示

如何引入

import { AudioPlayer } from '@chenzy-design/svelte';

基本用法

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

隐藏工具栏

showToolbar 设置为 false，则隐藏工具栏

主题

通过 theme 设置音频播放器主题，支持 light 和 dark，默认 dark

API 参考

AudioPlayer

属性	说明	类型	默认值
audioUrl	音频地址	string \| string[] \| AudioInfo \| AudioInfo[]	-
autoPlay	自动播放	boolean	false
class	类名	string	-
showToolbar	是否显示工具栏	boolean	true
skipDuration	跳转时间	number	10
style	内联样式	string	-
theme	主题，可选值：dark 和 light	string	dark

AudioInfo

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

设计变量

color

font

height

radius

width

变量	默认值	用法
--cd-color-audio-player-background	color-mix(in srgb, var(--cd-color-grey-9) 80%, transparent)	根容器背景（dark，对齐 Semi rgba(grey-9,.8)）
--cd-color-audio-player-background-light	var(--cd-color-bg-0)	根容器背景（light，对齐 Semi color-bg-0）
--cd-color-audio-player-control-icon	var(--cd-color-bg-0)	控制按钮图标色；也用作 play 按钮背景（对齐 Semi color-bg-0）
--cd-color-audio-player-control-icon-light	var(--cd-color-grey-9)	light 控制图标；play 按钮背景（light，对齐 Semi grey-9）
--cd-color-audio-player-control-icon-play	var(--cd-color-text-0)	play 按钮图标色（对齐 Semi color-text-0）
--cd-color-audio-player-control-icon-play-light	var(--cd-color-bg-0)	play 图标色（light，对齐 Semi color-bg-0）
--cd-color-audio-player-disabled-bg	color-mix(in srgb, var(--cd-color-grey-0) 35%, transparent)	play 禁用背景（dark，对齐 Semi rgba(grey-0,.35)）
--cd-color-audio-player-disabled-text	var(--cd-color-grey-7)	play 禁用图标色（dark，对齐 Semi color-grey-7）
--cd-color-audio-player-font-color	var(--cd-color-bg-0)	info-title / info-time 文字色（对齐 Semi color-bg-0）
--cd-color-audio-player-font-color-light	var(--cd-color-grey-9)	info-title/time 文字（light，对齐 Semi grey-9）

显示第 1 条-第 10 条，共 20 条

• 1
• 2