微信小程序学习用demo推荐：破音万里：音频播放，音乐列表
音频播放常见的：1：各类循环
2：暂停，继续
3：上一首，下一首
let bsurl = 'https://poche.fm/api/app/playlists'
var common = require('../../../utils/util.js');
let seek = 0
let defaultdata = {
winWidth: 0,
winHeight: 0,
listHeight: 0,
// tab切换
currentTab: 0,
// 播放列表
playlists: [],
tracks: [],
coverImgUrl: "../../../imgs/icon.jpg",
nowPlayingTitle:"请选择歌曲",
nowPlayingArtist: "",
playing:false,
playtime: '00:00',
duration: '00:00',
percent: 1,
lrc: [],
lrcindex: 0,
showlrc: false,
disable: false,
downloadPercent: 0,
curIndex: 0,
initial: true,
shuffle: 1,
music: {}
}
//获取应用实例
let app = getApp()
Page({
data: defaultdata,
onLoad: function(options) {
var that = this;
wx.request({
url: bsurl,
success: function (res) {
that.setData({
listHeight: res.data.length * 230,
playlists: res.data,
loadingHide:true
})
}
})
//获取系统信息
wx.getSystemInfo( {
success: function( res ) {
that.setData( {
winWidth: res.windowWidth,
winHeight: res.windowHeight
})
}
})
// 获取上次播放数据
let index = wx.getStorageSync('curIndex')
let tracks = wx.getStorageSync('tracks')
if (tracks) {
let track = tracks
that.setData( {
curIndex: index,
tracks: tracks,
coverImgUrl:track.cover,
nowPlayingArtist: track.artist,
nowPlayingTitle: track.name,
})
}
//监听停止,自动下一首
wx.onBackgroundAudioStop(function(){
that.playnext();
})
},
bindChange: function(e) {
var that = this;
that.setData( { currentTab: e.detail.current });
},
swichNav: function(e) {
var that = this;
if( this.data.currentTab === e.target.dataset.current ) {
return false;
} else {
that.setData( {
currentTab: e.target.dataset.current
})
}
},
// 跳转下一页
tracks: function(event) {
var index = event.currentTarget.id
var playlist = this.data.playlists
var p = playlist.id
var title = playlist.title
wx.navigateTo({
url: '../tracks/index?id=' + p + '&title=' + title
})
},
// 接收点击数据
changeData: function(tracks, index) {
var curMusic = tracks
this.setData({
curIndex: index,
tracks: tracks,
coverImgUrl:curMusic.cover,
nowPlayingArtist: curMusic.artist,
nowPlayingTitle: curMusic.name,
playing: true,
music: curMusic
})
app.globalData.curplay.id = curMusic.id
//存储当前播放
wx.setStorageSync("curIndex", index)
wx.setStorageSync("tracks", tracks)
app.seekmusic(1)
},
//播放方法
playingtoggle:function(){
var that = this
if (this.data.initial) {
// this.play(this.data.tracks, this.data.curIndex)
this.setData({
initial: false
})
app.seekmusic(1)
return
}
if (this.data.playing) {
that.setData({
playing: false
})
app.stopmusic(1)
} else {
app.seekmusic(1, function () {
that.setData({
playing: true
})
}, app.globalData.currentPosition)
}
},
playnext: function (e) {
if (this.data.initial) {
this.setData({
initial: false
})
}
let shuffle = this.data.shuffle
let count = this.data.tracks.length
let lastIndex = parseInt(this.data.curIndex)
if (shuffle == 3) {
//随机播放
lastIndex = Math.floor(Math.random() * count)
} else if (shuffle == 1) {
if (lastIndex == count - 1) {
lastIndex = 0
} else {
lastIndex = lastIndex + 1
}
}
this.changeData(this.data.tracks, lastIndex)
},
playprev: function (e) {
if (this.data.initial) {
this.setData({
initial: false
})
}
let shuffle = this.data.shuffle
let lastIndex = parseInt(this.data.curIndex)
let count = this.data.tracks.length
if (shuffle == 3) {
//随机播放
lastIndex = Math.floor(Math.random() * count)
} else if (shuffle == 1) {
if (lastIndex == 0) {
lastIndex = count - 1
} else {
lastIndex = lastIndex - 1
}
}
this.changeData(this.data.tracks, lastIndex)
},
playshuffle: function() {
if (this.data.shuffle == 1) {
this.setData({
shuffle: 2
})
return
}
if (this.data.shuffle == 2) {
this.setData({
shuffle: 3
})
return
}
if (this.data.shuffle == 3) {
this.setData({
shuffle: 1
})
}
},
onShow: function () {
var that = this
app.globalData.playtype = this.data.shuffle
common.playAlrc(that, app);
seek = setInterval(function () {
common.playAlrc(that, app);
}, 1000)
},
})
**** Hidden Message *****
顶你啊，呵呵 确实是难得好帖啊，顶先 感谢分享 感谢分享~ 谢谢，学习！！ 很赞，期待一下 刚接触小程序，多多学习吧 确实是难得好帖啊，顶先 想了解即速应用怎么实现这种音频展现形式