classroom-instruments/src/views/attend-class/component/audio-pay.tsx

import { defineComponent, onMounted, toRefs } from 'vue';
import styles from './audio.module.less';
import WaveSurfer from 'wavesurfer.js';
import iconplay from '../image/icon-pause.svg';
import iconpause from '../image/icon-play.svg';

export default defineComponent({
  name: 'audio-play',
  props: {
    item: {
      type: Object,
      default: () => {
        return {};
      }
    },
    isEmtry: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const { item, isEmtry } = toRefs(props);
    const audioId = 'a' + +Date.now() + Math.floor(Math.random() * 100);
    onMounted(() => {
      const audio = new Audio();
      audio.controls = true;
      audio.style.width = '100%';
      audio.className = styles.audio;
      document.querySelector(`#${audioId}`)?.appendChild(audio);
      const wavesurfer = WaveSurfer.create({
        container: document.querySelector(`#${audioId}`) as HTMLElement,
        waveColor: '#C5C5C5',
        progressColor: '#02baff',
        url: item.value.content + '?t=' + +new Date(),
        cursorWidth: 0,
        height: 160,
        normalize: true,
        // Set a bar width
        barWidth: 6,
        // Optionally, specify the spacing between bars
        barGap: 12,
        // And the bar radius
        barRadius: 12,
        autoScroll: true,
        /** If autoScroll is enabled, keep the cursor in the center of the waveform during playback */
        autoCenter: true,
        hideScrollbar: false,
        media: audio
      });

      wavesurfer.once('interaction', () => {
        // wavesurfer.play();
      });
    });

    return () => (
      <div class={styles.audioWrap}>
        <div class={styles.audioContainer}>
          <div id={audioId}></div>
        </div>

        <div class={styles.controls}></div>
        {/* <div
          class="plyr__controls bottomFixed ${styles.controls}">
          <div class="${styles.actions}">
            <div class="${styles.actionWrap}">
              <button id="${playBtnId}" class="${styles.actionBtn}">
                <div
                  class="van-loading van-loading--circular"
                  aria-live="polite"
                  aria-busy="true">
                  <span
                    class="van-loading__spinner van-loading__spinner--circular"
                    style="color: rgb(255, 255, 255);">
                    <svg class="van-loading__circular" viewBox="25 25 50 50">
                      <circle cx="50" cy="50" r="20" fill="none"></circle>
                    </svg>
                  </span>
                </div>
                <img class="${styles.playIcon}" src="${iconplay}" />
                <img class="${styles.playIcon}" src="${iconpause}" />
              </button>
            </div>
            <div class="${styles.time}">
              <div
                class="plyr__time plyr__time--current"
                aria-label="Current time">
                00:00
              </div>
              <span class="${styles.line}">/</span>
              <div
                class="plyr__time plyr__time--duration"
                aria-label="Duration">
                00:00
              </div>
            </div>
          </div>
          <div class="${styles.slider}">
            <div class="plyr__progress">
              <input data-plyr="seek" type="range" min="0" max="100" step="0.01" value="0" aria-label="Seek">
                        <progress class="plyr__progress__buffer" min="0" max="100" value="0">% buffered</progress>
              <span role="tooltip" class="plyr__tooltip">
                00:00
              </span>
            </div>
          </div>
        </div> */}
      </div>
    );
  }
});