{"version":3,"file":"index.vue2.mjs","sources":["../../../../../../packages/preview/supports/audio-preview/index.vue"],"sourcesContent":["<script lang='ts' setup>\nimport {computed, getCurrentInstance, onMounted, ref, watch} from 'vue'\nimport type {PreviewProps} from '../../preview.interface'\nimport {getFileRenderByFile, getFileRenderByUrl} from '../../utils/utils'\n\nconst props = withDefaults(\n  defineProps<PreviewProps>(),\n  {\n    url: () => null,\n    file: () => null,\n    name: () => null,\n  },\n)\n\nconst emit = defineEmits<{\n  rendered: []\n  error: [error: Error]\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 * Initialization 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 * Initialization canvas\n */\nfunction initCanvas() {\n  canvasDom.value.width = window.innerWidth * devicePixelRatio\n  canvasDom.value.height = 300\n}\n\n/**\n * Audio playback\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// Columnar\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// Wave\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 * Switch mode\n */\nfunction changeMode() {\n  mode.value = mode.value === 'Columnar' ? 'Wavy' : 'Columnar'\n  mode.value == 'Columnar' ? drawColumnar() : drawWavy()\n}\n\nwatch(\n  () => props.file,\n  (file) => {\n    if (file) {\n      getFileRenderByFile(file).then((render) => {\n        src.value = render\n        emit('rendered')\n      }).catch((e: Error) => {\n        emit('error', e)\n      })\n    }\n  },\n  {immediate: true},\n)\n\nwatch(\n  () => props.url,\n  (url) => {\n    if (url && !props.file) {\n      getFileRenderByUrl(url).then((render) => {\n        src.value = render\n        emit('rendered')\n      }).catch((e: Error) => {\n        emit('error', e)\n      })\n    }\n  },\n  {immediate: true},\n)\nonMounted(() => {\n  initDom() // Initialization Dom\n  audioPlay() // Audio playback\n  initCanvas() // Initialization canvas\n  drawWavy() // Draw waves\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\" crossorigin=\"anonymous\"/>\n      </div>\n      <div>\n        <button class=\"mode-btn\" @click=\"changeMode\">\n          {{ mode }}\n        </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\n.mode-btn {\n  padding: 6px 12px;\n  background: transparent;\n  border: 1px solid #666;\n  border-radius: 4px;\n  color: #999;\n  cursor: pointer;\n  font-size: 14px;\n  transition: all 0.2s;\n\n  &:hover {\n    color: #fff;\n    border-color: #999;\n  }\n}\n</style>\n"],"names":["props","__props","emit","__emit","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","watch","file","getFileRenderByFile","render","e","url","getFileRenderByUrl","onMounted","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_hoisted_3","_hoisted_4","_toDisplayString","_hoisted_5","_hoisted_7","_hoisted_8"],"mappings":"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"}