已更新更为强大版本的具有背景播放功能的播放器，以下为传送门：
https://blog.csdn.net/qq_42228034/article/details/100578572
此版本仅具有参考意义
周知，微信官方自带的音频播放器是没有进度条的，为了实现有进度条，并且拖动，只能自己写一个了；
下面是演示图
①页面加载完成后，能够直接显示音频的时长
②播放时，进度条变化，播放时间变化，拖动进度条可以跳转到改进度播放
话不多说，直接上代码
首先是微信官方所提倡的代码片段的方式：
wechatide://minicode/0tLe2xmA7x2O
如果不能用那么请使用以下代码：
wxml：
<view class='audioPlayer'> <view class='player'> <image src='{{audiolist[0].coverimg}}' class='audioBack'></image> <view class='audioControls'> <view class='flex'> <view class='bottom' catchtap='playAudio'> <!-- 按钮 --> <view wx:if="{{isPlayAudio}}"> <image src='../../assets/pause.png' /> </view> <view wx:else> <image src='../../assets/play.png' /> </view> </view> <view class='slider'> <slider bindchange='sliderChange' activeColor='red' block-size="12" value='{{audioTime}}' /> </view> <view class='time'> {{showTime1}}/{{showTime2}} </view> </view> </view> </view></view>wxss：
.flex{ display: flex;}.audioPlayer{ width: 100%; height: 400rpx; margin-bottom: 30rpx; box-sizing: border-box; padding: 20rpx 30rpx;}.player{ width: 100%; height: 100%; position: relative;}.audioBack{ width: 100%; height: 100%;}.audioControls{ width: 100%; height: 80rpx; background: black; opacity: .8; position: absolute; bottom: 0; color: white; font-size: 6pt; line-height: 80rpx; text-align: center;}.audioControls .bottom{ width: 60rpx; height: 100%;}.audioControls .bottom image{ margin-top: 30%; margin-left: 30%; width: 40rpx; height: 40rpx;}.audioControls .slider{ width: 520rpx; height: 100%;}.slider slider{ width: 95%; margin-left: 4%; margin-right: 0;}.audioControls .time{ width: 120rpx; height: 100%;}js：
const app = getApp()const innerAudioContext = wx.createInnerAudioContext();Page({ data: { audiolist:[ { audiosrc:'http://other.web.rh01.sycdn.kuwo.cn/resource/n2/16/17/450264753.mp3', coverimg:"https://goss.veer.com/creative/vcg/veer/800water/veer-146156021.jpg" } ], isPlayAudio: false, audioSeek: 0, audioDuration: 0, showTime1: '00:00', showTime2: '00:00', audioTime: 0 }, onLoad: function () { }, onShow:function(){ this.Initialization(); this.loadaudio(); }, //初始化播放器，获取duration Initialization(){ var t=this; if (this.data.audiolist[0].audiosrc.length != 0) { //设置src innerAudioContext.src = this.data.audiolist[0].audiosrc; //运行一次 innerAudioContext.play(); innerAudioContext.pause(); innerAudioContext.onCanplay(() => { //初始化duration innerAudioContext.duration setTimeout(function () { //延时获取音频真正的duration var duration = innerAudioContext.duration; var min = parseInt(duration / 60); var sec = parseInt(duration % 60); if (min.toString().length == 1) { min = `0${min}`; } if (sec.toString().length == 1) { sec = `0${sec}`; } t.setData({ audioDuration: innerAudioContext.duration, showTime2: `${min}:${sec}` }); }, 1000) }) } }, //拖动进度条事件 sliderChange(e) { var that = this; innerAudioContext.src = this.data.audiolist[0].audiosrc; //获取进度条百分比 var value = e.detail.value; this.setData({ audioTime: value }); var duration = this.data.audioDuration; //根据进度条百分比及歌曲总时间，计算拖动位置的时间 value = parseInt(value * duration / 100); //更改状态 this.setData({ audioSeek: value, isPlayAudio: true }); //调用seek方法跳转歌曲时间 innerAudioContext.seek(value); //播放歌曲 innerAudioContext.play(); }, //播放、暂停按钮 playAudio() { //获取播放状态和当前播放时间 var isPlayAudio = this.data.isPlayAudio; var seek = this.data.audioSeek; innerAudioContext.pause(); //更改播放状态 this.setData({ isPlayAudio: !isPlayAudio }) if (isPlayAudio) { //如果在播放则记录播放的时间seek，暂停 this.setData({ audioSeek: innerAudioContext.currentTime }); } else { //如果在暂停，获取播放时间并继续播放 innerAudioContext.src = this.data.audiolist[0].audiosrc; if (innerAudioContext.duration != 0) { this.setData({ audioDuration: innerAudioContext.duration }); } //跳转到指定时间播放 innerAudioContext.seek(seek); innerAudioContext.play(); } }, loadaudio() { var that = this; //设置一个计步器 this.data.durationIntval = setInterval(function () { //当歌曲在播放时执行 if (that.data.isPlayAudio == true) { //获取歌曲的播放时间，进度百分比 var seek = that.data.audioSeek; var duration = innerAudioContext.duration; var time = that.data.audioTime; time = parseInt(100 * seek / duration); //当歌曲在播放时，每隔一秒歌曲播放时间+1，并计算分钟数与秒数 var min = parseInt((seek + 1) / 60); var sec = parseInt((seek + 1) % 60); //填充字符串，使3:1这种呈现出 03：01 的样式 if (min.toString().length == 1) { min = `0${min}`; } if (sec.toString().length == 1) { sec = `0${sec}`; } var min1 = parseInt(duration / 60); var sec1 = parseInt(duration % 60); if (min1.toString().length == 1) { min1 = `0${min1}`; } if (sec1.toString().length == 1) { sec1 = `0${sec1}`; } //当进度条完成，停止播放，并重设播放时间和进度条 if (time >= 100) { innerAudioContext.stop(); that.setData({ audioSeek: 0, audioTime: 0, audioDuration: duration, isPlayAudio: false, showTime1: `00:00` }); return false; } //正常播放，更改进度信息，更改播放时间信息 that.setData({ audioSeek: seek + 1, audioTime: time, audioDuration: duration, showTime1: `${min}:${sec}`, showTime2: `${min1}:${sec1}` }); } }, 1000); }, onUnload:function(){ //卸载页面，清除计步器 clearInterval(this.data.durationIntval); }})wxml里面的两张图片是在assets目录下的2个图片，一张为播放，一张为暂停
下面是私货：
在我进行开发的时候，还没有搭建自己的服务器，在线音源很难找，后面找到两篇帖子讲的是如何获取酷我音乐的音乐真实路径；我根据那两篇帖子，写了一个简单的nodeJs的demo；（以下为nodejs代码）
首先进入酷我音乐，打开歌曲详情播放页面，找到地址栏中的神秘数字
如：http://www.kuwo.cn/yinyue/54436859?catalog=yueku2016 中就是 54436859
使用node或者webstorm等运行下方js，在地址栏输入 localhost:8080?id=神秘数字
单击回车，页面就会显示歌曲的真实路径，然后就可以在自己想引用的地方使用了；
（本方法编辑于2018/09/19）
//酷我音乐，音乐路径抓取//网址：http://www.kuwo.cnvar http = require('http');var url=require('url');var reg1=/<mp3dl>/;var reg2=/</mp3dl>/;var reg3=/<mp3path>/;var reg4=/</mp3path>/;http.createServer(function(req,res1){ if(req.url!='/favicon.ico'){ //音乐的id,先进入歌曲详情播放页，在地址栏中http://www.kuwo.cn/yinyue/40425292?catalog=yueku2016 在yinyue/ 后方 ？ 前方的数字, 如 40425292 var musicId=req.url.split('='); musicId=musicId[1]; var url = 'http://player.kuwo.cn/webmusic/st/getNewMuiseByRid?rid=MUSIC_'+musicId; http.get(url, function(res) { var html = ''; // 获取页面数据 res.on('data', function(data) { html += data; }); // 数据获取结束 res.on('end', function() { var mp3dl=html.split(reg1); mp3dl=mp3dl[1].split(reg2); var mp3path=html.split(reg3); mp3path=mp3path[1].split(reg4); var outPut='http://'+mp3dl[0]+'/resource/'+mp3path[0]; res1.end(outPut); }); }).on('error', function() { console.log('获取数据出错！'); }); }}).listen(8001);
