cjhcj-audio

####以下只讲解在vue-cli脚手架使用cjhcj-audio的方法

###第一步： cnpm install cjhcj-audio --save 或者用npm安装： npm install cjhcj-audio --save

###第二步： 在所需要导入的组件内导入该组件 import cjhcjAudio from 'cjhcj-audio' （导入后需要在components中注册，别忘了） components { cjhcjAudio }

###第三步直接在页面中使用

    <audio autoplay id="audio"> </audio>
    这是音频的格式，如果设置添加音频的属性为loop的话，下方的songEnded方法是无法监听到的，如果去掉autoplay属性的话，给歌曲设置src属性的值时，需要手动调用音频的play方法，音频才会播放

    <cjhcjAudio   :audio='audio'  :audioCss='audioCss' @getTime = 'getTime' @songEnded='songEnded' />


    这个组件绑定了两个props属性和两个方法
    audio是你页面的音频标签的实例
    这里以jQuery获取为例
    切记页面元素加载后能够获取音频实例
    $(function() {
        audio = $('#audio)[0]
    })

    audioCss属性可以设置滚动条和滑块的样式, audioCss每一个属性都对应一个css类
    初始设置是, 大家可以设置各种各样的样式，但是最好不要设置滚动条的宽度，高度的话是可以设置的，滑块的大小是通过width和height设置的，宽度和高度要一样，这样才可以是圆的，因为这样会有bug，
    使用该播放器的时候最好把他包含在一个有高度和宽度的盒子里，该播放器会与盒子的宽度百分百适应
    audioCss = {
        lineContainer: {
            height: '4px',
            backgroundColor: 'pink'
        },//进度容器的高度和颜色
        point: {
            width: '12px',
            height: '12px',
            backgroundColor: 'green'
        },//进度条滑动点的大小和颜色
        preloadBar: {
            backgroundColor: 'purple'
        },//预加载的进度条的颜色
        currentTimeBar: {
            backgroundColor: 'red'
        },//滚动进度条的颜色
    }

    getTime方法可以获取音频实时播放的描述  //这里需要有音频播放的时候才会获取的，音频无法播放       是没办法触发该方法的
    getTime(time) {
        console.log(time);//{curTime: 4.175408, duration: 236.016327}
        //curTime : 表示音频正在播放的时间点， duration： 表示该音频的时长
        //以上两个时间都是以秒为单位
    }

    songEnded方法可以监听到歌曲播放结束，如果歌曲播放结束后会触发该事件
    songEnded() {
        //doSomething   
    }