H5音频<audio/>样式修改，拖拽、点击进度操作、总时长加载

<audio/>标签样式修改

修改原因：

不同手机展示的样式不同，特别是IOS 和安卓区别很大，需要统一样式。

修改后样式：

修改理解：

1>“点击播放”和"点击暂停" 调用原生audio.play() 和 audio.pause()来对进度条进行操作

2>总时长加载：解析 audio.duration 来获取总时长，会有部分浏览器兼容问题，下面列举部分兼容方式。

3>点击跳转进度：获取当前的 鼠标点击位置【e.pageX】 - 进度条.offsetLeft【相对于它的直接父元素 的 偏移量】，使用 translateX 改变 “蓝色小球”的播放进度位置。

4>拖拽跳转进度：监听 onTouchStart 、 onTouchMove 和 onTouchEnd 

5> 目前缺点：

  A.只有点击 进度条 才能跳转进度，建议扩大面积

  B.拖拽需要松手的时候才有效果

  C.部分 安卓 UC浏览器，不能愉快的加载时间，只能点击播放才能加载【已经做了其他的兼容】

核心代码：

转换音频时长显示

  /**
   * 工具类
   */
  //转换音频时长显示
  transTime(time) {
    let duration = parseInt(time);
    let minute = parseInt(duration / 60);
    let sec = duration % 60 + '';
    let isM0 = ':';
    if (minute == 0) {
      minute = '00';
    } else if (minute < 10) {
      minute = '0' + minute;
    }
    if (sec.length == 1) {
      sec = '0' + sec;
    }
    return minute + isM0 + sec
  }

获取视频总长

  loadVideo() {
    let self = this;
    let audio = this.refs.audioTag;
    let du