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