Skip to content

Commit db4cee9

Browse files
codeacme17codeacme17
authored
feat: support requestOptions prop
2 parents b0c9bf2 + 9209111 commit db4cee9

23 files changed

+252
-203
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` |

‎lib/1llest-waveform-vue.mjs‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
var L = Object.defineProperty;
2-
var M = (a, e, t) => e in a ? L(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t;
3-
var s = (a, e, t) => (M(a, typeof e != "symbol" ? e + "" : e, t), t);
4-
import { defineComponent as O, ref as h, onMounted as G, watchEffect as g, onUnmounted as $, openBlock as V, createElementBlock as P, normalizeStyle as y, createVNode as U, Transition as X, withCtx as H, withDirectives as w, createElementVNode as m, vShow as A } from "vue";
1+
var E = Object.defineProperty;
2+
var L = (a, e, t) => e in a ? E(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t;
3+
var s = (a, e, t) => (L(a, typeof e != "symbol" ? e + "" : e, t), t);
4+
import { defineComponent as M, ref as h, onMounted as G, watchEffect as g, onUnmounted as $, openBlock as V, createElementBlock as P, normalizeStyle as y, createVNode as U, Transition as X, withCtx as H, withDirectives as w, createElementVNode as m, vShow as A } from "vue";
55
class q {
66
constructor(e, t, i) {
77
s(this, "canvasCtx");
@@ -78,7 +78,7 @@ class Y {
7878
}
7979
async fetchAudioFile() {
8080
try {
81-
const e = await fetch(this.props.url);
81+
const e = await fetch(this.props.url, this.props.requestOptions);
8282
this.arrayBuffer = await e.arrayBuffer();
8383
} catch (e) {
8484
console.error(e);
@@ -194,10 +194,11 @@ function Q(a, e) {
194194
function Z() {
195195
D.unobserve();
196196
}
197-
const tt = /* @__PURE__ */ O({
197+
const tt = /* @__PURE__ */ M({
198198
__name: "IllestWaveform",
199199
props: {
200200
url: null,
201+
requestOptions: { default: () => ({}) },
201202
lineWidth: { default: 0.5 },
202203
lineCap: { default: "round" },
203204
lineColor: { default: "#5e5e5e" },
@@ -280,19 +281,19 @@ const tt = /* @__PURE__ */ O({
280281
p.value <= o._audioDuration || F();
281282
});
282283
}
283-
function z() {
284+
function O() {
284285
return x(p.value);
285286
}
286-
function E() {
287+
function z() {
287288
const u = o._audioDuration;
288289
return x(u);
289290
}
290291
return e({
291292
play: b,
292293
pause: R,
293294
replay: W,
294-
getCurrentTime: z,
295-
getDuration: E
295+
getCurrentTime: O,
296+
getDuration: z
296297
}), (u, at) => (V(), P("section", {
297298
id: "illest-waveform",
298299
ref_key: "__illestWaveformRef__",
@@ -338,7 +339,7 @@ const et = (a, e) => {
338339
for (const [i, n] of e)
339340
t[i] = n;
340341
return t;
341-
}, it = /* @__PURE__ */ et(tt, [["__scopeId", "data-v-6d613eae"]]), ot = {
342+
}, it = /* @__PURE__ */ et(tt, [["__scopeId", "data-v-59075811"]]), ot = {
342343
install: (a) => {
343344
a.component("IllestWaveform", it);
344345
}

0 commit comments

Comments
 (0)