<template>
	<div class="audio-container">
		<!-- <audio :src="audioSrc" controls="controls"></audio> -->
		<p style="margin-left: 15px;margin-bottom: 10px;">{{ audioName }}</p>
		<!-- <AudioPlayer ref="audioRef" :audio-list="audioList":show-prev-button="false" :show-next-button="false"/> -->

		<vue-audio-native ref="audioRef" size="default" :url="audioSrc" :showDownload="false" autoplay></vue-audio-native>
	</div>
</template>

<script>
	export default {
		name: 'audioPlayer',
		props: {
			audioSrc: {
				type: String,
				default: ''
			},
			audioName: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				audioList: []
			}
		},
		created() {
			// this.getFileSas(this.audioSrc)
			
		},
		methods: {
			async getFileSas(url){
				const fileSas = await this.$tools.getFileSas({params:url})
				console.log(fileSas)
				this.audioSrc = this.audioSrc + fileSas
			},
			onCloseAudio() {
				this.$refs.audioRef.onPause()
			},
			onPlayAudio() {
				this.$refs.audioRef.onPlay()
			}
		},
		watch: {
			audioSrc: {
				handler(n) {
					this.audioList = []
					this.audioList.push(n)
				},
				immediate: true
			}
		}
	}
</script>
<style>

</style>
