微信小程序之简易音乐播放器的实现
第一个是效果图
需要的东西
- 微信的InnerAudioContext类的属性和方法
- 页面和图标
代码
- index.wxml
<view class="player">
<view class="musicImg"> //歌曲封面
<image class="songImg {{rotated}}" src='{{songImg}}' bindtap="play"></image>
</view>
<view class="songdetail">
<view class="song">//歌手和歌曲名
<text class="songt">{{songTitle}}--{{singer}}</text>
</view>
<view class="playing">//上一曲下一曲暂停开始
<view class="left" bindtap="pre" data-index="{{songArray.index}}">
<image class="pre" src="/images/pre.png"></image>
</view>
<view class="play" bindtap="play">
<image src="{{isActive ? '/images/play.png':'/images/pause.png'}}" class="playbtn" ></image>
</view>
<view class="right" bindtap="next">
<image class="next" src="/images/next.png"></image>
</view>
</view>
</view>
</view>
- index.wxss
类名及属性
.player{
height: 10vh;
display: flex;
width: 80vw;
margin-top: 5vh;
margin-left: 10vw;
border-radius: 5vh;
position: absolute;
overflow: hidden;
background-color: aqua;
}
.musicImg{
position: relative;
height: 8vh;
width: 8vh;
margin-top: 1vh;
margin-left: 3vw;
border-radius: 50%;
}
.songImg{
height: 8vh;
width: 8vh;
border-radius: 50%;
}
.rotated{
animation: headRotate 10s linear infinite;
}
.songdetail{
position: relative;
height: 9vh;
width: 60vw;
margin-top: 0.5vh;
margin-left: 1vh;
}
.songt{
height: 4vh;
width: 50vw;
display: block;
font-size: 14px;
text-align: center;
animation: dmAnimation 10s linear infinite;
}
.song{
position: relative;
height: 4vh;
line-height: 4vh;
width: 50vw;
margin-left: 2vw;
overflow: hidden;
}
.playing{
display: flex;
position: relative;
height: 5vh;
width: 55vw;
margin-bottom: 0.5vh;
margin-left: 1vw;
border-radius: 2.5vh;
}
.pre{
margin-top: 0.5vh;
margin-right: 1vw;
margin-left: 7vw;
height: 4vh;
width: 4vh;
}
.next{
margin-top: 0.5vh;
margin-right: 1vw;
margin-left: 7vw;
height: 4vh;
width: 4vh;
}
.playbtn{
margin-top: 0.5vh;
margin-right: 1vw;
margin-left: 7vw;
height: 4vh;
width: 4vh;
}
@keyframes headRotate{//设置封面转动
0% {transform: rotate(0deg);}
50% {transform: rotate(180deg);}
100% {transform: rotate(360deg);}
}
@keyframes dmAnimation{//设置歌名平移
0% { transform: translateX(-5%); }
100% { transform: translateX(10%); }
}
- index.js
逻辑层代码
const Audio = wx.createInnerAudioContext(); //创建InnerAudioContext
Page({
data: {
duration: '',//歌曲长度
currentTime: '',//当前播放时间
songTitle: '',//歌名
songPath: '',//歌曲路径
songImg: '',//歌曲封面
singer: '',//歌手
songArray: [],//存储歌曲信息的数组
rotated: 'rotated',//实现封面旋转的标志
isActive: true//实现暂停播放,上一曲,下一曲,及封面转动的标志
},
gotSong: function () {//获取歌曲信息
var that = this
wx.request({//微信的request请求
url: 'https://api.uomg.com/api/rand.music?format=json',
success: function (res) {
that.data.songArray = that.data.songArray.concat(res.data.data)//拼接返回的信息为一个数组
wx.setStorageSync('songArray', that.data.songArray)//设置本地缓存
Audio.src = res.data.data.url//设置歌曲路径
that.setData({//设置信息
songTitle: res.data.data.name,
songPath: res.data.data.url,
songImg: res.data.data.picurl,
singer: res.data.data.artistsname
})
// console.log(res.data.data)
}
})
},
//上一首
pre: function (e) {
var that = this
var isActive = that.data.isActive//获取标志
if (!isActive) {
that.setData({
isActive: true
})
}
var len = that.data.songArray.length - 2//通过调整数组实现上一曲 数组是零序的 数组长度1序 所以减2位上一首歌位置所在序号
var array = that.data.songArray
if (len >= 0) {//大于等于零就是刚开始一首歌,没有上一曲
Audio.src = array[len].url
that.setData({
songTitle: array[len].name,
songPath: array[len].url,
songImg: array[len].picurl,
singer: array[len].artistsname
})
that.data.songArray.pop()
}
},
//下一首
next: function () {
var that = this
var isActive = that.data.isActive
if (!isActive) {
that.setData({
isActive: true
})
}
wx.request({
url: 'https://api.uomg.com/api/rand.music?format=json',
success: function (res) {
that.data.songArray = that.data.songArray.concat(res.data.data)
wx.setStorageSync('songArray', that.data.songArray)
Audio.src = res.data.data.url
that.setData({
songTitle: res.data.data.name,
songPath: res.data.data.url,
songImg: res.data.data.picurl,
singer: res.data.data.artistsname,
})
// console.log(res.data.data)
}
})
},
// 暂停或播放
play: function () {
var that = this
var isActive = that.data.isActive
var rotated = that.data.rorated
if (isActive) {
Audio.pause();
rotated = ''
that.setData({
isActive: false,
rotated: rotated
})
// console.log('暂停了');
} else {
rotated: rotated
that.setData({
isActive: true,
rotated: 'rotated'
})
Audio.play();
// console.log('播放了');
}
},
onLoad: function (options) {//监听页面加载
var that = this
that.gotSong()
Audio.autoplay = true//设置自动播放
Audio.onPlay(() => {//监测播放事件
console.log('开始自动播放')
})
Audio.onError((res) => {//监测播放失败事件
console.log(res.errMsg)
console.log(res.errCode)
})
},
onShow: function (options) {//监听页面显示
var that = this
Audio.onEnded(() => {//监听歌曲自然播放结束
that.gotSong();//调用gotsong方法,播放下一首歌
var isActive = that.data.isActive//设置图标
if (!isActive) {
that.setData({
isActive: true
})
}
})
}
})
这是我自己写的一个小程序
一个文字分享的小程序,喜欢的可以看一下哟