html5音频audio对象封装成vue组件的方式调用以及setTimeout如何在vue2生效 (vue2正在熟悉中,ajax还是用jQuery来写舒服些,里面含有一些php写法可略过) 此网页应用在PC不考虑手机端

// vue2 组件封装如下：
<template>
    <div>
        <div><!--vue element 组件的引用 Switch 开关 不懂请自行百度（重点参考js部分 如果不熟悉element switch略过就可以了）-->
        语音播报 <el-switch v-model="openVoice" active-value="1" inactive-value="0" @change="change_voice" :disabled="validate"></el-switch>
        </div>
        <div><audio src="" id="audio"></audio></div>
    </div>
</template>

<script type="text/javascript">

    var request_init; // 接收setTimeout() 返回的 ID 值
    var order_id = 0; // 初始化订单id
    $.ajaxSettings.async = false; // 禁止异步请求,
    // 取最新的订单id
    $.get('/order/voice', function ($data) {
        order_id = $data.order_id;
    })

    export default {
        props: { //模板传递属性
            voiceStatus: {
                type: String,
                required: true
            },
        },
        data(){
            return {
                openVoice:this.voiceStatus,
                validate:false
            }

        },
        // 加载完成后执行
        mounted:function(){
            if(this.openVoice==1){
                this.voice_play();
            }
        },
        methods: {
            // 封装播放语音的方法
            voice_play(){
                var audio=document.getElementById('audio'); // 音频播放对象标签
                var $this=this;
                $.ajax({
                    url: '/order/voice',
                    type: 'get',
                    data: {order_id: order_id},
                    dataType: "json",
                    success: function($data){
                        if ($data != '' && $data != undefined) {  // 如果有语音的情况处理
                            $this.validate=false; // 来网络时开启按钮
                            order_id = $data.order_id;
                            audio.src = $data.voice;
                            audio.play();
                            audio.onended = function () {
                                if($this.openVoice==1) {
                                    clearTimeout(request_init);
                                    request_init=setTimeout(function(){$this.voice_play()},2000); // 以匿名函数形式设置settimeout即可实现两秒请求一次
                                }
                            }
                        } else {
                            $this.validate=false; // 来网络时开启按钮
                            clearTimeout(request_init);
                            request_init=setTimeout(function(){$this.voice_play()},2000);
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        $this.validate=true; // 断网就禁用此按钮 继续往下执行请求
                        request_init=setTimeout(function(){$this.voice_play()},2000);
                        //console.log(XMLHttpRequest);
                    }
                })
            },
            change_voice(event){
                var audio=document.getElementById('audio'); // 音频播放对象标签
                var $this=this;
                if (event==1) { // 判断是否选中(表示开启语音)
                    $this.openVoice='0'; // 在回调未成功之前不能改变按钮的状态
                    // 再次取最新的订单号
                    $.get('/order/voice', function ($data) {order_id = $data.order_id;})
                    $this.$http.get('/system/voice/index', {params: {status: 1}})
                        .then(res => {
                            if(res.data==1){ // res.data由后台返回 1表示成功 0表示失败，目前只考虑成功
                                $this.openVoice='1'; // 在回调成功之后改变按钮的状态
                                $this.voice_play();
                            }
                        })
                        .catch(_=>{})
                } else { // 关闭
                    $this.openVoice='1'; // 在回调未成功之前不能改变按钮的状态
                    audio.pause(); // 停止播放
                    $this.$http.get('/system/voice/index', {params: {status: 2}})
                        .then(res => {
                            if(res.data==1){
                                $this.openVoice='0'; // 在回调成功之后改变按钮的状态
                                clearTimeout(request_init); // 终止setTimeout 定时回调
                            }
                        })
                        .catch(_=>{
                            $this.validate=true; // 断网就禁用此按钮
                            request_init=setTimeout(function(){$this.voice_play()},2000);
                        })
                }
            }
        },
    };
</script>
// ----------------------------------------------以上为vue2的组件-----------------------------------------------仅供参考
//   在html模版中使用如下：
<div >
    <!--$voice 是后台php传参过来的 只会为0和1-->
    <voice voice-status="{{ $voice }}"></voice>  
</div>