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

<script lang="ts" setup>
import { nanoid } from 'nanoid';
import { computed } from 'vue';

defineProps<{ url: string; name: string }>();

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

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

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