@cqmcui/cqmcui
Version:
轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）
258 lines (257 loc) • 8.29 kB
JavaScript
import { ref, reactive, onMounted, watch, provide, toRefs, resolveComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, createVNode, withCtx, createCommentVNode, normalizeClass, createBlock, renderSlot } from "vue";
import { c as createComponent } from "./component-81a4c1d0.js";
import { Service } from "@cqmcui/icons-vue";
import Range from "./Range.js";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
import "../locale/lang";
import "./index-7a7385e4.js";
import "./index-29892cda.js";
const { componentName, create } = createComponent("audio");
const _sfc_main = create({
props: {
url: {
type: String,
default: ""
},
// 静音
muted: {
type: Boolean,
default: false
},
// 自动播放
autoplay: {
type: Boolean,
default: false
},
// 循环播放
loop: {
type: Boolean,
default: false
},
// 是否预加载音频
preload: {
type: String,
default: "auto"
},
/* 总时长秒数 */
second: {
type: Number,
default: 0
},
// 展示的形式 controls 控制面板 progress 进度条 icon 图标 none 自定义
type: {
type: String,
default: "progress"
}
},
components: {
Service,
[Range.name]: Range
},
emits: ["fastBack", "play", "forward", "ended", "changeProgress", "mute", "can-play"],
setup(props, { emit, slots }) {
const audioRef = ref(null);
const audioData = reactive({
currentTime: 0,
currentDuration: "00:00:00",
percent: 0,
duration: "00:00:00",
second: 0,
hanMuted: props.muted,
playing: props.autoplay,
handPlaying: false
});
onMounted(() => {
var arr = ["webkitVisibilityState", "visibilitychange"];
try {
for (let i = 0; i < arr.length; i++) {
document.addEventListener(arr[i], () => {
if (document.hidden) {
audioRef.value.pause();
} else {
if (audioData.playing) {
setTimeout(() => {
audioRef.value.play();
}, 200);
}
}
});
}
} catch (e) {
console.log(e.message);
}
});
const onCanplay = (e) => {
const audioR = audioRef.value;
if (props.autoplay) {
if (audioR && audioR.paused) {
audioR.play();
}
}
audioData.second = audioR.duration;
audioData.duration = formatSeconds(audioR.duration);
emit("can-play", e);
};
const onTimeupdate = (e) => {
audioData.currentTime = parseInt(e.target.currentTime);
};
const fastBack = () => {
if (audioData.currentTime > 0) {
audioData.currentTime--;
}
audioRef.value.currentTime = audioData.currentTime;
emit("fastBack", audioData.currentTime);
};
const changeStatus = () => {
const audioR = audioRef.value;
if (audioData.playing) {
audioR.pause();
audioData.handPlaying = false;
} else {
audioR.play();
audioData.handPlaying = true;
}
audioData.playing = !audioData.playing;
emit("play", audioData.playing);
};
const forward = () => {
audioData.currentTime++;
audioRef.value.currentTime = audioData.currentTime;
emit("forward", audioData.currentTime);
};
const handle = (val) => {
audioData.currentDuration = formatSeconds(val);
audioData.percent = val / audioData.second * 100;
};
const audioEnd = () => {
audioData.playing = false;
emit("ended");
};
const progressChange = (val) => {
const ar = audioRef.value;
ar.currentTime = audioData.second * val / 100;
emit("changeProgress", ar.currentTime);
};
const handleMute = () => {
audioData.hanMuted = !audioData.hanMuted;
emit("mute", audioData.hanMuted);
};
const formatSeconds = (value) => {
if (!value) {
return "00:00:00";
}
let time = parseInt(value);
let hours = Math.floor(time / 3600);
let minutes = Math.floor((time - hours * 3600) / 60);
let seconds = time - hours * 3600 - minutes * 60;
let result = "";
result += ("0" + hours.toString()).slice(-2) + ":";
result += ("0" + minutes.toString()).slice(-2) + ":";
result += ("0" + seconds.toString()).slice(-2);
return result;
};
watch(
() => audioData.currentTime,
(value) => {
handle(value);
}
);
provide("audioParent", {
children: [],
props,
audioData,
handleMute,
forward,
fastBack,
changeStatus
});
return {
...toRefs(props),
...toRefs(audioData),
audioRef,
fastBack,
forward,
changeStatus,
progressChange,
audioEnd,
onTimeupdate,
handleMute,
onCanplay,
slots
};
}
});
const _hoisted_1 = { class: "cqmc-audio" };
const _hoisted_2 = {
key: 0,
class: "cqmc-audio__progress"
};
const _hoisted_3 = { class: "cqmc-audio__time" };
const _hoisted_4 = { class: "cqmc-audio__bar" };
const _hoisted_5 = /* @__PURE__ */ createElementVNode("div", { class: "cqmc-audio__button--custom" }, null, -1);
const _hoisted_6 = { class: "cqmc-audio__time" };
const _hoisted_7 = {
key: 1,
class: "cqmc-audio__icon"
};
const _hoisted_8 = ["controls", "src", "preload", "autoplay", "loop", "muted"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_nut_range = resolveComponent("cqmc-range");
const _component_Service = resolveComponent("Service");
return openBlock(), createElementBlock("div", _hoisted_1, [
_ctx.type == "progress" ? (openBlock(), createElementBlock("div", _hoisted_2, [
createElementVNode("div", _hoisted_3, toDisplayString(_ctx.currentDuration), 1),
createElementVNode("div", _hoisted_4, [
createVNode(_component_nut_range, {
modelValue: _ctx.percent,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.percent = $event),
"hidden-range": "",
onChange: _ctx.progressChange,
"inactive-color": "#cccccc",
"active-color": "#fa2c19"
}, {
button: withCtx(() => [
_hoisted_5
]),
_: 1
}, 8, ["modelValue", "onChange"])
]),
createElementVNode("div", _hoisted_6, toDisplayString(_ctx.duration), 1)
])) : createCommentVNode("", true),
_ctx.type == "icon" ? (openBlock(), createElementBlock("div", _hoisted_7, [
createElementVNode("div", {
class: normalizeClass(["cqmc-audio__icon--box", _ctx.playing ? "cqmc-audio__icon--play" : "cqmc-audio__icon--stop"]),
onClick: _cache[1] || (_cache[1] = (...args) => _ctx.changeStatus && _ctx.changeStatus(...args))
}, [
_ctx.playing ? (openBlock(), createBlock(_component_Service, {
key: 0,
class: "cqmc-icon-am-rotate cqmc-icon-am-infinite"
})) : (openBlock(), createBlock(_component_Service, { key: 1 }))
], 2)
])) : createCommentVNode("", true),
_ctx.type == "none" ? (openBlock(), createElementBlock("div", {
key: 2,
onClick: _cache[2] || (_cache[2] = (...args) => _ctx.changeStatus && _ctx.changeStatus(...args))
}, [
renderSlot(_ctx.$slots, "default")
])) : createCommentVNode("", true),
_ctx.type != "none" ? renderSlot(_ctx.$slots, "default", { key: 3 }) : createCommentVNode("", true),
createElementVNode("audio", {
class: "audioMain",
controls: _ctx.type == "controls",
ref: "audioRef",
src: _ctx.url,
preload: _ctx.preload,
autoplay: _ctx.autoplay,
loop: _ctx.loop,
onTimeupdate: _cache[3] || (_cache[3] = (...args) => _ctx.onTimeupdate && _ctx.onTimeupdate(...args)),
onCanplay: _cache[4] || (_cache[4] = (...args) => _ctx.onCanplay && _ctx.onCanplay(...args)),
onEnded: _cache[5] || (_cache[5] = (...args) => _ctx.audioEnd && _ctx.audioEnd(...args)),
muted: _ctx.hanMuted
}, null, 40, _hoisted_8)
]);
}
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
index as default
};