<template>
  <audio
    v-if="url"
    v-bind="$attrs"
    :id="uuid"
    ref="audioRef"
    :src="url"
    class="player"
    controls
    controlsList="nodownload noplaybackrate"
    @play="onPay"
  />
</template>

<script lang="ts" setup>
  import { nanoid } from 'nanoid';
  // import FileSaver from 'file-saver';
  import { computed, ref } from 'vue';

  const audioRef = ref({});

  defineProps<{ url: string }>();

  const uuid = computed(() => {
    return `audio-${nanoid()}`;
  });

  const onPay = (e: any) => {
    const audios = document.getElementsByTagName('audio');
    [].forEach.call(audios, (i: HTMLAudioElement) => i !== e.target && i.pause());
  };

  const getRef = (): HTMLAudioElement => {
    return audioRef.value as HTMLAudioElement;
  };

  defineExpose({ getRef });
</script>

<style lang="less" scoped>
  .player {
    height: 30px;
    width: 100%;
    outline: none;
    display: flex;
  }

  audio {
    &::-webkit-media-controls-volume-control-container {
      display: none !important;
    }

    &::-webkit-media-controls-rewind-button {
      display: none !important;
    }
  }
</style>