⼩程序——实现⾳乐播放器（上下切换歌曲、进度条拉动、暂停与继续播
放）
⼩伙伴们你们有没有想过⾃⼰搞⼀个播放器，播上⾃⼰喜欢的歌单，那是多么的惬意啊~
之前，⼩编遇到⼀个项⽬，语⾳导览的播放器。其实跟播放歌单⼀个道理。
但是⼀看开发⽂档⾥⾯的⾳频API⼜是那么多，我们该如何选择呢？在这⾥⼩编选择了使⽤wx.createAudioContext()；这个API。
box sizing当然啊这个需要注意的是：从基础库 1.6.0 开始，这个接⼝就停⽌维护，推荐使⽤ wx.createInnerAudioContext 代替；并且需要⼩程序基础库版本不低于 1.9.6。
那么这个接⼝该如何正确使⽤呢？
AudioContext 实例，可通过 wx.createAudioContext 获取。
AudioContext 通过 id 跟⼀个 audio 组件绑定，操作对应的 audio 组件。
效果图
可以看到该播放器有切换上下曲按钮、暂停按钮以及进度条
⼩编是这样实现的
wxml布局
<!-- 播放器样式 -->
<audio id="myAudio"class="audio_a"src="{{audio}}"bindtimeupdate='bindtimeupdate'></audio>
<view class="audioV"if="{{audio!=''}}">
<view class="audioV_L_R">
<!-- 左边的图⽚ -->
<view class="audioV_left">
<view class="audioV_left_v">
<image class="audioV_left_img"src="{{detail.audio_cover}}"></image>
<image class="audioV_left_play"src="/images/play1.png"if="{{isplay==false}}"bindtap="clickplay"></image>
<image class="audioV_left_play"src="/images/puse1.png"if="{{isplay==true}}"bindtap="stop"></image>
</view>
</view>
<!-- 右边的控制 -->
<view class="audioV_right">
<view class="audioV_right_top">
<view class="audioV_right_top_name">{{CN==true?detail.name:detail.name_e}}</view>
<view class="audioV_right_top_contro">
<image class="audioV_right_top_last"src="../../../images/last.png"bindtap="getLast"></image>
<image class="audioV_right_top_play"if="{{isplay==false}}"bindtap="clickplay"src="../../../images/play2.png"></image>
<image class="audioV_right_top_play"if="{{isplay==true}}"bindtap="stop"src="../../../images/puse2.png"></image>
<image class="audioV_right_top_next"src="../../../images/next.png"bindtap="getNext"></image>
</view>
</view>
<!-- 拖动条--进度条 -->
<view class="audioV_right_slider">
<!--slider 进度条的使⽤可以在开发⽂档上看看这些配置的⽤法哦-->
<slider line-size="{{15}}"color="#000"blockColor="#944f4c"bindchange='sliderChange'activeColor='#944f4c'block-size="{{12}}"value='{{playP}}'/> </view>
</view>
</view>
</view>
css样式
/* 播放器 */
.audioV{
width: 100%;
position: fixed;
overflow: auto;
bottom: 0rpx;
background: #fff;
}
.audioV_L_R{
width: 100%;
position: relative;
overflow: auto;
}
.audioV_left{
width: 25%;
padding: 15rpx 21rpx;
box-sizing: border-box;
float: left;
height: 141rpx;
}
.audioV_left_v{
position: relative;
overflow: auto;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.audioV_left_img{
width: 111rpx;
height: 100%;
position: absolute;
/* background-color: red; */
border-radius: 8rpx;
}
.audioV_left_play{
width: 48rpx;
height: 48rpx;
z-index: 2;
}
.audioV_right{
width: 75%;
float: left;
padding: 15rpx 36rpx 0rpx 0rpx;
box-sizing: border-box;
}
.audioV_right_top{
width: 100%;
position: relative;
overflow: auto;
padding-top: 10rpx;
box-sizing: border-box;
}
.audioV_right_top_name{
width: max-content;
float: left;
font-size: 30rpx;
font-family: SourceHanSansCN, SourceHanSansCN-Medium; font-weight: 500;
color: #000000;
margin-top: 10rpx;
}
.audioV_right_top_contro{
width: max-content;
float: right;
display: flex;
justify-content: center;
align-items: center;
}
.audioV_right_top_last{
width: 22rpx;
height: 30rpx;
}
.audioV_right_top_play{
width: 59rpx;
height: 59rpx;
margin-left: 30rpx;
margin-right: 30rpx;
}
.audioV_right_top_next{
width: 22rpx;
height: 30rpx;
}
.audioV_right_contro{
width: 100%;
height: 6rpx;
background: #000;
position: relative;
border-radius: 20rpx;
margin-top: 19rpx;
}
.audioV_right_contro view:nth-child(1){ height: 100%;
background: #944f4c;
border-radius: 3rpx;
float: left;
}
.audioV_right_contro view:nth-child(2){ width: 15rpx;
height: 15rpx;
opacity: 1;
background: #944f4c;
border-radius: 50%;
float: left;
margin-top: -5rpx;
}
.
audioV_right_slider{
box-sizing: border-box;
width: 100%;
position: relative;
margin-top: -15rpx;
text-align: center;
}
.audioV_right_slider slider{
width: 96%;
margin-left: 15rpx;
}
重点来了
js控制
data:{
// 判断是否播放，状态
isplay:false,
//总的进度
playAll:0,
//播放的秒数
playS:0,
// 播放的百分⽐
playP:0,
/
/⾳频链接
audio:'',
},
onLoad:function(options){
var that=this;
that.audioCtx = wx.createAudioContext('myAudio')
//请求完数据将赋值给data的参数
//we.request以后
that.setData({
audio:e.data.data.data.c_audio,
isplay:true
})
//这⾥使⽤的是
//AudioContext.play()
//播放⾳频。
that.audioCtx.play()
},
//监听播放
//audio 组件的监听事件
bindtimeupdate(res){
var that =this;
// console.log("播放信息",res)
/
/ console.log('bindtimeupdate', res.detail.currentTime, '时间总时长-->', res.detail.duration);
that.setData({
//播放进度
playAll:res.detail.duration,
//播放的秒数
playS:res.detail.currentTime,
//计算进度条的播放百分⽐
playP:(res.detail.currentTime/res.detail.duration)*100,
})
//判断当前播放事件⼤于等于⾳频的总时长时
//停⽌播放。进度条保留在100%
if(res.detail.currentTime>=res.detail.duration){
that.setData({
isplay:false,
playP:100
})
//设置定时器500毫秒以后进度条回到起点
setTimeout(()=>{
that.setData({
playP:0
})
},500);
}
},
//切换上⼀篇
getLast:function(){
var that =this;
console.log("当前的id",that.data.detail)
//这⾥是⼩编的⼀个全局的歌单-因为这⾥需求和歌单播放器有点不⼀样，但是原理⼀样的
for(var i =0;i<app.globalData.GuideMapId.length; i++){
if(that.data.detail.mid == app.globalData.GuideMapId[i]){
console.log("上⼀篇id:",app.globalData.GuideMapId[i-1])
if(app.globalData.GuideMapId[i-1]==undefined||app.globalData.GuideMapId[i-1]=='undefined'||app.globalData.GuideMapId[i-1]==''||app.globalData.G uideMapId[i-1]==null){
// wx.showModal({
// title: '提⽰',
// content: '⽆法再上⼀篇咯~',
// success: function(res) {
// if (firm) {
// console.log('⽤户点击确定')
// } else if (res.cancel) {
// console.log('⽤户点击取消')
// }
// }
// })
that.setData({
audio:''
})
var id ={
id:app.globalData.GuideMapId[app.globalData.GuideMapId.length-1]
}
console.log(id)
// that.setData({
// showModel:true,
// showToast:true,
/
/ modelMsg:'抱歉!这是第⼀篇咯',
// modelMsg_e:'Sorry!No more',
// })
}else{
// that.audioCtx.destroy();
that.setData({
audio:''
})
var id ={
id:app.globalData.GuideMapId[i-1]
}
console.log(id)
}
}
}
},
//获取下⼀篇
getNext:function(){
var that =this;
console.log("当前的id",that.data.detail)
for(var i =0;i<app.globalData.GuideMapId.length; i++){
if(that.data.detail.mid == app.globalData.GuideMapId[i]){
console.log("下⼀篇id:",app.globalData.GuideMapId[i+1])
if(app.globalData.GuideMapId[i+1]==undefined||app.globalData.GuideMapId[i+1]=='undefined'||app.globalData.GuideMapId[i+1]==''||app.globalData. GuideMapId[i+1]==null){
// wx.showModal({
// title: '提⽰',
// content: '⽆法再下⼀篇咯~',
// success: function(res) {
// if (firm) {
// console.log('⽤户点击确定')
// } else if (res.cancel) {
// console.log('⽤户点击取消')
// }
// }
// })
// that.setData({
// showModel:true,
// showToast:true,
// modelMsg:'抱歉!这是最后⼀篇咯',
// modelMsg_e:'Sorry!No more',
// })
console.log("这是最后⼀篇:",i,app.globalData.GuideMapId)
that.setData({
audio:''
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论