已更新更为强大版本的具有背景播放功能的播放器，以下为传送门：
/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./resource/n2/16/17/450264753.mp3',coverimg:"/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();},//初始化播放器，获取durationInitialization(){var t=this;if (this.data.audiolist[0].audiosrc.length != 0) {//设置srcinnerAudioContext.src = this.data.audiolist[0].audiosrc;//运行一次innerAudioContext.play();innerAudioContext.pause();innerAudioContext.onCanplay(() => {//初始化durationinnerAudioContext.durationsetTimeout(function () {//延时获取音频真正的durationvar 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代码）
首先进入酷我音乐，打开歌曲详情播放页面，找到地址栏中的神秘数字
如：/yinyue/54436859?catalog=yueku中就是 54436859
使用node或者webstorm等运行下方js，在地址栏输入 localhost:8080?id=神秘数字
单击回车，页面就会显示歌曲的真实路径，然后就可以在自己想引用的地方使用了；
（本方法编辑于/09/19）
//酷我音乐，音乐路径抓取//网址：var 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,先进入歌曲详情播放页，在地址栏中/yinyue/40425292?catalog=yueku 在yinyue/ 后方 ？ 前方的数字, 如 40425292var musicId=req.url.split('=');musicId=musicId[1];var url = '/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);
