@codeniu/vue3-audio-player
Version:
A Vue 3 audio player component
864 lines (863 loc) • 33.4 kB
JavaScript
import { defineComponent as D, ref as f, createElementBlock as h, openBlock as m, normalizeStyle as L, createElementVNode as y, createVNode as C, withModifiers as M, toDisplayString as A, Transition as ne, withCtx as le, withDirectives as R, Fragment as ee, renderList as se, vShow as I, createCommentVNode as j, normalizeClass as re, renderSlot as J, unref as o, onBeforeUnmount as oe, watch as me, computed as _, onMounted as ye, nextTick as Z, provide as ue, createBlock as Q, mergeProps as te, createTextVNode as ge, resolveDynamicComponent as he, toHandlers as fe } from "vue";
const Pe = ["onClick"], we = /* @__PURE__ */ D({
__name: "PlaybackRate",
props: {
themeColor: {},
playbackRate: {},
playbackRates: {}
},
emits: ["change"],
setup(n, { emit: s }) {
const l = s, c = f(!1), p = () => {
c.value = !c.value;
}, i = (a) => {
l("change", a), c.value = !1;
};
return (a, e) => (m(), h("div", {
class: "vue-audio-player__play-rate",
style: L({ color: a.themeColor })
}, [
y("span", {
onClick: M(p, ["stop"])
}, A(a.playbackRate.toFixed(1) + "x"), 1),
C(ne, { name: "fade-rate" }, {
default: le(() => [
R(y("div", {
class: "vue-audio-player__play-rate__dropdown",
style: L({ backgroundColor: a.themeColor })
}, [
(m(!0), h(ee, null, se(a.playbackRates, (r) => (m(), h("div", {
key: "pr_" + r,
onClick: M((u) => i(r), ["stop"])
}, A(r.toFixed(1) + "x"), 9, Pe))), 128))
], 4), [
[I, c.value]
])
]),
_: 1
})
], 4));
}
}), E = (n, s) => {
const l = n.__vccOpts || n;
for (const [c, p] of s)
l[c] = p;
return l;
}, _e = /* @__PURE__ */ E(we, [["__scopeId", "data-v-e667ee00"]]), ke = {}, Ce = {
class: "vue-audio-player__play-icon",
viewBox: "0 0 1024 1024",
version: "1.1",
xmlns: "http://www.w3.org/2000/svg",
width: "200",
height: "200"
};
function Be(n, s) {
return m(), h("svg", Ce, s[0] || (s[0] = [
y("path", { d: "M744.4353125 43.919375L280.94 425.3525 280.94 104.4359375a38.5096875 38.5096875 0 1 0-77.47875-0.916875l0 816.5034375a38.5096875 38.5096875 0 1 0 77.47875 0L280.94 596.35625l463.4953125 383.7253125a45.845625 45.845625 0 0 0 76.1034375-33.92625L820.53875 77.845625a45.845625 45.845625 0 0 0-76.1034375-33.92625z" }, null, -1)
]));
}
const be = /* @__PURE__ */ E(ke, [["render", Be]]), Le = {}, $e = {
class: "vue-audio-player__play-icon",
viewBox: "0 0 1024 1024",
version: "1.1",
xmlns: "http://www.w3.org/2000/svg",
width: "200",
height: "200"
};
function Ee(n, s) {
return m(), h("svg", $e, s[0] || (s[0] = [
y("path", { d: "M512 8.97941504c277.81531056 0 503.02058496 225.20527562 503.02058496 503.02058496s-225.20527562 503.02058496-503.02058496 503.02058496S8.97941504 789.81531056 8.97941504 512 234.18468944 8.97941504 512 8.97941504z m-70.12698734 325.48390806c-26.63050141 0-48.23079685 21.60029545-48.23079807 48.23079686v253.81827015a48.23079685 48.23079685 0 0 0 74.26951062 40.56712988l199.46245688-128.1518906a48.23079685 48.23079685 0 0 0-0.35507283-81.37097702l-199.46245689-125.66637833a48.23079685 48.23079685 0 0 0-25.71322921-7.42695094z" }, null, -1)
]));
}
const Se = /* @__PURE__ */ E(Le, [["render", Ee]]), Te = {}, Me = {
class: "vue-audio-player__play-icon",
viewBox: "0 0 1024 1024",
version: "1.1",
xmlns: "http://www.w3.org/2000/svg",
width: "200",
height: "200"
};
function Ve(n, s) {
return m(), h("svg", Me, s[0] || (s[0] = [
y("path", { d: "M512 1012.62222187C234.38222187 1012.62222187 11.37777813 789.61777813 11.37777813 512S234.38222187 11.37777813 512 11.37777813s500.62222187 223.0044448 500.62222187 500.62222187-223.0044448 500.62222187-500.62222187 500.62222187z m136.53333333-682.66666667c-27.30666667 0-45.51111147 18.2044448-45.51111146 45.51111147v273.06666666c0 27.30666667 18.2044448 45.51111147 45.51111146 45.51111147s45.51111147-18.2044448 45.51111147-45.51111147V375.46666667c0-27.30666667-18.2044448-45.51111147-45.51111147-45.51111147zM375.46666667 329.9555552c-27.30666667 0-45.51111147 18.2044448-45.51111147 45.51111147v273.06666666c0 27.30666667 18.2044448 45.51111147 45.51111147 45.51111147s45.51111147-18.2044448 45.51111146-45.51111147V375.46666667c0-27.30666667-18.2044448-45.51111147-45.51111146-45.51111147z" }, null, -1)
]));
}
const Ne = /* @__PURE__ */ E(Te, [["render", Ve]]), Re = {}, Ie = {
class: "vue-audio-player__play-icon",
viewBox: "0 0 1024 1024",
version: "1.1",
xmlns: "http://www.w3.org/2000/svg",
width: "200",
height: "200"
};
function De(n, s) {
return m(), h("svg", Ie, s[0] || (s[0] = [
y("path", { d: "M279.5646875 980.080625L743.06 598.6475 743.06 919.5640625a38.5096875 38.5096875 0 1 0 77.47875 0.916875l0-816.5034375a38.5096875 38.5096875 0 1 0-77.47875 0L743.06 427.64375l-463.4953125-383.7253125a45.845625 45.845625 0 0 0-76.1034375 33.92625L203.46125 946.154375a45.845625 45.845625 0 0 0 76.1034375 33.92625z" }, null, -1)
]));
}
const Fe = /* @__PURE__ */ E(Re, [["render", De]]), xe = {}, Ae = {
class: "vue-audio-player__play-icon",
viewBox: "0 0 1024 1024",
version: "1.1",
xmlns: "http://www.w3.org/2000/svg",
width: "200",
height: "200"
};
function ze(n, s) {
return m(), h("svg", Ae, s[0] || (s[0] = [
y("path", { d: "M1009.6852389 501.04265842v72.84551793c-12.28886699 137.14708366-93.42867683 254.45999047-208.60559588 317.12488904L762.68733667 817.14116381A318.92799715 318.92799715 0 0 0 928.10158763 537.46541682a319.0112165 319.0112165 0 0 0-175.15102891-284.80766635l38.33682717-73.87190158c120.33657856 61.22241365 205.74836509 181.25385159 218.39785301 322.25680953z m-165.69165255 27.96202667a248.96745017 248.96745017 0 0 1-120.17013874 213.51559395l-38.55874617-74.0660827a165.77487189 165.77487189 0 0 0 75.50856761-139.44951125 165.77487189 165.77487189 0 0 0-78.03291762-141.08617842l38.44778667-74.01060238a248.96745017 248.96745017 0 0 1 122.80544825 215.0967808zM625.26285255 162.75206827V872.89877618c0 56.72851683-70.04376747 84.24670094-109.29601764 42.94168462l-182.44667619-166.55159523H110.71162937a83.2203173 83.2203173 0 0 1-83.2203173-83.2203173V388.44556857a83.2203173 83.2203173 0 0 1 78.31031808-83.0816165l5.60350208-0.1387008 224.9167781 3.74491478 179.67266474-189.13204224c39.22451001-41.33275762 109.2960165-13.78683221 109.29601764 42.94168348z" }, null, -1)
]));
}
const Ue = /* @__PURE__ */ E(xe, [["render", ze]]), Xe = { class: "play-controls" }, He = {
key: 1,
class: "vue-audio-player__play-loading"
}, We = /* @__PURE__ */ D({
__name: "PlayControls",
props: {
showPrev: { type: Boolean },
showNext: { type: Boolean },
showPlay: { type: Boolean },
showLoading: { type: Boolean },
isPlaying: { type: Boolean },
isLoading: { type: Boolean },
themeColor: {},
isLoop: { type: Boolean },
currentIndex: {},
total: {}
},
emits: ["play", "pause", "prev", "next"],
setup(n, { emit: s }) {
const l = n, c = s, p = () => {
l.currentIndex <= 0 && !l.isLoop || c("prev");
}, i = () => {
l.currentIndex >= l.total - 1 && !l.isLoop || c("next");
};
return (a, e) => (m(), h("div", Xe, [
a.showPrev ? (m(), h("div", {
key: 0,
class: re(["vue-audio-player__play-prev", { disable: !a.isLoop && a.currentIndex === 0 }]),
onClick: M(p, ["stop"]),
style: L({ color: a.themeColor })
}, [
J(a.$slots, "play-prev", {}, () => [
C(o(be))
], !0)
], 6)) : j("", !0),
a.isLoading && a.showLoading ? (m(), h("div", He, [
(m(), h(ee, null, se(8, (r) => y("span", {
key: r,
style: L({ backgroundColor: a.themeColor })
}, null, 4)), 64))
])) : (m(), h(ee, { key: 2 }, [
!a.isPlaying && a.showPlay ? (m(), h("div", {
key: 0,
class: "vue-audio-player__play-start",
onClick: e[0] || (e[0] = M((r) => c("play"), ["stop"])),
style: L({ color: a.themeColor })
}, [
J(a.$slots, "play-start", {}, () => [
C(o(Se))
], !0)
], 4)) : a.showPlay ? (m(), h("div", {
key: 1,
class: "vue-audio-player__play-pause",
onClick: e[1] || (e[1] = M((r) => c("pause"), ["stop"])),
style: L({ color: a.themeColor })
}, [
J(a.$slots, "play-pause", {}, () => [
C(o(Ne))
], !0)
], 4)) : j("", !0)
], 64)),
a.showNext ? (m(), h("div", {
key: 3,
class: re(["vue-audio-player__play-next", { disable: !a.isLoop && a.currentIndex === a.total - 1 }]),
onClick: M(i, ["stop"]),
style: L({ color: a.themeColor })
}, [
J(a.$slots, "play-next", {}, () => [
C(o(Fe))
], !0)
], 6)) : j("", !0)
]));
}
}), ie = /* @__PURE__ */ E(We, [["__scopeId", "data-v-da3df3ed"]]);
function Ye(n, s) {
const l = f(null), c = f(null), p = (r) => {
if (!l.value) return;
const u = l.value.getBoundingClientRect(), d = r.clientY - u.top, v = u.height;
let w = 1 - d / v;
w > 1 && (w = 1), w < 0 && (w = 0), s("volumeChange", w);
}, i = (r) => {
p(r);
}, a = () => {
document.addEventListener("mousemove", i), document.addEventListener("mouseup", e);
}, e = () => {
document.removeEventListener("mousemove", i), document.removeEventListener("mouseup", e);
};
return c.value && c.value.addEventListener("mousedown", a), oe(() => {
c.value && c.value.removeEventListener("mousedown", a), document.removeEventListener("mousemove", i), document.removeEventListener("mouseup", e);
}), {
volumeWrap: l,
volumeBar: c,
handleVolumeClick: p
};
}
const Oe = { class: "vue-audio-player__play-volume-icon-wrap" }, je = /* @__PURE__ */ D({
__name: "VolumeControl",
props: {
themeColor: {},
volume: {}
},
emits: ["volumeChange"],
setup(n, { emit: s }) {
const l = n, c = s, p = f(!1), { volumeWrap: i, volumeBar: a, handleVolumeClick: e } = Ye(l, c), r = () => {
p.value = !p.value;
};
return (u, d) => (m(), h("div", Oe, [
C(o(Ue), {
class: "vue-audio-player__play-icon",
style: L({ color: u.themeColor }),
onClick: M(r, ["stop"])
}, null, 8, ["style"]),
C(ne, { name: "fade-volume" }, {
default: le(() => [
R(y("div", {
ref_key: "volumeWrap",
ref: i,
class: "vue-audio-player__play-volume-wrap",
onClick: d[0] || (d[0] = M(
//@ts-ignore
(...v) => o(e) && o(e)(...v),
["stop"]
))
}, [
y("div", {
ref_key: "volumeBar",
ref: a,
class: "vue-audio-player__play-volume",
style: L({
height: u.volume * 100 + "%",
backgroundColor: u.themeColor
})
}, null, 4)
], 512), [
[I, p.value]
])
]),
_: 1
})
]));
}
}), de = /* @__PURE__ */ E(je, [["__scopeId", "data-v-50ba1133"]]);
function qe(n, s) {
const l = f(null), c = f(null), p = f(null), i = () => {
if (!c.value || !p.value || !n.duration) return;
const d = Number(n.currentTime) / n.duration * 100;
c.value.style.width = `${d}%`, p.value.style.left = `${d}%`;
}, a = (d) => {
if (n.disabledClick || !l.value || !n.duration) return;
const v = l.value.getBoundingClientRect(), k = (d.clientX - v.left) / v.width * n.duration;
s("timeUpdate", k), s("progressClick", d);
}, e = (d) => {
n.disabledDrag || (s("progressStart", d), d instanceof MouseEvent ? (document.addEventListener("mousemove", r), document.addEventListener("mouseup", u)) : (document.addEventListener("touchmove", r), document.addEventListener("touchend", u)));
}, r = (d) => {
if (!l.value || !n.duration) return;
const v = l.value.getBoundingClientRect();
let P = ((d instanceof MouseEvent ? d.clientX : d.touches[0].clientX) - v.left) / v.width * n.duration;
P < 0 && (P = 0), P > n.duration && (P = n.duration), s("timeUpdate", P), s("progressMove", d);
}, u = (d) => {
s("progressEnd", d), document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", u), document.removeEventListener("touchmove", r), document.removeEventListener("touchend", u);
};
return me(() => n.currentTime, i), oe(() => {
document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", u), document.removeEventListener("touchmove", r), document.removeEventListener("touchend", u);
}), {
progressWrap: l,
progress: c,
progressPoint: p,
handleProgressClick: a,
handleProgressStart: e
};
}
const Ge = /* @__PURE__ */ D({
__name: "ProgressBar",
props: {
currentTime: {},
duration: {},
themeColor: {},
disabledDrag: { type: Boolean },
disabledClick: { type: Boolean }
},
emits: ["timeUpdate", "progressStart", "progressEnd", "progressMove", "progressClick"],
setup(n, { emit: s }) {
const l = n, c = s, { progressWrap: p, progress: i, progressPoint: a, handleProgressClick: e, handleProgressStart: r } = qe(l, c);
return (u, d) => (m(), h("div", {
ref_key: "progressWrap",
ref: p,
class: "vue-audio-player__progress-wrap",
style: L({
cursor: u.disabledClick ? "auto" : "pointer"
}),
onClick: d[2] || (d[2] = M(
//@ts-ignore
(...v) => o(e) && o(e)(...v),
["stop"]
))
}, [
y("div", {
ref_key: "progress",
ref: i,
class: "vue-audio-player__progress",
style: L({
backgroundColor: u.themeColor
})
}, null, 4),
y("div", {
ref_key: "progressPoint",
ref: a,
class: "vue-audio-player__progress-point",
style: L({
backgroundColor: u.themeColor,
boxShadow: `0 0 10px 0 ${u.themeColor}`,
cursor: u.disabledDrag ? "auto" : "pointer"
}),
onMousedown: d[0] || (d[0] = //@ts-ignore
(...v) => o(r) && o(r)(...v)),
onTouchstart: d[1] || (d[1] = //@ts-ignore
(...v) => o(r) && o(r)(...v))
}, null, 36)
], 4));
}
}), ce = /* @__PURE__ */ E(Ge, [["__scopeId", "data-v-4dedf8eb"]]), Je = { class: "vue-audio-player__time-wrap" }, Ke = { class: "vue-audio-player__current-time" }, Qe = { class: "vue-audio-player__duration" }, Ze = /* @__PURE__ */ D({
__name: "TimeDisplay",
props: {
currentTime: {},
duration: {}
},
setup(n) {
return (s, l) => (m(), h("div", Je, [
y("div", Ke, A(s.currentTime), 1),
y("div", Qe, A(s.duration), 1)
]));
}
}), pe = /* @__PURE__ */ E(Ze, [["__scopeId", "data-v-2df0268a"]]);
function ve(n, s) {
const l = f(), c = f(!1), p = f(!1), i = f(!1), a = f("0"), e = f(0), r = f(1), u = f(1), d = f(0), v = f(!1), w = f(""), k = f(null), P = (t) => {
let B = Math.floor(t / 60), $ = Math.ceil(t % 60);
return $ >= 60 && (B++, $ = 0), `${String(B).padStart(2, "0")}:${String($).padStart(2, "0")}`;
}, z = _(() => a.value ? P(Number(a.value)) : "00:00"), U = _(() => e.value ? P(e.value) : "00:00"), F = (t) => {
w.value = t.message, v.value = !0, setTimeout(() => {
v.value = !1;
}, t.duration || 3e3);
}, x = () => {
k.value && (clearInterval(k.value), k.value = null);
}, T = () => {
!l.value || i.value || (a.value = String(l.value.currentTime), s("timeupdate"));
}, S = async (t = {}) => new Promise(async (B, $) => {
p.value = !0;
const b = async () => {
var N, ae;
g();
try {
await ((N = l.value) == null ? void 0 : N.play()), await Z(), t != null && t.currentTime && (l.value.currentTime = t.currentTime), k.value ? a.value = String((ae = l.value) == null ? void 0 : ae.currentTime) : k.value = window.setInterval(T, n.progressInterval), c.value = !0, p.value = !1, l.value && (l.value.playbackRate = u.value), s("play"), B(l.value);
} catch (K) {
F({
message: K.message
}), K.code === 9 && n.isAutoPlayNext && setTimeout(() => {
V();
}, 3e3), p.value = !1, s("play-error", K), $(K);
}
};
if (n.beforePlay) {
n.beforePlay((N) => {
N !== !1 && b();
});
return;
}
b();
}), X = () => {
var t;
(t = l.value) == null || t.pause(), c.value = !1, s("pause");
}, V = async () => {
if (!(n.beforeNext && !await n.beforeNext())) {
if (d.value >= n.audioList.length - 1)
if (n.isLoop)
d.value = 0;
else
return;
else
d.value++;
s("play-next"), await Z(), await S();
}
}, H = async () => {
if (!(n.beforePrev && !await n.beforePrev())) {
if (d.value <= 0)
if (n.isLoop)
d.value = n.audioList.length - 1;
else
return;
else
d.value--;
s("play-prev"), await Z(), await S();
}
}, q = (t) => {
l.value && (u.value = t, l.value.playbackRate = t);
}, G = (t) => {
l.value && (r.value = t, l.value.volume = t);
}, W = (t) => {
l.value && (a.value = String(t), l.value.currentTime = t);
}, Y = (t) => {
s("ended", t), n.isAutoPlayNext && V();
}, O = (t) => {
l.value && (e.value = l.value.duration, s("durationchange", t));
}, g = () => {
if ("mediaSession" in navigator) {
const t = n.audioList[d.value];
navigator.mediaSession.metadata = new MediaMetadata({
title: t.title,
artist: t.artist,
album: t.album,
artwork: t.artwork
}), navigator.mediaSession.setActionHandler("play", () => S()), navigator.mediaSession.setActionHandler("pause", () => X()), navigator.mediaSession.setActionHandler("previoustrack", () => H()), navigator.mediaSession.setActionHandler("nexttrack", () => V());
}
};
return ye(() => {
l.value && (l.value.volume = r.value, l.value.playbackRate = u.value);
}), oe(() => {
x();
}), {
audio: l,
isPlaying: c,
isLoading: p,
currentTime: a,
duration: e,
currentTimeFormatted: z,
durationFormatted: U,
currentVolume: r,
playbackRate: u,
currentPlayIndex: d,
isShowErrorMessage: v,
noticeMessage: w,
play: S,
pause: X,
playNext: V,
playPrev: H,
handleSetPlaybackRate: q,
handleVolumeChange: G,
handleTimeUpdate: W,
handleProgressStart: () => i.value = !0,
handleProgressEnd: () => i.value = !1,
handleProgressMove: T,
handleProgressClick: T,
onEnded: Y,
onDurationchange: O
};
}
const eo = { class: "vue-audio-player" }, oo = { class: "vue-audio-player__btn-wrap" }, to = ["src"], ao = /* @__PURE__ */ D({
__name: "Vue3AudioPlayer",
props: {
audioList: { default: () => [] },
showPlayButton: { type: Boolean, default: !0 },
showPrevButton: { type: Boolean, default: !0 },
showNextButton: { type: Boolean, default: !0 },
showVolumeButton: { type: Boolean, default: !0 },
showProgressBar: { type: Boolean, default: !0 },
beforePlay: { type: Function, default: void 0 },
beforePrev: { type: Function, default: void 0 },
beforeNext: { type: Function, default: void 0 },
isLoop: { type: Boolean, default: !0 },
isAutoPlayNext: { type: Boolean, default: !0 },
progressInterval: { default: 500 },
showPlaybackRate: { type: Boolean, default: !0 },
showPlayLoading: { type: Boolean, default: !0 },
playbackRates: { default: () => [0.5, 1, 1.5, 2] },
themeColor: { default: "#EC4141" },
disabledProgressDrag: { type: Boolean, default: !1 },
disabledProgressClick: { type: Boolean, default: !1 }
},
emits: ["timeupdate", "play", "pause", "play-next", "play-prev", "play-error", "ended", "durationchange"],
setup(n, { expose: s, emit: l }) {
const c = n, p = l, {
audio: i,
isPlaying: a,
isLoading: e,
currentTime: r,
duration: u,
currentTimeFormatted: d,
durationFormatted: v,
currentVolume: w,
playbackRate: k,
currentPlayIndex: P,
isShowErrorMessage: z,
noticeMessage: U,
play: F,
pause: x,
playNext: T,
playPrev: S,
handleSetPlaybackRate: X,
handleVolumeChange: V,
handleTimeUpdate: H,
handleProgressStart: q,
handleProgressEnd: G,
handleProgressMove: W,
handleProgressClick: Y,
onEnded: O,
onDurationchange: g
} = ve(c, p);
return console.log("===>", c), ue("audioPlayer", {
audio: i,
isPlaying: a,
currentTime: r,
duration: u
}), s({
audio: i,
isPlaying: a,
isLoading: e,
currentTime: r,
duration: u,
currentTimeFormatted: d,
durationFormatted: v,
currentVolume: w,
playbackRate: k,
currentPlayIndex: P,
isShowErrorMessage: z,
noticeMessage: U,
play: F,
pause: x,
playNext: T,
playPrev: S
}), (t, B) => {
var $, b;
return m(), h("div", eo, [
y("div", oo, [
t.showPlaybackRate ? (m(), Q(_e, {
key: 0,
"theme-color": t.themeColor,
"playback-rate": o(k),
"playback-rates": t.playbackRates,
onChange: o(X)
}, null, 8, ["theme-color", "playback-rate", "playback-rates", "onChange"])) : j("", !0),
C(ie, {
"show-prev": t.showPrevButton,
"show-next": t.showNextButton,
"show-play": t.showPlayButton,
"show-loading": t.showPlayLoading,
"is-playing": o(a),
"is-loading": o(e),
"theme-color": t.themeColor,
"is-loop": t.isLoop,
"current-index": o(P),
total: t.audioList.length,
onPlay: o(F),
onPause: o(x),
onPrev: o(S),
onNext: o(T)
}, null, 8, ["show-prev", "show-next", "show-play", "show-loading", "is-playing", "is-loading", "theme-color", "is-loop", "current-index", "total", "onPlay", "onPause", "onPrev", "onNext"]),
t.showVolumeButton ? (m(), Q(de, {
key: 1,
"theme-color": t.themeColor,
volume: o(w),
onVolumeChange: o(V)
}, null, 8, ["theme-color", "volume", "onVolumeChange"])) : j("", !0),
R(y("div", { class: "vue-audio-player__notice" }, A(o(U)), 513), [
[I, o(z)]
])
]),
R(C(ce, {
"current-time": o(r),
duration: o(u),
"theme-color": t.themeColor,
"disabled-drag": t.disabledProgressDrag,
"disabled-click": t.disabledProgressClick,
onTimeUpdate: o(H),
onProgressStart: o(q),
onProgressEnd: o(G),
onProgressMove: o(W),
onProgressClick: o(Y)
}, null, 8, ["current-time", "duration", "theme-color", "disabled-drag", "disabled-click", "onTimeUpdate", "onProgressStart", "onProgressEnd", "onProgressMove", "onProgressClick"]), [
[I, t.showProgressBar]
]),
R(C(pe, {
"current-time": o(d),
duration: o(v)
}, null, 8, ["current-time", "duration"]), [
[I, t.showProgressBar]
]),
y("audio", te({
ref_key: "audio",
ref: i,
class: "vue-audio-player__audio",
src: (b = ($ = t.audioList) == null ? void 0 : $[o(P)]) == null ? void 0 : b.src
}, t.$attrs, {
onEnded: B[0] || (B[0] = //@ts-ignore
(...N) => o(O) && o(O)(...N)),
onDurationchange: B[1] || (B[1] = //@ts-ignore
(...N) => o(g) && o(g)(...N))
}), " 浏览器太老咯，请升级浏览器吧~ ", 16, to)
]);
};
}
}), ro = { class: "tl-audio-player" }, no = { class: "tl-audio-player__content" }, lo = { class: "tl-audio-player__controls" }, so = { class: "tl-audio-plauer__timewrap" }, uo = { class: "tl-audio-player__title" }, io = { class: "tl-audio-player__progress" }, co = { class: "tl-audio-player__time" }, po = ["src"], vo = /* @__PURE__ */ D({
__name: "TlAudioPlayer",
props: {
audioList: { default: () => [] },
showPlayButton: { type: Boolean, default: !0 },
showPrevButton: { type: Boolean, default: !0 },
showNextButton: { type: Boolean, default: !0 },
showVolumeButton: { type: Boolean, default: !0 },
showProgressBar: { type: Boolean, default: !0 },
beforePlay: { type: Function, default: void 0 },
beforePrev: { type: Function, default: void 0 },
beforeNext: { type: Function, default: void 0 },
isLoop: { type: Boolean, default: !0 },
isAutoPlayNext: { type: Boolean, default: !0 },
progressInterval: { default: 500 },
showPlaybackRate: { type: Boolean, default: !0 },
showPlayLoading: { type: Boolean, default: !0 },
playbackRates: { default: () => [0.5, 1, 1.5, 2] },
themeColor: { default: "#1890ff" },
disabledProgressDrag: { type: Boolean, default: !1 },
disabledProgressClick: { type: Boolean, default: !1 }
},
emits: ["timeupdate", "play", "pause", "play-next", "play-prev", "play-error", "ended", "durationchange"],
setup(n, { expose: s, emit: l }) {
const c = n, p = l, {
audio: i,
isPlaying: a,
isLoading: e,
currentTime: r,
duration: u,
currentTimeFormatted: d,
durationFormatted: v,
currentVolume: w,
playbackRate: k,
currentPlayIndex: P,
isShowErrorMessage: z,
noticeMessage: U,
play: F,
pause: x,
playNext: T,
playPrev: S,
handleTimeUpdate: X,
handleProgressStart: V,
handleProgressEnd: H,
handleProgressMove: q,
handleProgressClick: G,
onEnded: W,
onDurationchange: Y,
handleVolumeChange: O
} = ve(c, p);
return ue("audioPlayer", {
audio: i,
isPlaying: a,
currentTime: r,
duration: u
}), s({
audio: i,
isPlaying: a,
isLoading: e,
currentTime: r,
duration: u,
currentTimeFormatted: d,
durationFormatted: v,
currentVolume: w,
playbackRate: k,
currentPlayIndex: P,
play: F,
pause: x,
playNext: T,
playPrev: S
}), (g, t) => {
var B, $;
return m(), h("div", ro, [
y("div", no, [
y("div", lo, [
C(ie, {
"show-prev": g.showPrevButton,
"show-next": g.showNextButton,
"show-play": g.showPlayButton,
"show-loading": g.showPlayLoading,
"is-playing": o(a),
"is-loading": o(e),
"theme-color": g.themeColor,
"is-loop": g.isLoop,
"current-index": o(P),
total: g.audioList.length,
onPlay: o(F),
onPause: o(x),
onPrev: o(S),
onNext: o(T)
}, null, 8, ["show-prev", "show-next", "show-play", "show-loading", "is-playing", "is-loading", "theme-color", "is-loop", "current-index", "total", "onPlay", "onPause", "onPrev", "onNext"]),
g.showVolumeButton ? (m(), Q(de, {
key: 0,
"theme-color": g.themeColor,
volume: o(w),
onVolumeChange: o(O)
}, null, 8, ["theme-color", "volume", "onVolumeChange"])) : j("", !0)
]),
y("div", so, [
y("div", uo, [
J(g.$slots, "title", {}, () => {
var b;
return [
ge(A(((b = g.audioList[o(P)]) == null ? void 0 : b.title) || "未知音频"), 1)
];
}, !0)
]),
y("div", io, [
R(C(ce, {
"current-time": o(r),
duration: o(u),
"theme-color": g.themeColor,
"disabled-drag": g.disabledProgressDrag,
"disabled-click": g.disabledProgressClick,
onTimeUpdate: o(X),
onProgressStart: o(V),
onProgressEnd: o(H),
onProgressMove: o(q),
onProgressClick: o(G)
}, null, 8, ["current-time", "duration", "theme-color", "disabled-drag", "disabled-click", "onTimeUpdate", "onProgressStart", "onProgressEnd", "onProgressMove", "onProgressClick"]), [
[I, g.showProgressBar]
])
]),
y("div", co, [
R(C(pe, {
"current-time": o(d),
duration: o(v)
}, null, 8, ["current-time", "duration"]), [
[I, g.showProgressBar]
])
])
]),
R(y("div", { class: "tl-audio-player__notice" }, A(o(U)), 513), [
[I, o(z)]
])
]),
y("audio", te({
ref_key: "audio",
ref: i,
class: "tl-audio-player__audio",
src: ($ = (B = g.audioList) == null ? void 0 : B[o(P)]) == null ? void 0 : $.src
}, g.$attrs, {
onEnded: t[0] || (t[0] = //@ts-ignore
(...b) => o(W) && o(W)(...b)),
onDurationchange: t[1] || (t[1] = //@ts-ignore
(...b) => o(Y) && o(Y)(...b))
}), " 浏览器不支持音频播放，请升级浏览器 ", 16, po)
]);
};
}
}), mo = /* @__PURE__ */ E(vo, [["__scopeId", "data-v-a01b7d47"]]), yo = /* @__PURE__ */ D({
__name: "index",
props: {
mode: { default: "default" },
audioList: { default: () => [] },
showPlayButton: { type: Boolean, default: !0 },
showPrevButton: { type: Boolean, default: !0 },
showNextButton: { type: Boolean, default: !0 },
showVolumeButton: { type: Boolean, default: !0 },
showProgressBar: { type: Boolean, default: !0 },
beforePlay: { type: Function, default: void 0 },
beforePrev: { type: Function, default: void 0 },
beforeNext: { type: Function, default: void 0 },
isLoop: { type: Boolean, default: !0 },
isAutoPlayNext: { type: Boolean, default: !0 },
progressInterval: { default: 500 },
showPlaybackRate: { type: Boolean, default: !0 },
showPlayLoading: { type: Boolean, default: !0 },
playbackRates: { default: () => [0.5, 1, 1.5, 2] },
themeColor: { default: "#EC4141" },
disabledProgressDrag: { type: Boolean, default: !1 },
disabledProgressClick: { type: Boolean, default: !1 }
},
emits: ["timeupdate", "play", "pause", "play-next", "play-prev", "play-error", "ended", "durationchange"],
setup(n, { expose: s, emit: l }) {
const c = _(() => p.mode === "default" ? ao : mo), p = n, i = f(), a = {
play: () => {
var e;
return (e = i.value) == null ? void 0 : e.play();
},
pause: () => {
var e;
return (e = i.value) == null ? void 0 : e.pause();
},
playNext: () => {
var e;
return (e = i.value) == null ? void 0 : e.playNext();
},
playPrev: () => {
var e;
return (e = i.value) == null ? void 0 : e.playPrev();
},
audio: _(() => {
var e;
return (e = i.value) == null ? void 0 : e.audio;
}),
isPlaying: _(() => {
var e;
return (e = i.value) == null ? void 0 : e.isPlaying;
}),
isLoading: _(() => {
var e;
return (e = i.value) == null ? void 0 : e.isLoading;
}),
currentTime: _(() => {
var e;
return (e = i.value) == null ? void 0 : e.currentTime;
}),
duration: _(() => {
var e;
return (e = i.value) == null ? void 0 : e.duration;
}),
currentTimeFormatted: _(() => {
var e;
return (e = i.value) == null ? void 0 : e.currentTimeFormatted;
}),
durationFormatted: _(() => {
var e;
return (e = i.value) == null ? void 0 : e.durationFormatted;
}),
currentVolume: _(() => {
var e;
return (e = i.value) == null ? void 0 : e.currentVolume;
}),
playbackRate: _(() => {
var e;
return (e = i.value) == null ? void 0 : e.playbackRate;
}),
currentPlayIndex: _(() => {
var e;
return (e = i.value) == null ? void 0 : e.currentPlayIndex;
}),
isShowErrorMessage: _(() => {
var e;
return (e = i.value) == null ? void 0 : e.isShowErrorMessage;
}),
noticeMessage: _(() => {
var e;
return (e = i.value) == null ? void 0 : e.noticeMessage;
})
};
return s(a), (e, r) => (m(), Q(he(c.value), te({
ref_key: "audioPlayerRef",
ref: i
}, p, fe(e.$attrs), {
onTimeupdate: r[0] || (r[0] = (u) => e.$emit("timeupdate")),
onPlay: r[1] || (r[1] = (u) => e.$emit("play")),
onPause: r[2] || (r[2] = (u) => e.$emit("pause")),
onPlayNext: r[3] || (r[3] = (u) => e.$emit("play-next")),
onPlayPrev: r[4] || (r[4] = (u) => e.$emit("play-prev")),
onPlayError: r[5] || (r[5] = (u) => e.$emit("play-error", u)),
onEnded: r[6] || (r[6] = (u) => e.$emit("ended", u)),
onDurationchange: r[7] || (r[7] = (u) => e.$emit("durationchange", u))
}), null, 16));
}
}), ho = {
install: (n) => {
n.component("Vue3AudioPlayer", yo);
}
};
export {
yo as Vue3AudioPlayer,
ho as default
};