vue-files-preview/es/packages/preview/supports/audio-preview/index.vue2.mjs

A tool for previewing files such as doc, excel, pdf, image, markdown, txt, audio, and video and so on.

import { defineComponent as E, getCurrentInstance as H, ref as a, computed as x, onBeforeMount as N, onMounted as z, resolveComponent as M, openBlock as T, createElementBlock as $, createElementVNode as u, toDisplayString as B, createVNode as P, withCtx as V, createTextVNode as I } from "vue";
import { getFileRenderByFile as U } from "../../utils/utils.mjs";
const j = { class: "audio-preview music-container flex flex-column flex-align" }, G = { class: "audio-container flex-align" }, J = {
  class: "flex-column",
  style: { "margin-left": "0.5rem" }
}, K = { style: { "font-size": "1.6rem", color: "#999" } }, L = { class: "mp3Box" }, O = ["src"], Q = { class: "cvs-container" }, X = { ref: "canvasRef" }, ee = /* @__PURE__ */ E({
  __name: "index",
  props: {
    file: { default: () => null },
    url: {},
    name: { default: () => null }
  },
  setup(D) {
    const b = D, { proxy: r } = H(), _ = a(), y = a(), C = a(), i = a(), t = a(), v = a(!1), l = a(), o = a(), d = a("Wavy"), w = a(null);
    function F() {
      _.value = r.$refs.audioRef, y.value = r.$refs.ulRef, C.value = r.$refs.containerRef, i.value = r.$refs.canvasRef, t.value = i.value.getContext("2d");
    }
    const S = x(() => {
      var e;
      return (e = C.value) == null ? void 0 : e.clientHeight;
    });
    x(() => {
      var e;
      return (e = y.value.children[0]) == null ? void 0 : e.clientHeight;
    }), x(() => {
      var e;
      return ((e = y.value) == null ? void 0 : e.clientHeight) - S.value;
    });
    function W() {
      i.value.width = window.innerWidth * devicePixelRatio, i.value.height = 300;
    }
    function q() {
      _.value.onplay = () => {
        if (v.value)
          return;
        const e = new AudioContext(), n = e.createMediaElementSource(_.value);
        l.value = e.createAnalyser(), l.value.fftSize = 512, o.value = new Uint8Array(l.value.frequencyBinCount), n.connect(l.value), l.value.connect(e.destination), v.value = !0;
      };
    }
    function R() {
      requestAnimationFrame(R);
      const { width: e, height: n } = i.value;
      if (t.value.clearRect(0, 0, e, n), !!v.value && o.value) {
        l.value && l.value.getByteFrequencyData(o.value);
        const c = o.value.length, f = e / c;
        t.value.fillStyle = "skyblue", o.value.forEach((s, p) => {
          const m = s / 255 * n, k = p * f, h = n - m;
          t.value.fillRect(k, h, f, m);
        });
      }
    }
    function g() {
      requestAnimationFrame(g);
      const { width: e, height: n } = i.value;
      if (t.value.clearRect(0, 0, e, n), !!v.value && o.value) {
        l.value && l.value.getByteFrequencyData(o.value);
        const c = o.value.length, f = e * 1 / c;
        let s = 0;
        t.value.beginPath(), t.value.strokeStyle = "skyblue", o.value.forEach((p, m) => {
          const h = p / 255 * n / 2;
          m === 0 ? t.value.moveTo(s, h) : t.value.lineTo(s, h), s += f;
        }), t.value.lineTo(e, n / 2), t.value.stroke();
      }
    }
    function A() {
      d.value = d.value === "Columnar" ? "Wavy" : "Columnar", d.value == "Columnar" ? R() : g();
    }
    return N(() => {
      U(b.file).then((e) => {
        w.value = e;
      });
    }), z(() => {
      F(), q(), W(), g();
    }), (e, n) => {
      const c = M("el-button");
      return T(), $("div", j, [
        u("div", G, [
          u("div", J, [
            u("div", K, B(e.name), 1)
          ]),
          u("div", L, [
            u("audio", {
              ref: "audioRef",
              controls: "",
              src: w.value
            }, null, 8, O)
          ]),
          u("div", null, [
            P(c, {
              link: "",
              onClick: A
            }, {
              default: V(() => [
                I(B(d.value), 1)
              ]),
              _: 1
            })
          ])
        ]),
        u("div", Q, [
          u("canvas", X, null, 512)
        ])
      ]);
    };
  }
});
export {
  ee as default
};
//# sourceMappingURL=index.vue2.mjs.map