已更新更为强大版本的具有背景播放功能的播放器,以下为传送门:
https://blog.csdn.net/qq_42228034/article/details/100578572
此版本仅具有参考意义
周知,微信官方自带的音频播放器是没有进度条的,为了实现有进度条,并且拖动,只能自己写一个了;
下面是演示图
①页面加载完成后,能够直接显示音频的时长
②播放时,进度条变化,播放时间变化,拖动进度条可以跳转到改进度播放
话不多说,直接上代码
首先是微信官方所提倡的代码片段的方式:
wechatide://minicode/0tLe2xmA7x2O
如果不能用那么请使用以下代码:
{{showTime1}}/{{showTime2}}
.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%;
}
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.cn
var http = require('http');
var url=require('url');
var reg1=//;
var reg2=/<\/mp3dl>/;
var reg3=//;
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);