Skip to content

Commit

Permalink
Feat: add AudioPlayer (DouyinFE#2650)
Browse files Browse the repository at this point in the history 
* feat: audioPlayer UI

* feat: AudioPlayer

* style: add css variables

* refactor: optimize code structure

* docs: aduioplayer api doc

* style: scss variables

* fix: resolve minor problems

* feat: add storybook instance

* refactor: update audio source

* docs: add overview cover

* docs: correct doc errors

* fix: resolve initial state issue with autoplay

* docs: audioPlayer api docs

* refactor: improve code structure for better maintainability

* refactor: improve code structure for better maintainability

* style: adjust styles for improved UI consistency

---------

Co-authored-by: 田丰 <tianfeng.1012@bytedance.com>
Co-authored-by: YannLynn <101160769+YannLynn@users.noreply.github.com>
  • Loading branch information
@anjiazhuyouxing @YannLynn
3 people authored Jan 7, 2025
1 parent de38239 commit 096220f
Show file tree
Hide file tree
Showing 17 changed files with 1,418 additions and 2 deletions.
1 change: 1 addition & 0 deletions content/order.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@ const order = [
'configprovider',
'locale',
'jsonviewer',
'audioPlayer',
];
let { exec } = require('child_process');
let fs = require('fs');
Expand Down
171 changes: 171 additions & 0 deletions content/plus/audioPlayer/index-en-US.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,171 @@
---
localeCode: en-US
order: 90
category: Plus
title: AudioPlayer
icon: doc-audioplayer
width: 60%
brief: Used to play audio
showNew: true
---

## Demos

### How to import

```jsx import
import { AudioPlayer } from '@douyinfe/semi-ui';
```

### Basic Usage

Basic usage by passing audio URL through `audioUrl`.
audioUrl supports string, string array, object, and object array. See [AudioPlayer](#AudioPlayer) for detailed parameters.

```jsx live=true noInline=true dir="column"
import React from 'react';
import { AudioPlayer } from '@douyinfe/semi-ui';

function Demo() {
const audioUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/components/audio2.mp3';
const audioUrlArr = [
'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/components/audio1.mp3',
'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/components/audio2.mp3',
];
const audioUrlObj = {
src: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/components/audio1.mp3',
title: 'Audio Title',
cover: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg',
};
const audioUrlArrObj = [
{
src: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/components/audio1.mp3',
title: 'Audio Title 1',
cover: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg',
},
{
src: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/components/audio2.mp3',
title: 'Audio Title 2',
cover: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/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>
);
}

render(Demo);
```

### Hide Toolbar

Set showToolbar to false to hide the toolbar

```jsx live=true noInline=true dir="column"
import React from 'react';
import { AudioPlayer } from '@douyinfe/semi-ui';

function Demo() {
const audioUrlObj = {
src: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/components/audio1.mp3',
title: 'Audio Title'
};

return (
<div style={{ width: '100%' }}>
<AudioPlayer
autoPlay={false}
audioUrl={audioUrlObj}
showToolbar={false}
/>
</div>
);
}

render(Demo);
```

### Theme

Set the audio player theme through `theme`, supports `light` and `dark`, default is `dark`

```jsx live=true noInline=true dir="column"
import React from 'react';
import { AudioPlayer } from '@douyinfe/semi-ui';

function Demo() {
const audioUrlArrObj = [
{
src: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/components/audio1.mp3',
title: 'Audio Title 1',
cover: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg',
},
{
src: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/components/audio2.mp3',
title: 'Audio Title 2',
cover: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg',
},
];

return (
<div style={{ width: '100%' }}>
<AudioPlayer
audioUrl={audioUrlArrObj}
theme="light"
/>
</div>
);
}

render(Demo);
```

## API Reference

### AudioPlayer

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| audioUrl | Audio address | string ｜ string[] ｜ AudioInfo ｜ AudioInfo[] | - |
| autoPlay | Auto play | boolean | false |
| theme | Theme, optional values: `dark` and `light` | string | "dark" |
| showToolbar | Whether to display the toolbar | boolean | true |
| skipDuration | Skip time | number | 10 |
| className | Class name | string | - |
| style | Inline style | object | - |

### AudioInfo

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| src | Audio address | string | - |
| title | Audio title | string | - |
| cover | Cover image | string | - |


178 changes: 178 additions & 0 deletions content/plus/audioPlayer/index.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,178 @@
---
localeCode: zh-CN
order: 90
category: Plus
title: AudioPlayer 音频播放器
icon: doc-audioplayer
width: 60%
brief: 用于播放音频
showNew: true
---

## 代码演示

### 如何引入

```jsx import
import { AudioPlayer } from '@douyinfe/semi-ui';
```


### 基本用法

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

```jsx live=true noInline=true dir="column"
import React from 'react';
import { AudioPlayer } from '@douyinfe/semi-ui';

function Demo() {
const audioUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/components/audio2.mp3';
const audioUrlArr = [
'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/components/audio1.mp3',
'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/components/audio2.mp3',
];
const audioUrlObj = {
src: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/components/audio1.mp3',
title: '音频标题',
cover: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg',
};
const audioUrlArrObj = [
{
src: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/components/audio1.mp3',
title: '音频标题1',
cover: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg',
},
{
src: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/components/audio2.mp3',
title: '音频标题2',
cover: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/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>
);
}

render(Demo);

```


### 隐藏工具栏

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


```jsx live=true noInline=true dir="column"
import React from 'react';
import { AudioPlayer } from '@douyinfe/semi-ui';

function Demo() {
const audioUrlObj = {
src: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/components/audio1.mp3',
title: '音频标题'
};

return (
<div style={{ width: '100%' }}>
<AudioPlayer
autoPlay={false}
audioUrl={audioUrlObj}
showToolbar={false}
/>
</div>
);
}

render(Demo);

```

### 主题

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


```jsx live=true noInline=true dir="column"
import React from 'react';
import { AudioPlayer } from '@douyinfe/semi-ui';

function Demo() {
const audioUrlArrObj = [
{
src: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/components/audio1.mp3',
title: '音频标题1',
cover: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg',
},
{
src: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/components/audio2.mp3',
title: '音频标题2',
cover: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg',
},
];

return (
<div style={{ width: '100%' }}>
<AudioPlayer
audioUrl={audioUrlArrObj}
theme="light"
/>
</div>
);
}

render(Demo);

```

## API 参考

### AudioPlayer

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

### AudioInfo

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


4 changes: 3 additions & 1 deletion content/start/overview/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,9 @@ Markdown 渲染器,
Lottie 动画,
Chat 聊天,
HotKeys 快捷键,
DragMove 拖拽移动
DragMove 拖拽移动,
JsonViewer Json编辑器,
AudioPlayer 音频播放器
```

## 输入类
Expand Down
Loading

0 comments on commit 096220f

Please sign in to comment.