微信小程序播放器的一些簡單功能實(shí)現(xiàn)
準(zhǔn)備工作
一、構(gòu)建npm（后面用到moment的格式化時(shí)間）
二、系統(tǒng)后臺(tái)監(jiān)測程序播放器配置（系統(tǒng)后臺(tái)要知道該播放器是否在播放歌曲，并有一些簡單的業(yè)務(wù)邏輯）
在app.json中添加以下代碼----和tarbar同級(jí)
"requireBackgroundModes": [
"audio"
]
三、由于后面用到后臺(tái)需要監(jiān)測是哪首歌，需要有id和播放狀態(tài)
在app.js中添加如下代碼-----和onLaunch同級(jí)
GroupData:{
MusicId:'',
MusicPlay:false
},
開始工作
涉及的功能介紹
1.單曲循環(huán)功能
2.上一首
3.下一首
4.播放
5.列表展示
6.進(jìn)度條實(shí)時(shí)
文章來源：http://www.zghlxwxcb.cn/news/detail-818228.html
由于本人比較懶，逐個(gè)功能介紹較復(fù)雜，直接附送源碼，如看代碼不明白，可直接聯(lián)系本人
js部分
import moment from 'moment'
const appInstance = getApp()
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
isXunhuan:false,//是否開啟循環(huán)
isPlay:false, //是否正在播放
isShow:false, //是否展示列表
currentTimeFomat:'0:00', //當(dāng)前的時(shí)間---格式化后
currentTime:'0', //當(dāng)前時(shí)間
durationTime:'', //總時(shí)間
currentWidth:0 , //進(jìn)度條寬度
currentId:'001', //當(dāng)前播放歌曲id
currentUrl:'http://music.163.com/song/media/outer/url?id=317151.mp3', //當(dāng)前播放歌曲地址
currentTitle:'第一首', //當(dāng)前播放歌曲名稱
musicList:[{ //播放列表
id:"001",
url:'http://music.163.com/song/media/outer/url?id=317151.mp3',
title:'第一首'
},{
id:"002",
url:'http://downsc.chinaz.net/Files/DownLoad/sound1/201906/11582.mp3',
title:'第二首'
},{
id:"003",
url:'http://music.163.com/song/media/outer/url?id=298317.mp3',
title:'第三首'
}]
},
//點(diǎn)擊列表按鈕---展示列表頁
showList(){
this.setData({
isShow:true
})
},
//點(diǎn)擊別處--關(guān)閉列表頁
colseList(){
if(this.data.isShow){
this.setData({
isShow:false
})
}
},
//點(diǎn)擊列表里面的歌獲得當(dāng)前的歌曲
musicListChange(e){
this.setData({
currentId:e.currentTarget.dataset.id,
currentUrl:e.currentTarget.dataset.url,
currentTitle:e.currentTarget.dataset.title,
})
this.musicControl(true)
},
//點(diǎn)擊播放按鈕
bofang(){
let isPlay = !this.data.isPlay //修改播放狀態(tài)
this.musicControl(isPlay) //傳遞的是已經(jīng)修改了狀態(tài)
},
//播放函數(shù)
musicControl(isPlay){
console.log(isPlay)
if(isPlay){
this.BackgroundAudioManager.src=this.data.currentUrl,
this.BackgroundAudioManager.title=this.data.currentTitle
}else{
this.BackgroundAudioManager.pause()
}
},
xunhuan(){
console.log("已經(jīng)開啟循環(huán)播放")
this.setData({
isXunhuan:true
})
},
xiayishou(){
const {musicList}=this.data
let url=''
let title=''
let id=''
for(let i=0;i<musicList.length;i++){
if(this.data.currentId==musicList[i].id){
url=musicList[i+1].url
id=musicList[i+1].id
title=musicList[i+1].title
}
}
console.log(url,id,title)
this.setData({
currentTitle:title,
currentUrl:url,
currentId :id
})
this.musicControl(true)
},
xunhuan2(){
const {musicList}=this.data
let url=''
let title=''
let id=''
for(let i=musicList.length-1;i>=0;i--){
if(musicList[i].id==this.data.currentId){
console.log(musicList[i].id)
url=musicList[i].url
id=musicList[i].id
title=musicList[i].title
}
}
this.setData({
currentUrl:url,
currentId:id,
currentTitle:title
})
this.musicControl(true)
},
shangyishou(){
const {musicList}=this.data
let url=''
let title=''
let id=''
for(let i=musicList.length-1;i>=0;i--){
if(musicList[i].id==this.data.currentId){
console.log(musicList[i].id)
url=musicList[i-1].url
id=musicList[i-1].id
title=musicList[i-1].title
}
}
this.setData({
currentUrl:url,
currentId:id,
currentTitle:title
})
this.musicControl(true)
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad(options) {
this.BackgroundAudioManager =wx.getBackgroundAudioManager()
// this.BackgroundAudioManager.src=this.data.currentUrl,
// this.BackgroundAudioManager.title=this.data.currentTitle
// this.BackgroundAudioManager.play()
const MusicId=this.data.currentId
console.log(appInstance.GroupData)
//判斷當(dāng)前頁面音樂是否在播放
if (appInstance.GroupData.MusicPlay && appInstance.GroupData.MusicId === MusicId) {
//修改當(dāng)前音樂播放狀態(tài)為true
this.setData({
isPlay: true
})
}
this.BackgroundAudioManager.onPlay(() => {
this.setData({
isPlay: true
})
appInstance.GroupData.MusicPlay = true
appInstance.GroupData.MusicId = MusicId
})
this.BackgroundAudioManager.onPause(() => {
this.setData({
isPlay: false
})
appInstance.GroupData.MusicPlay = false
//由于上面必定是先播放后停止所以省略 appIstance.GroupData.MusicPlay=false
})
this.BackgroundAudioManager.onStop(() => {
this.setData({
isPlay: false
})
appInstance.GroupData.MusicPlay = false
})
this.BackgroundAudioManager.onTimeUpdate(()=>{
let currentTimeFomat=moment(this.BackgroundAudioManager.currentTime*1000).format('mm:ss')
// console.log(this.BackgroundAudioManager.currentTime)
// console.log(this.BackgroundAudioManager.duration)
let durationTime=Math.floor(this.BackgroundAudioManager.duration)
let currentWidth=this.BackgroundAudioManager.currentTime/this.BackgroundAudioManager.duration*450
if(Math.floor(this.BackgroundAudioManager.duration)==Math.ceil(this.BackgroundAudioManager.currentTime)){
if(this.data.isXunhuan==false){
console.log("下一首了")
this.xiayishou()
}else{
console.log("因?yàn)殚_啟了循環(huán)")
this.xunhuan2()
}
}
this.setData({
currentTimeFomat,
currentTime:Math.ceil(this.BackgroundAudioManager.currentTime),
currentWidth,
durationTime
})
});
this.BackgroundAudioManager.onEnded(()=>{
//進(jìn)度條置為0
this.setData({
currentWidth:0,
currentTime:'0'
})
});
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面顯示
*/
onShow() {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面隱藏
*/
onHide() {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面卸載
*/
onUnload() {
},
/**
* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
*/
onPullDownRefresh() {
},
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom() {
},
/**
* 用戶點(diǎn)擊右上角分享
*/
onShareAppMessage() {
}
})
html部分
<view class="container" >
<text class="musicName" bindtap="colseList">{{currentTitle}}</text>
<view class="circle">
<image src="../../image/disc.png" alt="" class="disc"></image>
<image src="../../image/needle.png"
class="needle"></image>
<image src="../../image/nvsheng.jpg"
class="nvsheng"></image>
</view>
<view class="progressbar">
<text>0:00</text>
<view class="barprogress">
<view class="barprogress-timely" style="width:{{currentWidth+'rpx'}}">
<view class="barcircle">
</view>
</view>
</view>
<text>{{currentTimeFomat}}</text>
</view>
<view class="controls">
<view class="musicControls">
<text class="iconfont icon-xunhuanbofang" bindtap="xunhuan"></text>
<text class="iconfont icon-shangyishou" bindtap="shangyishou"></text>
<text class="iconfont {{isPlay?'icon-zanting':'icon-bofang'}}" bindtap="bofang"></text>
<text class="iconfont icon-xiayishou" bindtap="xiayishou"></text>
<text class="iconfont icon-liebiao" bindtap="showList" hover-stop-propagation="true"></text>
</view>
<view class="songList" wx:if="{{isShow}}">
<view class="songItem" wx:for="{{musicList}}" data-url="{{item.url}}" data-id="{{item.id}}" data-title="{{item.title}}" bindtap="musicListChange">{{item.id}}--{{item.title}}</view>
</view>
</view>
</view>
css部分
.container{
padding:20rpx;
background-color: rgba(0,0,0,0.5);
text-align: center;
height:100%;
}
.musicName{
color: white;
}
.circle{
position: relative;
margin-top:40rpx;
}
.disc{
position: relative;
z-index:1;
height:598rpx;
width:598rpx;
}
.needle{
position:absolute;
left:350rpx;
top:-20rpx;
height:200rpx;
width:200rpx;
z-index:999
}
.nvsheng{
height:370rpx;
width:370rpx;
position: relative;
top:-498rpx;
left:0rpx;
z-index: -999;
}
/* 包裹進(jìn)度條 */
.progressbar{
position: absolute;
bottom: 200rpx;
height:80rpx;
width:640rpx;
line-height: 80rpx;
display: flex;
}
.barprogress{
position: relative;
height:4rpx;
width:450rpx;
background: rgba(0,0,0,0.5);
margin:auto
}
/* 真實(shí)進(jìn)度條 */
.barprogress-timely{
position: absolute;
top:0;
left:0;
z-index: 1;
height:4rpx;
background-color: red;
}
/* 小圓球 */
.barcircle{
position: absolute;
top:-4rpx;
right:-12rpx;
height:12rpx;
width:12rpx;
border-radius: 50%;
background-color: #fff;
}
.musicControls{
display: flex;
height:100rpx;
line-height: 100rpx;
margin-top:-30rpx;
}
.musicControls text{
width:20%;
font-size: 50rpx;
}
.musicControls text:nth-child(3)
{
font-size: 65rpx;
}
.songList{
position:fixed;
top:400rpx;
right:20rpx;
width: 94%;
background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
border-radius: 20rpx;
z-index: 10000;
height:calc(100vh - 400rpx)
}
.songItem{
height:100rpx;
line-height: 100rpx;
color: white;
}
內(nèi)附三張圖片------右鍵可直接拿走
播放器字體圖標(biāo)的引入------這邊就不放出來了
有需要的可以自行到阿里圖標(biāo)庫下載相關(guān)字體
[[iconfont-阿里巴巴矢量圖標(biāo)庫](https://www.iconfont.cn文章來源地址http://www.zghlxwxcb.cn/news/detail-818228.html
到了這里，關(guān)于微信小程序播放器的一些簡單功能實(shí)現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
