HTML关于audio的操作

完整案列：

music_play.css:
.music-play-ui-area{
    clear: both;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    overflow: hidden;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.music-play-btn{
    height: 100%;
    overflow: hidden;
    float: left;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 0px;
}
.music-play-btn[data-status="0"]{
    background-image: url("./images/播放暂停_1.png");
}
.music-play-btn[data-status="1"]{
    animation:playimg 1s infinite;
}
@keyframes playimg
{
    0%{
        background-image: url("./images/播放中_1.png");
    }
    33%{
        background-image: url("./images/播放中_2.png");
    }
    66%{
        background-image: url("./images/播放中_3.png");
    }
    99%{
        background-image: url("./images/播放中_1.png");
    }
}
.music-play-process{
    height: 100%;
    float: left;
    margin-left: 5px;
}
.music-play-process-back,.music-play-process-running{
    height: 5px;
    overflow: hidden;
}
.music-play-process-back{
    width: 100%;
    background-color: #ccc;
}
.music-play-process-running{
    position: relative;
    left: 0px;
    top: -5px;
    background-color: #00A9FF;
}
.music-play-time{
    width: 135px;
    height: 100%;
    float: left;
    margin-left: 5px;
    text-align: left;
}
.music-play-ui-audio{
    width: 1px;
    height: 1px;
    overflow: hidden;
    float: left;
}

music_play.js:
Vue.component("music-play-ui", {
    template: '<div class="music-play-ui-area"><div class="music-play-btn" :data-status="openStatus" @click="changePlayStatus"></div><div class="music-play-process" @click="adjustProcess"><div class="music-play-process-back"></div><div class="music-play-process-running" :style="\'width: \'+getProcessNum()+\'%;\'"></div></div><div class="music-play-time">{{getShowTimeStr(playingTime)}}/{{getShowTimeStr(playTotalTime)}}</div><audio class="music-play-ui-audio" :src="musicUrl"></audio></div>',
    props: ["musicUrl"],
    data: function () {
        return {
            openStatus:0,  // 播放状态:0播放暂停中;1播放中
            playTotalTime:0,  // 总共多少秒
            playingTime:0,  // 当前播放多少秒
            audioIDHandel:null,  // 音频id句柄
            setIntervalHandel:null,  // 播放句柄
        }
    },
    watch: {
    },
    computed: {
    },
    methods: {
        // 调整进度条
        adjustProcess:function(event){
            /*
            // 获取鼠标点击的位置
            console.log("点击位置：X="+event.clientX+", Y="+event.clientY+"。");
            var tempAAA=event.target.getBoundingClientRect();
            console.log("元素位置：X="+tempAAA.left+", Y="+tempAAA.top+"。");
            console.log("元素属性：宽="+tempAAA.width+", 高="+tempAAA.height+"。");
            */
            var tempMPP=event.target.getBoundingClientRect();
            if(event.clientX>tempMPP.left&&event.clientX<(tempMPP.left+tempMPP.width)&&event.clientY>tempMPP.top&&event.clientY<(tempMPP.top+tempMPP.height)){
                var tempPlayingTime=this.playTotalTime*(event.clientX-tempMPP.left)/tempMPP.width;
                this.playingTime=Math.floor(tempPlayingTime);
                var audio = document.getElementById(audioIDHandel);
                audio.currentTime=this.playingTime;
            }
        },
        // 修改播放状态
        changePlayStatus:function(){
            if(this.openStatus==1){
                this.openStatus=0;  // 播放暂停
                this.dealMusicOperation(0);
            }
            else{
                this.openStatus=1;  // 播放暂停
                this.dealMusicOperation(1);
            }
        },
        // 处理音频,默认在加载,0暂停,1标识播放
        dealMusicOperation:function(playStatus){
            var _this=this;
            $(".music-play-ui-audio").each(function(index,item){
                if($(this).attr("src")==_this.musicUrl){
                    audioIDHandel="playing-id-"+index;
                    $(this).attr("id",audioIDHandel);
                    var audio = document.getElementById(audioIDHandel);
                    // 获取当前节点
                    audio.volume=1;  // 设置音频音量(0~1)
                    if(playStatus==0){
                        audio.pause();  // 暂停
                        clearInterval(_this.setIntervalHandel);
                    }
                    else if(playStatus==1){
                        audio.play();  // 播放
                        _this.setIntervalHandel=window.setInterval(function(){
                            // 获取播放时间
                            _this.playingTime=Math.ceil(audio.currentTime);
                        },200);
                    }else{
　　　　　　　　　　　　　　// trainaudio.onended
                        audio.oncanplay = function () {
                            _this.playTotalTime=Math.ceil(audio.duration);  // 获取音频总时长
                        };
                        audio.onerror = function () {
                            // 音频错误处理
                            audio.pause();  // 暂停
                        };
                        audio.load();
                    }
                }
            });
        },
        // 获取进度条
        getProcessNum:function(){
            return 100*this.playingTime/this.playTotalTime;
        },
        // 秒数转换为时间
        getShowTimeStr:function(totalNum){
            if(totalNum>24*60*60){
                return "--";
            }
            var backStrInfo="";
            // 小时
            if(totalNum>60*60){
                var totalHour=(totalNum-totalNum%(60*60))/(60*60);
                if(totalHour>9){
                    backStrInfo+=totalHour;
                }
                else{
                    backStrInfo+="0"+totalHour;
                }
                totalNum-=totalHour*60*60;
            }else{
                backStrInfo+="00";
            }
            // 分钟
            if(totalNum>60){
                var totalMinutis=(totalNum-totalNum%60)/60;
                if(totalMinutis>9){
                    backStrInfo+=":"+totalMinutis;
                }
                else{
                    backStrInfo+=":0"+totalMinutis;
                }
                totalNum-=totalMinutis*60;
            }else{
                backStrInfo+=":00";
            }
            // 秒
            if(totalNum>9){
                backStrInfo+=":"+totalNum;
            }
            else{
                backStrInfo+=":0"+totalNum;
            }
            return backStrInfo;
        },
        adjustUIControlWidth:function(){
            $(".music-play-btn").css("width",$(".music-play-btn").height()+"px")
            $(".music-play-time").css("line-height",$(".music-play-btn").height()+"px");
            $(".music-play-process").css("width",($(".music-play-ui-area").width()-$(".music-play-btn").outerWidth()-$(".music-play-time").outerWidth()-15)+"px");
            $(".music-play-process-back").css("margin-top",($(".music-play-btn").height()-5)/2+"px");
            this.dealMusicOperation(-1);
        },
    },
    created: function () {
        this.adjustUIControlWidth();
    },
    //el挂载完后调用
    mounted: function () {
        this.adjustUIControlWidth();
    }
});
引入：
<!-- 音频控件 -->
<link rel="stylesheet" type="text/css" href="./musicPlayUI/music_play.css">
<!-- 音频控件 -->
<div class="music-parent-area">
    <music-play-ui :music-url="musicUrl"></music-play-ui>
</div>
<script type="text/javascript" src="./musicPlayUI/music_play.js"></script>