client-base-v5/src/widget/AuthAudio.vue

<template>
    <audio :src="src" controls="controls"></audio>
</template>
<script type="text/javascript">
import Common from "../common/Common.js";
export default {
    props: ['audioSrc', "token", "className"],

    data: function () {
        return {
            "src": "",            
        }
    },
    methods: {
        loadAudio: function () {
            let _self = this;
			let request = new XMLHttpRequest();
			request.responseType = 'blob';
			request.open('get', _self.audioSrc, true);
			request.setRequestHeader('token', (_self.token == null) ? localStorage.getItem('#token') : _self.token);
			request.onload = function(e) {
                if(this.status == 200){
                    _self.src = URL.createObjectURL(this.response);
                }
			};
			request.send();
        },
        
        /**
         * 语音加载完毕，调用本方法，释放通过URL.createObjectURL()创建的对象URL
         */
        onload: function(){
            let _self = this;
            URL.revokeObjectURL(_self.src);
        }
    },

    watch: {
        "audioSrc": function(newValue, oldValue){       
            if(newValue != oldValue){
                this.loadAudio(newValue);
            }
        },
    },

    mounted: function(){
        this.loadAudio(this.audioSrc);
    }
}
</script>