最近在做一个小功能，电台的语音播放，除了箭头指着的进度条，其他都是自己手写的样式，下面说一下进度条的实现，使用插件 wx-audio

安装

npm 安装

  npm install @dw/wx-audio

引入

import WxAudio from '@dw/wx-audio/lib/wx-audio.css'
  import WxAudio from '@dw/wx-audio'

普通资源引入,先将lib文件下的目录放到自己的项目中，然后根据路径引入

<link href="./wx-audio.css" rel="stylesheet">
<script type="text/javascript" src="wx-audio.js"></script>

文件可自行下载

HTML中在需要生成进度条的地方写一个标签：<div id="textaudio1" style="height: auto; width: 100%;"></div>

使用方法

实例化 音乐组件  （audioPlay() 需要放在微信的wx.config下面才能用，所以要先注册一下微信的config，在

wx.ready里面使用，我这个页面做的有微信分享功能，直接在里面调用了，下面贴上我的这部分完整代码

）

 

                        wx.config({  //sign为getsign接口返回的数据                             debug: false,                             appId: sign.appId,                             timestamp: sign.timestamp,                             nonceStr: sign.nonceStr,                             signature: sign.signature,                             jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"]                         })                                                     var src = _this2.articledetail.vid //这里为我另一个接口返回的MP3路径                             console.log(src)                             var isAudio = new WxAudio({                                     ele: "#textaudio1",  //挂在的id为textaudio1的元素                                     title: "",                                     disc: "",                                     src,                                     width: "100%",                                     loop: true,                                     ended: function () {},                                 });                                 console.log(isAudio)                                 isAudio.audioPlay(); //播放

这样做之后，就会在指定的位置生成上面图片中的进度条及下面的时间，进度条可拖拽。