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

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

{"version":3,"file":"index.vue2.mjs","sources":["../../../../../../packages/preview/supports/audio-preview/index.vue"],"sourcesContent":["<script lang='ts' setup>\nimport {computed, getCurrentInstance, onBeforeMount, onMounted, ref} from 'vue'\nimport type {PreviewProps} from '../../preview.interface'\nimport {getFileRenderByFile} from '../../utils/utils'\n\nconst props = withDefaults(\n    defineProps<PreviewProps>(),\n    {\n      file: () => null,\n      name: () => null,\n    },\n)\n\nconst {proxy} = getCurrentInstance() as any\n\nconst audioDom = ref()\nconst ulDom = ref()\nconst containerDom = ref()\nconst canvasDom = ref()\nconst ctx = ref()\nconst isInit = ref(false)\nconst analyser = ref()\nconst dataSource = ref()\nconst mode = ref('Wavy')\nconst src = ref(null)\n\n/**\n * 初始化 Dom\n */\nfunction initDom(): void {\n  audioDom.value = proxy.$refs.audioRef as HTMLAudioElement\n  ulDom.value = proxy.$refs.ulRef as HTMLUListElement\n  containerDom.value = proxy.$refs.containerRef as HTMLDivElement\n  canvasDom.value = proxy.$refs.canvasRef as HTMLDivElement\n  ctx.value = canvasDom.value.getContext('2d')\n}\n\nconst containerHeight = computed(() => {\n  return containerDom.value?.clientHeight\n})\nconst liHeight = computed(() => {\n  return ulDom.value.children[0]?.clientHeight\n})\nconst maxOffset = computed(() => {\n  return ulDom.value?.clientHeight - containerHeight.value\n})\n\n/**\n * 初始化canvas\n */\nfunction initCanvas() {\n  canvasDom.value.width = window.innerWidth * devicePixelRatio\n  canvasDom.value.height = 300\n}\n\n/**\n * 音频播放\n */\nfunction audioPlay() {\n  audioDom.value.onplay = () => {\n    if (isInit.value)\n      return\n    const audCtx = new AudioContext() // 音频上下文\n    const source = audCtx.createMediaElementSource(audioDom.value) // 音频源节点\n    analyser.value = audCtx.createAnalyser()\n    analyser.value.fftSize = 512\n    dataSource.value = new Uint8Array(analyser.value.frequencyBinCount)\n    source.connect(analyser.value)\n    analyser.value.connect(audCtx.destination)\n\n    isInit.value = true\n  }\n}\n\n// 柱状\nfunction drawColumnar() {\n  requestAnimationFrame(drawColumnar)\n  const {width, height} = canvasDom.value\n  ctx.value.clearRect(0, 0, width, height)\n  if (!isInit.value)\n    return\n  if (dataSource.value) {\n    analyser.value && analyser.value.getByteFrequencyData(dataSource.value)\n\n    const len = dataSource.value.length\n    const barWidth = width / len\n    ctx.value.fillStyle = 'skyblue'\n    dataSource.value.forEach((v, i) => {\n      const barHeight = v / 255 * height\n      const x = i * barWidth\n      const y = height - barHeight\n      ctx.value.fillRect(x, y, barWidth, barHeight)\n    })\n  }\n}\n\n// 波浪\nfunction drawWavy() {\n  requestAnimationFrame(drawWavy)\n  const {width, height} = canvasDom.value\n  ctx.value.clearRect(0, 0, width, height)\n  if (!isInit.value)\n    return\n  if (dataSource.value) {\n    analyser.value && analyser.value.getByteFrequencyData(dataSource.value)\n\n    const len = dataSource.value.length\n    const sliceWidth = width * 1.0 / len\n    let x = 0\n\n    ctx.value.beginPath()\n    ctx.value.strokeStyle = 'skyblue'\n    dataSource.value.forEach((v, i) => {\n      const vNormalized = v / 255\n      const y = vNormalized * height / 2\n\n      if (i === 0)\n        ctx.value.moveTo(x, y)\n      else\n        ctx.value.lineTo(x, y)\n\n      x += sliceWidth\n    })\n\n    ctx.value.lineTo(width, height / 2)\n    ctx.value.stroke()\n  }\n}\n\n/**\n * 切换模式\n */\nfunction changeMode() {\n  mode.value = mode.value === 'Columnar' ? 'Wavy' : 'Columnar'\n  mode.value == 'Columnar' ? drawColumnar() : drawWavy()\n}\n\nonBeforeMount(() => {\n  getFileRenderByFile(props.file).then((render) => {\n    src.value = render\n  })\n})\nonMounted(() => {\n  initDom() // 初始化 Dom\n  audioPlay() // 音频播放\n  initCanvas() // 初始化 canvas\n  drawWavy() // 绘制波浪\n})\n</script>\n\n<template>\n  <div class=\"audio-preview music-container flex flex-column flex-align\">\n    <div class=\"audio-container flex-align\">\n      <div class=\"flex-column\" style=\"margin-left: 0.5rem;\">\n        <div style=\"font-size: 1.6rem; color: #999;\">\n          {{ name }}\n        </div>\n      </div>\n      <div class=\"mp3Box\">\n        <audio ref=\"audioRef\" controls :src=\"src\"/>\n      </div>\n      <div>\n        <el-button link @click=\"changeMode\">\n          {{ mode }}\n        </el-button>\n      </div>\n    </div>\n    <div class=\"cvs-container\">\n      <canvas ref=\"canvasRef\"/>\n    </div>\n  </div>\n</template>\n\n<style scoped lang=\"scss\">\n.music-container {\n  height: 100vh;\n  background: #1b1d1d;\n\n  audio {\n    width: 450px;\n    margin: 0 1.2rem;\n    background: #303233;\n    border-radius: 54px;\n  }\n\n  audio::-webkit-media-controls-panel {\n    background-image: initial;\n    background-color: #777;\n    transition: none;\n  }\n\n  audio::-webkit-media-controls-current-time-display,\n  audio::-webkit-media-controls-time-remaining-display {\n    background: #777;\n    text-shadow: none;\n  }\n\n  .audio-container {\n    height: 5.2rem;\n    // border: 1px solid #777;\n  }\n\n  .lrc-container {\n    width: 100%;\n    padding-top: 30px;\n    flex: 1;\n    height: 220px;\n    text-align: center;\n    overflow: hidden;\n    position: relative;\n\n    &::before,\n    &::after {\n      content: \"\";\n      position: absolute;\n      left: 0;\n      width: 100%;\n      height: 100px;\n      background: linear-gradient(to bottom, rgba(27, 29, 29, 1), rgba(255, 255, 255, 0));\n      pointer-events: none;\n    }\n\n    &::before {\n      top: 0;\n    }\n\n    &::after {\n      bottom: 0;\n      transform: rotate(180deg);\n    }\n\n    ul {\n      transition: 0.6s;\n      list-style: none;\n      color: #ffffff70;\n\n      li {\n        height: 30px;\n        line-height: 30px;\n        transition: 0.2s;\n\n        &.active {\n          font-weight: 700;\n          color: #fff;\n          transform: scale(1.2);\n        }\n      }\n    }\n  }\n\n  .cvs-container {\n    padding-top: 10px;\n  }\n}\n\n.flex-column {\n  display: flex;\n  flex-direction: column;\n}\n\n.flex-align {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n</style>\n"],"names":["props","__props","proxy","getCurrentInstance","audioDom","ref","ulDom","containerDom","canvasDom","ctx","isInit","analyser","dataSource","mode","src","initDom","containerHeight","computed","_a","initCanvas","audioPlay","audCtx","source","drawColumnar","width","height","len","barWidth","v","i","barHeight","x","y","drawWavy","sliceWidth","changeMode","onBeforeMount","getFileRenderByFile","render","onMounted"],"mappings":"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"}