audio标签

动态替换播放地址

//替换完成后，先执行load方法
document.getElementById('playaudio').load();

监听播放完成

document.getElementById('playaudio').addEventListener('ended',function(){
            console.log('over');
            that.playing = false;
},false)

设置进度(单位秒)

document.getElementById('playaudio').currentTime = 0;

简单案例

// 音频播放组件
var playAudio = {
    data:function(){
        return {
            canplay:false,
            playing:false
        }
    },
    props:{
        audioSrc:{
            type:String,
            default:''
        }
    },
    mounted() {
        let that = this;
        document.getElementById('playaudio').addEventListener('ended',function(){
            console.log('over');
            that.playing = false;
        },false)
    },
    computed: {
        buttonText:function(){
            return this.playing?'暂停':'播放';
        }
    },
    watch:{
        audioSrc:function(val){
            this.playing = false;
            if(val){
                this.canplay = true;
                document.getElementById('playaudio').load();
            }else{
                this.canplay = false;
            }
        }
    },
    methods: {
        play:function(){
            document.getElementById('playaudio').play();
        },
        stop:function(){
            document.getElementById('playaudio').pause();
            document.getElementById('playaudio').currentTime = 0;
        },
        buttonHandler:function(){
            let info = {
                sub_type:edit.questionInfo.subType,
                use_num:1
            }
            GetInst().buriedLog('9003',info);
            if(this.playing){
                this.stop();
            }else{
                this.play();
            }
            this.playing = !this.playing;
        }
    },
    template:`
        <div>
            <div>
                <button :disabled="!canplay" @click="buttonHandler">{{buttonText}}</button>
            </div>
            <audio id="playaudio" :src="audioSrc"></audio>
        </div>
    `
}
Vue.component('playaudio',playAudio);