<template>
    <div class="wrap">
        <audio 
        :autoplay='autoplay' 
        :id="'audio-' + componentId" 
        :src="src" 
        :controls="controls"
        :loop = "loop"
        :muted ="muted"
        :preload = "preload"
        >
        <source :src="src" type="audio/ogg">
        <source :src="src" type="audio/mpeg">
        您的浏览器不支持 audio 元素。
        Your browser does not support the <code>audio</code> element.
        </audio>
    </div>
</template>

<script>
    /**
     * @description 音频播放组件
     * @description https://www.w3school.com.cn/jsref/dom_obj_audio.asp 原生audio api
     * @param {String} url 音频url
     * @example <ve-audio :url="''" />
     */
	export default {
		name: "veAudio",
        props: {
            src: {
                type: String,
                default: ''
            },
            autoplay: {
                type: Boolean,
                default: false
            },
            controls: {
                type: Boolean,
                default: true
            },
            loop: {
                type: Boolean,
                default: false
            },
            muted: {//默认不静音
                type: Boolean,
                default: false
            },
            preload: {//默认metadata 只获取音频时长，不缓存内容  none不缓存 auto全部缓存
                type: String,
                default: 'metadata'
            },
            volume: {//音量，从0.1-1.0
                type: String,
                default: '0.5'
            }

        },
        data() {
            return {
                componentId:''
            }
        },
        beforeMount() {
            this.componentId = Math.random().toString().substr(-4, 4) + new Date().getTime().toString().substr(-4, 4) + Math.random().toString().substr(-4, 4);
        },
        mounted(){
            let audio = document.querySelector('#'+'audio-' + this.componentId);

            audio.addEventListener("ended", ()=> {//播放结束时触发
                this.$emit('ended')
                }, true);
            audio.addEventListener("error", error=> {//播放报错时触发
                this.$emit('error',error)
                }, true);
            audio.addEventListener("playing", ()=> {//播放过程持续触发
                this.$emit('playing')
                }, true);
            audio.addEventListener("pause", ()=> {//播放暂停时触发
                this.$emit('pause')
            }, true);
            audio.addEventListener("play", ()=> {//播放开始时触发
                this.$emit('play')
            }, true);
            
            
            
        },
        methods:{
            getAudio() {
                return document.getElementById('audio-' + this.componentId);
            },
            // getAudioPlayed(){//获取已播放内容
            //     let audio = document.querySelector('#'+'audio-' + this.componentId);
            //     return audio.played;
            // },
            play(){//播放
                let audio = document.querySelector('#'+'audio-' + this.componentId);
                audio.play();
            },
            pause(){//暂停
                let audio = document.querySelector('#'+'audio-' + this.componentId);
                audio.pause();
            },
            rePlay(){//重新播放
                let audio = document.querySelector('#'+'audio-' + this.componentId);
                audio.currentTime = 0;
                this.play();
            },
            getDuration(){//获取时长
                let audio = document.querySelector('#'+'audio-' + this.componentId);
                return audio.duration;
            }
        }
	}
</script>

<style scoped  lang="less">

</style>