微信小程序之简易音乐播放器的实现

微信小程序之简易音乐播放器的实现

第一个是效果图

在这里插入图片描述

需要的东西

  • 微信的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
        })
      }
    })
  }
})

这是我自己写的一个小程序
一个文字分享的小程序,喜欢的可以看一下哟
在这里插入图片描述

  • 4
    点赞
  • 53
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值