Skip to content

Commit 9370d03

Browse files
VanishMaxVanishMax
committed
feat: support requestOptions prop
1 parent b0c9bf2 commit 9370d03

File tree

4 files changed

+21
-18
lines changed

4 files changed

+21
-18
lines changed

‎README.md

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -148,21 +148,22 @@ import "1llest-waveform-vue/lib/style.css"
148148
## Documentation
149149
### Component Props
150150

151-
| prop | description | type | default |
152-
| :------------ | :----------------------------------------------------------- | :-------------- | :-------- |
153-
| url | the url of the audio file | `String` | - |
154-
| lineWidth | the width of each vertical line that makes up the waveform | `Number` | `0.5` |
155-
| lineCap | the style at the end of each vertical line that makes up the waveform | `CanvasLineCap` | `round` |
156-
| lineColor | the color of each vertical line that makes up the waveform | `String` | `#5e5e5e` |
157-
| samplingRate | indicates your audio sampling rate. The larger the value, the more lines the waveform will present and the higher the accuracy. But this value is not recommended to be too large, because too large a value will slow down rendering efficiency, the recommended value is between ` 8000 - 44100 ` | `Number` | `22050` |
158-
| cursorWidth | indicates your cursor width | `Number` | `2` |
159-
| cursorColor | the color of your cursor | `String` | `#fff` |
160-
| maskColor | the color of the waveform mask layer | `String` | `#fff` |
161-
| lazy | whether to enable lazy loading mode, if you want to display multiple waveforms as a list, this property is very useful | `Boolean` | `true` |
162-
| skeleton | whether to enable the skeleton during waveform loading | `Boolean` | `true` |
163-
| skeletonColor | the color of the skeleton | `String` | `#232323` |
164-
| interact | indicates whether you want the user to interact with the waveform | `Boolean` | `true` |
165-
| fade | achieve fade-in and fade-out effects when playing and pausing audio, this can give the user a smoother listening experience | `Boolean` | `true` |
151+
| prop | description | type | default |
152+
|:---------------|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:----------------|:----------|
153+
| url | the url of the audio file | `String` | - |
154+
| requestOptions | the object passed to the `fetch` request function | `RequestInit` | - |
155+
| lineWidth | the width of each vertical line that makes up the waveform | `Number` | `0.5` |
156+
| lineCap | the style at the end of each vertical line that makes up the waveform | `CanvasLineCap` | `round` |
157+
| lineColor | the color of each vertical line that makes up the waveform | `String` | `#5e5e5e` |
158+
| samplingRate | indicates your audio sampling rate. The larger the value, the more lines the waveform will present and the higher the accuracy. But this value is not recommended to be too large, because too large a value will slow down rendering efficiency, the recommended value is between ` 8000 - 44100 ` | `Number` | `22050` |
159+
| cursorWidth | indicates your cursor width | `Number` | `2` |
160+
| cursorColor | the color of your cursor | `String` | `#fff` |
161+
| maskColor | the color of the waveform mask layer | `String` | `#fff` |
162+
| lazy | whether to enable lazy loading mode, if you want to display multiple waveforms as a list, this property is very useful | `Boolean` | `true` |
163+
| skeleton | whether to enable the skeleton during waveform loading | `Boolean` | `true` |
164+
| skeletonColor | the color of the skeleton | `String` | `#232323` |
165+
| interact | indicates whether you want the user to interact with the waveform | `Boolean` | `true` |
166+
| fade | achieve fade-in and fade-out effects when playing and pausing audio, this can give the user a smoother listening experience | `Boolean` | `true` |
166167

167168
### Events
168169

‎docs/cn-readme.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -149,9 +149,10 @@ const getDuration = () => {
149149

150150
### 组件属性
151151

152-
| 属性 | 描述 | 类型 | 默认值 |
153-
| :------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------- | :-------- |
152+
| 属性 | 描述 | 类型 | 默认值 |
153+
| :------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------- |:----------------|:----------|
154154
| url | 音频文件的 URL 地址 | `String` | - |
155+
| requestOptions | 传递给 `fetch` 请求函数的对象 | `RequestInit` | - |
155156
| lineWidth | 组成波形的每条垂直线的宽度 | `Number` | `0.5` |
156157
| lineCap | 组成波形的每条垂直线末端的样式 | `CanvasLineCap` | `round` |
157158
| lineColor | 组成波形的每条垂直线的颜色 | `String` | `#5e5e5e` |

‎src/modules/Audio.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export default class WebAudio {
3737

3838
public async fetchAudioFile(): Promise<void> {
3939
try {
40-
const response = await fetch(this.props.url)
40+
const response = await fetch(this.props.url, this.props.requestOptions)
4141
this.arrayBuffer = await response.arrayBuffer()
4242
} catch (error) {
4343
console.error(error)

‎src/types/waveform.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import type { Ref } from 'vue'
22

33
export type IllestWaveformProps = {
44
url: string
5+
requestOptions?: RequestInit
56
lineWidth?: number
67
lineCap?: CanvasLineCap
78
lineColor?: string

0 commit comments

Comments
 (0)