|  | @@ -1,239 +1,239 @@
 | 
	
		
			
				|  |  | -import { defineComponent, reactive, ref, nextTick } from 'vue';
 | 
	
		
			
				|  |  | -import styles from './index.module.less';
 | 
	
		
			
				|  |  | -import iconplay from '@views/attend-class/image/icon-pause.png';
 | 
	
		
			
				|  |  | -import iconpause from '@views/attend-class/image/icon-play.png';
 | 
	
		
			
				|  |  | -import iconReplay from '@views/attend-class/image/icon-replay.png';
 | 
	
		
			
				|  |  | -import iconPreviewDownload from '@views/attend-class/image/icon-preivew-download.png';
 | 
	
		
			
				|  |  | -import { NSlider, useMessage } from 'naive-ui';
 | 
	
		
			
				|  |  | -import Vudio from 'vudio.js';
 | 
	
		
			
				|  |  | -import tickMp3 from '@views/attend-class/image/tick.mp3';
 | 
	
		
			
				|  |  | -import { saveAs } from 'file-saver';
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -export default defineComponent({
 | 
	
		
			
				|  |  | -  name: 'audio-play',
 | 
	
		
			
				|  |  | -  props: {
 | 
	
		
			
				|  |  | -    item: {
 | 
	
		
			
				|  |  | -      type: Object,
 | 
	
		
			
				|  |  | -      default: () => {
 | 
	
		
			
				|  |  | -        return {};
 | 
	
		
			
				|  |  | -      }
 | 
	
		
			
				|  |  | -    },
 | 
	
		
			
				|  |  | -    isEmtry: {
 | 
	
		
			
				|  |  | -      type: Boolean,
 | 
	
		
			
				|  |  | -      default: false
 | 
	
		
			
				|  |  | -    },
 | 
	
		
			
				|  |  | -    isDownload: {
 | 
	
		
			
				|  |  | -      type: Boolean,
 | 
	
		
			
				|  |  | -      default: false
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -  },
 | 
	
		
			
				|  |  | -  setup(props) {
 | 
	
		
			
				|  |  | -    const message = useMessage();
 | 
	
		
			
				|  |  | -    const audioForms = reactive({
 | 
	
		
			
				|  |  | -      paused: true,
 | 
	
		
			
				|  |  | -      currentTimeNum: 0,
 | 
	
		
			
				|  |  | -      currentTime: '00:00',
 | 
	
		
			
				|  |  | -      durationNum: 0,
 | 
	
		
			
				|  |  | -      duration: '00:00',
 | 
	
		
			
				|  |  | -      showBar: true,
 | 
	
		
			
				|  |  | -      afterMa3: true
 | 
	
		
			
				|  |  | -    });
 | 
	
		
			
				|  |  | -    const canvas: any = ref();
 | 
	
		
			
				|  |  | -    const audio: any = ref();
 | 
	
		
			
				|  |  | -    let vudio: any = null;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    // 切换音频播放
 | 
	
		
			
				|  |  | -    const onToggleAudio = (e?: MouseEvent) => {
 | 
	
		
			
				|  |  | -      e?.stopPropagation();
 | 
	
		
			
				|  |  | -      if (audio.value.paused) {
 | 
	
		
			
				|  |  | -        onInit(audio.value, canvas.value);
 | 
	
		
			
				|  |  | -        audio.value.play();
 | 
	
		
			
				|  |  | -        audioForms.afterMa3 = false;
 | 
	
		
			
				|  |  | -      } else {
 | 
	
		
			
				|  |  | -        audio.value.pause();
 | 
	
		
			
				|  |  | -      }
 | 
	
		
			
				|  |  | -      audioForms.paused = audio.value.paused;
 | 
	
		
			
				|  |  | -    };
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    const onInit = (audio: undefined, canvas: undefined) => {
 | 
	
		
			
				|  |  | -      if (!vudio) {
 | 
	
		
			
				|  |  | -        vudio = new Vudio(audio, canvas, {
 | 
	
		
			
				|  |  | -          effect: 'waveform',
 | 
	
		
			
				|  |  | -          accuracy: 256,
 | 
	
		
			
				|  |  | -          width: 1024,
 | 
	
		
			
				|  |  | -          height: 600,
 | 
	
		
			
				|  |  | -          waveform: {
 | 
	
		
			
				|  |  | -            maxHeight: 200,
 | 
	
		
			
				|  |  | -            color: [
 | 
	
		
			
				|  |  | -              [0, '#44D1FF'],
 | 
	
		
			
				|  |  | -              [0.5, '#44D1FF'],
 | 
	
		
			
				|  |  | -              [0.5, '#198CFE'],
 | 
	
		
			
				|  |  | -              [1, '#198CFE']
 | 
	
		
			
				|  |  | -            ],
 | 
	
		
			
				|  |  | -            prettify: false
 | 
	
		
			
				|  |  | -          }
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -        vudio.dance();
 | 
	
		
			
				|  |  | -      }
 | 
	
		
			
				|  |  | -    };
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    // 对时间进行格式化
 | 
	
		
			
				|  |  | -    const timeFormat = (num: number) => {
 | 
	
		
			
				|  |  | -      if (num > 0) {
 | 
	
		
			
				|  |  | -        const m = Math.floor(num / 60);
 | 
	
		
			
				|  |  | -        const s = num % 60;
 | 
	
		
			
				|  |  | -        return (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s);
 | 
	
		
			
				|  |  | -      } else {
 | 
	
		
			
				|  |  | -        return '00:00';
 | 
	
		
			
				|  |  | -      }
 | 
	
		
			
				|  |  | -    };
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    const onReplay = () => {
 | 
	
		
			
				|  |  | -      if (!audio.value) return;
 | 
	
		
			
				|  |  | -      audio.value.currentTime = 0;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -      console.log(props.item);
 | 
	
		
			
				|  |  | -    };
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    // 下载资源
 | 
	
		
			
				|  |  | -    const onDownload = () => {
 | 
	
		
			
				|  |  | -      if (!props.item.content) {
 | 
	
		
			
				|  |  | -        message.error('下载失败');
 | 
	
		
			
				|  |  | -        return;
 | 
	
		
			
				|  |  | -      }
 | 
	
		
			
				|  |  | -      const fileUrl = props.item.content;
 | 
	
		
			
				|  |  | -      const filename = props.item.title;
 | 
	
		
			
				|  |  | -      // 发起Fetch请求
 | 
	
		
			
				|  |  | -      fetch(fileUrl)
 | 
	
		
			
				|  |  | -        .then(response => response.blob())
 | 
	
		
			
				|  |  | -        .then(blob => {
 | 
	
		
			
				|  |  | -          saveAs(blob, filename || new Date().getTime() + '.mp3');
 | 
	
		
			
				|  |  | -        })
 | 
	
		
			
				|  |  | -        .catch(() => {
 | 
	
		
			
				|  |  | -          message.error('下载失败');
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -    };
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    let vudio1 = null;
 | 
	
		
			
				|  |  | -    const canvas1: any = ref();
 | 
	
		
			
				|  |  | -    const audio1: any = ref();
 | 
	
		
			
				|  |  | -    nextTick(() => {
 | 
	
		
			
				|  |  | -      vudio1 = new Vudio(audio1.value, canvas1.value, {
 | 
	
		
			
				|  |  | -        effect: 'waveform',
 | 
	
		
			
				|  |  | -        accuracy: 256,
 | 
	
		
			
				|  |  | -        width: 1024,
 | 
	
		
			
				|  |  | -        height: 600,
 | 
	
		
			
				|  |  | -        waveform: {
 | 
	
		
			
				|  |  | -          maxHeight: 200,
 | 
	
		
			
				|  |  | -          color: [
 | 
	
		
			
				|  |  | -            [0, '#44D1FF'],
 | 
	
		
			
				|  |  | -            [0.5, '#44D1FF'],
 | 
	
		
			
				|  |  | -            [0.5, '#198CFE'],
 | 
	
		
			
				|  |  | -            [1, '#198CFE']
 | 
	
		
			
				|  |  | -          ],
 | 
	
		
			
				|  |  | -          prettify: false
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -      });
 | 
	
		
			
				|  |  | -      vudio1.dance();
 | 
	
		
			
				|  |  | -    });
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    return () => (
 | 
	
		
			
				|  |  | -      <div class={styles.audioWrap}>
 | 
	
		
			
				|  |  | -        <div class={styles.audioContainer}>
 | 
	
		
			
				|  |  | -          <audio
 | 
	
		
			
				|  |  | -            ref={audio}
 | 
	
		
			
				|  |  | -            crossorigin="anonymous"
 | 
	
		
			
				|  |  | -            src={props.item.content + '?time=1'}
 | 
	
		
			
				|  |  | -            onEnded={() => {
 | 
	
		
			
				|  |  | -              audioForms.paused = true;
 | 
	
		
			
				|  |  | -            }}
 | 
	
		
			
				|  |  | -            onTimeupdate={() => {
 | 
	
		
			
				|  |  | -              audioForms.currentTime = timeFormat(
 | 
	
		
			
				|  |  | -                Math.floor(audio.value?.currentTime || 0)
 | 
	
		
			
				|  |  | -              );
 | 
	
		
			
				|  |  | -              audioForms.currentTimeNum = audio.value.currentTime;
 | 
	
		
			
				|  |  | -            }}
 | 
	
		
			
				|  |  | -            onLoadedmetadata={() => {
 | 
	
		
			
				|  |  | -              audioForms.duration = timeFormat(
 | 
	
		
			
				|  |  | -                Math.floor(audio.value.duration)
 | 
	
		
			
				|  |  | -              );
 | 
	
		
			
				|  |  | -              audioForms.durationNum = audio.value.duration;
 | 
	
		
			
				|  |  | -            }}></audio>
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -          <canvas ref={canvas}></canvas>
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -          {audioForms.afterMa3 && (
 | 
	
		
			
				|  |  | -            <div class={styles.tempVudio}>
 | 
	
		
			
				|  |  | -              <audio ref={audio1} src={tickMp3} />
 | 
	
		
			
				|  |  | -              <canvas ref={canvas1}></canvas>
 | 
	
		
			
				|  |  | -            </div>
 | 
	
		
			
				|  |  | -          )}
 | 
	
		
			
				|  |  | -        </div>
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        <div
 | 
	
		
			
				|  |  | -          class={[
 | 
	
		
			
				|  |  | -            styles.controls,
 | 
	
		
			
				|  |  | -            audioForms.showBar ? '' : styles.sectionAnimate
 | 
	
		
			
				|  |  | -          ]}
 | 
	
		
			
				|  |  | -          onClick={(e: MouseEvent) => {
 | 
	
		
			
				|  |  | -            e.stopPropagation();
 | 
	
		
			
				|  |  | -          }}>
 | 
	
		
			
				|  |  | -          <div class={styles.actions}>
 | 
	
		
			
				|  |  | -            <div class={styles.actionWrap}>
 | 
	
		
			
				|  |  | -              <button class={styles.actionBtn} onClick={onToggleAudio}>
 | 
	
		
			
				|  |  | -                {audioForms.paused ? (
 | 
	
		
			
				|  |  | -                  <img class={styles.playIcon} src={iconplay} />
 | 
	
		
			
				|  |  | -                ) : (
 | 
	
		
			
				|  |  | -                  <img class={styles.playIcon} src={iconpause} />
 | 
	
		
			
				|  |  | -                )}
 | 
	
		
			
				|  |  | -              </button>
 | 
	
		
			
				|  |  | -              <button class={styles.iconReplay} onClick={onReplay}>
 | 
	
		
			
				|  |  | -                <img src={iconReplay} />
 | 
	
		
			
				|  |  | -              </button>
 | 
	
		
			
				|  |  | -            </div>
 | 
	
		
			
				|  |  | -          </div>
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -          <div class={styles.slider}>
 | 
	
		
			
				|  |  | -            <NSlider
 | 
	
		
			
				|  |  | -              value={audioForms.currentTimeNum}
 | 
	
		
			
				|  |  | -              step={0.01}
 | 
	
		
			
				|  |  | -              max={audioForms.durationNum}
 | 
	
		
			
				|  |  | -              tooltip={false}
 | 
	
		
			
				|  |  | -              onUpdate:value={(val: number) => {
 | 
	
		
			
				|  |  | -                audio.value.currentTime = val;
 | 
	
		
			
				|  |  | -                audioForms.currentTimeNum = val;
 | 
	
		
			
				|  |  | -                audioForms.currentTime = timeFormat(Math.round(val || 0));
 | 
	
		
			
				|  |  | -              }}
 | 
	
		
			
				|  |  | -            />
 | 
	
		
			
				|  |  | -          </div>
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -          <div class={styles.actions}>
 | 
	
		
			
				|  |  | -            <div class={styles.time}>
 | 
	
		
			
				|  |  | -              <div
 | 
	
		
			
				|  |  | -                class="plyr__time plyr__time--current"
 | 
	
		
			
				|  |  | -                aria-label="Current time">
 | 
	
		
			
				|  |  | -                {audioForms.currentTime}
 | 
	
		
			
				|  |  | -              </div>
 | 
	
		
			
				|  |  | -              <span class={styles.line}>/</span>
 | 
	
		
			
				|  |  | -              <div
 | 
	
		
			
				|  |  | -                class="plyr__time plyr__time--duration"
 | 
	
		
			
				|  |  | -                aria-label="Duration">
 | 
	
		
			
				|  |  | -                {audioForms.duration}
 | 
	
		
			
				|  |  | -              </div>
 | 
	
		
			
				|  |  | -            </div>
 | 
	
		
			
				|  |  | -            <div class={styles.actionWrap}>
 | 
	
		
			
				|  |  | -              {props.isDownload && (
 | 
	
		
			
				|  |  | -                <button
 | 
	
		
			
				|  |  | -                  class={styles.iconReplay}
 | 
	
		
			
				|  |  | -                  onClick={onDownload}
 | 
	
		
			
				|  |  | -                  style={{ marginLeft: '15px' }}>
 | 
	
		
			
				|  |  | -                  <img src={iconPreviewDownload} />
 | 
	
		
			
				|  |  | -                </button>
 | 
	
		
			
				|  |  | -              )}
 | 
	
		
			
				|  |  | -            </div>
 | 
	
		
			
				|  |  | -          </div>
 | 
	
		
			
				|  |  | -        </div>
 | 
	
		
			
				|  |  | -      </div>
 | 
	
		
			
				|  |  | -    );
 | 
	
		
			
				|  |  | -  }
 | 
	
		
			
				|  |  | -});
 | 
	
		
			
				|  |  | +import { defineComponent, reactive, ref, nextTick } from 'vue';
 | 
	
		
			
				|  |  | +import styles from './index.module.less';
 | 
	
		
			
				|  |  | +import iconplay from '@views/attend-class/image/icon-pause.png';
 | 
	
		
			
				|  |  | +import iconpause from '@views/attend-class/image/icon-play.png';
 | 
	
		
			
				|  |  | +import iconReplay from '@views/attend-class/image/icon-replay.png';
 | 
	
		
			
				|  |  | +import iconPreviewDownload from '@views/attend-class/image/icon-preivew-download.png';
 | 
	
		
			
				|  |  | +import { NSlider, useMessage } from 'naive-ui';
 | 
	
		
			
				|  |  | +import Vudio from 'vudio.js';
 | 
	
		
			
				|  |  | +import tickMp3 from '@views/attend-class/image/tick.mp3';
 | 
	
		
			
				|  |  | +import { saveAs } from 'file-saver';
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +export default defineComponent({
 | 
	
		
			
				|  |  | +  name: 'audio-play',
 | 
	
		
			
				|  |  | +  props: {
 | 
	
		
			
				|  |  | +    item: {
 | 
	
		
			
				|  |  | +      type: Object,
 | 
	
		
			
				|  |  | +      default: () => {
 | 
	
		
			
				|  |  | +        return {};
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    isEmtry: {
 | 
	
		
			
				|  |  | +      type: Boolean,
 | 
	
		
			
				|  |  | +      default: false
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    isDownload: {
 | 
	
		
			
				|  |  | +      type: Boolean,
 | 
	
		
			
				|  |  | +      default: false
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  setup(props) {
 | 
	
		
			
				|  |  | +    const message = useMessage();
 | 
	
		
			
				|  |  | +    const audioForms = reactive({
 | 
	
		
			
				|  |  | +      paused: true,
 | 
	
		
			
				|  |  | +      currentTimeNum: 0,
 | 
	
		
			
				|  |  | +      currentTime: '00:00',
 | 
	
		
			
				|  |  | +      durationNum: 0,
 | 
	
		
			
				|  |  | +      duration: '00:00',
 | 
	
		
			
				|  |  | +      showBar: true,
 | 
	
		
			
				|  |  | +      afterMa3: true
 | 
	
		
			
				|  |  | +    });
 | 
	
		
			
				|  |  | +    const canvas: any = ref();
 | 
	
		
			
				|  |  | +    const audio: any = ref();
 | 
	
		
			
				|  |  | +    let vudio: any = null;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    // 切换音频播放
 | 
	
		
			
				|  |  | +    const onToggleAudio = (e?: MouseEvent) => {
 | 
	
		
			
				|  |  | +      e?.stopPropagation();
 | 
	
		
			
				|  |  | +      if (audio.value.paused) {
 | 
	
		
			
				|  |  | +        onInit(audio.value, canvas.value);
 | 
	
		
			
				|  |  | +        audio.value.play();
 | 
	
		
			
				|  |  | +        audioForms.afterMa3 = false;
 | 
	
		
			
				|  |  | +      } else {
 | 
	
		
			
				|  |  | +        audio.value.pause();
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +      audioForms.paused = audio.value.paused;
 | 
	
		
			
				|  |  | +    };
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    const onInit = (audio: undefined, canvas: undefined) => {
 | 
	
		
			
				|  |  | +      if (!vudio) {
 | 
	
		
			
				|  |  | +        vudio = new Vudio(audio, canvas, {
 | 
	
		
			
				|  |  | +          effect: 'waveform',
 | 
	
		
			
				|  |  | +          accuracy: 256,
 | 
	
		
			
				|  |  | +          width: 1024,
 | 
	
		
			
				|  |  | +          height: 600,
 | 
	
		
			
				|  |  | +          waveform: {
 | 
	
		
			
				|  |  | +            maxHeight: 200,
 | 
	
		
			
				|  |  | +            color: [
 | 
	
		
			
				|  |  | +              [0, '#44D1FF'],
 | 
	
		
			
				|  |  | +              [0.5, '#44D1FF'],
 | 
	
		
			
				|  |  | +              [0.5, '#198CFE'],
 | 
	
		
			
				|  |  | +              [1, '#198CFE']
 | 
	
		
			
				|  |  | +            ],
 | 
	
		
			
				|  |  | +            prettify: false
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +        });
 | 
	
		
			
				|  |  | +        vudio.dance();
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    };
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    // 对时间进行格式化
 | 
	
		
			
				|  |  | +    const timeFormat = (num: number) => {
 | 
	
		
			
				|  |  | +      if (num > 0) {
 | 
	
		
			
				|  |  | +        const m = Math.floor(num / 60);
 | 
	
		
			
				|  |  | +        const s = num % 60;
 | 
	
		
			
				|  |  | +        return (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s);
 | 
	
		
			
				|  |  | +      } else {
 | 
	
		
			
				|  |  | +        return '00:00';
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    };
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    const onReplay = () => {
 | 
	
		
			
				|  |  | +      if (!audio.value) return;
 | 
	
		
			
				|  |  | +      audio.value.currentTime = 0;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +      console.log(props.item);
 | 
	
		
			
				|  |  | +    };
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    // 下载资源
 | 
	
		
			
				|  |  | +    const onDownload = () => {
 | 
	
		
			
				|  |  | +      if (!props.item.content) {
 | 
	
		
			
				|  |  | +        message.error('下载失败');
 | 
	
		
			
				|  |  | +        return;
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +      const fileUrl = props.item.content;
 | 
	
		
			
				|  |  | +      const filename = props.item.title;
 | 
	
		
			
				|  |  | +      // 发起Fetch请求
 | 
	
		
			
				|  |  | +      fetch(fileUrl)
 | 
	
		
			
				|  |  | +        .then(response => response.blob())
 | 
	
		
			
				|  |  | +        .then(blob => {
 | 
	
		
			
				|  |  | +          saveAs(blob, filename || new Date().getTime() + '.mp3');
 | 
	
		
			
				|  |  | +        })
 | 
	
		
			
				|  |  | +        .catch(() => {
 | 
	
		
			
				|  |  | +          message.error('下载失败');
 | 
	
		
			
				|  |  | +        });
 | 
	
		
			
				|  |  | +    };
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    let vudio1 = null;
 | 
	
		
			
				|  |  | +    const canvas1: any = ref();
 | 
	
		
			
				|  |  | +    const audio1: any = ref();
 | 
	
		
			
				|  |  | +    nextTick(() => {
 | 
	
		
			
				|  |  | +      vudio1 = new Vudio(audio1.value, canvas1.value, {
 | 
	
		
			
				|  |  | +        effect: 'waveform',
 | 
	
		
			
				|  |  | +        accuracy: 256,
 | 
	
		
			
				|  |  | +        width: 1024,
 | 
	
		
			
				|  |  | +        height: 600,
 | 
	
		
			
				|  |  | +        waveform: {
 | 
	
		
			
				|  |  | +          maxHeight: 200,
 | 
	
		
			
				|  |  | +          color: [
 | 
	
		
			
				|  |  | +            [0, '#44D1FF'],
 | 
	
		
			
				|  |  | +            [0.5, '#44D1FF'],
 | 
	
		
			
				|  |  | +            [0.5, '#198CFE'],
 | 
	
		
			
				|  |  | +            [1, '#198CFE']
 | 
	
		
			
				|  |  | +          ],
 | 
	
		
			
				|  |  | +          prettify: false
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      });
 | 
	
		
			
				|  |  | +      vudio1.dance();
 | 
	
		
			
				|  |  | +    });
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    return () => (
 | 
	
		
			
				|  |  | +      <div class={styles.audioWrap}>
 | 
	
		
			
				|  |  | +        <div class={styles.audioContainer}>
 | 
	
		
			
				|  |  | +          <audio
 | 
	
		
			
				|  |  | +            ref={audio}
 | 
	
		
			
				|  |  | +            crossorigin="anonymous"
 | 
	
		
			
				|  |  | +            src={props.item.content + '?time=1'}
 | 
	
		
			
				|  |  | +            onEnded={() => {
 | 
	
		
			
				|  |  | +              audioForms.paused = true;
 | 
	
		
			
				|  |  | +            }}
 | 
	
		
			
				|  |  | +            onTimeupdate={() => {
 | 
	
		
			
				|  |  | +              audioForms.currentTime = timeFormat(
 | 
	
		
			
				|  |  | +                Math.floor(audio.value?.currentTime || 0)
 | 
	
		
			
				|  |  | +              );
 | 
	
		
			
				|  |  | +              audioForms.currentTimeNum = audio.value?.currentTime || 0;
 | 
	
		
			
				|  |  | +            }}
 | 
	
		
			
				|  |  | +            onLoadedmetadata={() => {
 | 
	
		
			
				|  |  | +              audioForms.duration = timeFormat(
 | 
	
		
			
				|  |  | +                Math.floor(audio.value?.duration)
 | 
	
		
			
				|  |  | +              );
 | 
	
		
			
				|  |  | +              audioForms.durationNum = audio.value?.duration;
 | 
	
		
			
				|  |  | +            }}></audio>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +          <canvas ref={canvas}></canvas>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +          {audioForms.afterMa3 && (
 | 
	
		
			
				|  |  | +            <div class={styles.tempVudio}>
 | 
	
		
			
				|  |  | +              <audio ref={audio1} src={tickMp3} />
 | 
	
		
			
				|  |  | +              <canvas ref={canvas1}></canvas>
 | 
	
		
			
				|  |  | +            </div>
 | 
	
		
			
				|  |  | +          )}
 | 
	
		
			
				|  |  | +        </div>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        <div
 | 
	
		
			
				|  |  | +          class={[
 | 
	
		
			
				|  |  | +            styles.controls,
 | 
	
		
			
				|  |  | +            audioForms.showBar ? '' : styles.sectionAnimate
 | 
	
		
			
				|  |  | +          ]}
 | 
	
		
			
				|  |  | +          onClick={(e: MouseEvent) => {
 | 
	
		
			
				|  |  | +            e.stopPropagation();
 | 
	
		
			
				|  |  | +          }}>
 | 
	
		
			
				|  |  | +          <div class={styles.actions}>
 | 
	
		
			
				|  |  | +            <div class={styles.actionWrap}>
 | 
	
		
			
				|  |  | +              <button class={styles.actionBtn} onClick={onToggleAudio}>
 | 
	
		
			
				|  |  | +                {audioForms.paused ? (
 | 
	
		
			
				|  |  | +                  <img class={styles.playIcon} src={iconplay} />
 | 
	
		
			
				|  |  | +                ) : (
 | 
	
		
			
				|  |  | +                  <img class={styles.playIcon} src={iconpause} />
 | 
	
		
			
				|  |  | +                )}
 | 
	
		
			
				|  |  | +              </button>
 | 
	
		
			
				|  |  | +              <button class={styles.iconReplay} onClick={onReplay}>
 | 
	
		
			
				|  |  | +                <img src={iconReplay} />
 | 
	
		
			
				|  |  | +              </button>
 | 
	
		
			
				|  |  | +            </div>
 | 
	
		
			
				|  |  | +          </div>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +          <div class={styles.slider}>
 | 
	
		
			
				|  |  | +            <NSlider
 | 
	
		
			
				|  |  | +              value={audioForms.currentTimeNum}
 | 
	
		
			
				|  |  | +              step={0.01}
 | 
	
		
			
				|  |  | +              max={audioForms.durationNum}
 | 
	
		
			
				|  |  | +              tooltip={false}
 | 
	
		
			
				|  |  | +              onUpdate:value={(val: number) => {
 | 
	
		
			
				|  |  | +                audio.value.currentTime = val;
 | 
	
		
			
				|  |  | +                audioForms.currentTimeNum = val;
 | 
	
		
			
				|  |  | +                audioForms.currentTime = timeFormat(Math.round(val || 0));
 | 
	
		
			
				|  |  | +              }}
 | 
	
		
			
				|  |  | +            />
 | 
	
		
			
				|  |  | +          </div>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +          <div class={styles.actions}>
 | 
	
		
			
				|  |  | +            <div class={styles.time}>
 | 
	
		
			
				|  |  | +              <div
 | 
	
		
			
				|  |  | +                class="plyr__time plyr__time--current"
 | 
	
		
			
				|  |  | +                aria-label="Current time">
 | 
	
		
			
				|  |  | +                {audioForms.currentTime}
 | 
	
		
			
				|  |  | +              </div>
 | 
	
		
			
				|  |  | +              <span class={styles.line}>/</span>
 | 
	
		
			
				|  |  | +              <div
 | 
	
		
			
				|  |  | +                class="plyr__time plyr__time--duration"
 | 
	
		
			
				|  |  | +                aria-label="Duration">
 | 
	
		
			
				|  |  | +                {audioForms.duration}
 | 
	
		
			
				|  |  | +              </div>
 | 
	
		
			
				|  |  | +            </div>
 | 
	
		
			
				|  |  | +            <div class={styles.actionWrap}>
 | 
	
		
			
				|  |  | +              {props.isDownload && (
 | 
	
		
			
				|  |  | +                <button
 | 
	
		
			
				|  |  | +                  class={styles.iconReplay}
 | 
	
		
			
				|  |  | +                  onClick={onDownload}
 | 
	
		
			
				|  |  | +                  style={{ marginLeft: '15px' }}>
 | 
	
		
			
				|  |  | +                  <img src={iconPreviewDownload} />
 | 
	
		
			
				|  |  | +                </button>
 | 
	
		
			
				|  |  | +              )}
 | 
	
		
			
				|  |  | +            </div>
 | 
	
		
			
				|  |  | +          </div>
 | 
	
		
			
				|  |  | +        </div>
 | 
	
		
			
				|  |  | +      </div>
 | 
	
		
			
				|  |  | +    );
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +});
 |