微信小程序——音乐播放器

前言

使用swiper组件完成三个标签页的切换,并且实现轮播图。scroll-view组件完成滚动视图,使用微信小程序提供的音乐API播放音频。

主页

主页
index.wxml

<view class="nav">
  <view class="nav-item {{currentTab==0?'active':''}}" bindtap="switchTab" data-tab="0">音乐推荐</view>
  <view class="nav-item {{currentTab==1?'active':''}}" bindtap="switchTab" data-tab="1">播放器</view>
  <view class="nav-item {{currentTab==2?'active':''}}" bindtap="switchTab" data-tab="2">播放列表</view>
</view>

<!-- 标签页 -->
<view class="main">
<swiper current="{{currentTab}}" bindchange="changeTab">
  <swiper-item class="nav-item">
    <include src="recommend.wxml" />
  </swiper-item>
  <swiper-item class="nav-item">
    <include src="play.wxml" />
  </swiper-item>
  <swiper-item class="nav-item">
    <include src="playlist.wxml" />
  </swiper-item>

</swiper>
</view>


<!-- 底部播放器 -->
<view class="playing">
  <view class="thumb">
    <image src="{{play.coverImgUrl}}"></image>
  </view>
  <view class="info">
    <view class="title">{{play.title}}</view>
    <view class="authors">{{play.singer}}</view>
  </view>
  <view class="controls">
    <image src="/images/01.png" bindtap="changePage" data-page="2" />

    <image wx:if="{{state=='paused'}}" src="/images/02.png" bindtap="play" />
    <image wx:else src="/images/02stop.png" bindtap="pause" />

    <image src="/images/03.png" bindtap="next" />
  </view>
</view>

index.wxss


@import "recommend.wxss";
@import "play.wxss";
@import "playlist.wxss";
page{
  background-color: #17181a;
  color: #ccc;
  font-size: 35rpx;
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* 导航栏 */
.nav{
  height: 80rpx;
  line-height: 80rpx;
  display: flex;
}

.nav-item{
  flex: 1;
  flex-basis:33.3%;
  text-align: center;
}
.active{
  color: orange;
}
/* 主体 */
.main{
  flex: 1;
  height: 100%;
}
.main>swiper{
  height: 100%;
}

/* 底部 */
.playing{
  height: 120rpx;
  display: flex;
}
.thumb{
  width: 120rpx;

}
.thumb>image{
  width: 110rpx;
  height: 110rpx;
  margin: 5rpx;
}
.info{
  flex: 1;
}
.info>view{
  height: 60rpx;
  line-height: 60rpx;
}
.controls{
  width: 250rpx;
}
.controls>image{
  width: 80rpx;
  height: 80rpx;
  margin-top: 20rpx;
}

三个标签页

推荐页

recommend.wxml

<!-- 内容滚动区域 -->
<scroll-view class="content-info" scroll-y>
  <!-- 轮播图 -->
  <swiper class="content-info-slide" indicator-color="rgba(255,255,255,.5)" indicator-active-color="#fff" indicator-dots circular autoplay>
    <swiper-item>
      <image src="/images/1.jpg" />
    </swiper-item>
    <swiper-item>
      <image src="/images/2.jpg" />
    </swiper-item>
    <swiper-item>
      <image src="/images/4.jpg" />
    </swiper-item>
  </swiper>
  <!-- 功能按钮 -->
  <view class="content-info-portal">
    <view>
      <image src="/images/04.png" />
      <text>私人FM</text>
    </view>
    <view>
      <image src="/images/05.png" />
      <text>每日歌曲推荐</text>
    </view>
    <view>
      <image src="/images/06.png" />
      <text>云音乐新歌榜</text>
    </view>
  </view>
  <!-- 热门音乐 -->
  <view class="content-info-list">
    <view class="list-title">推荐歌曲</view>
    <view class="list-inner">
      <view class="list-item">
        <image src="/images/cover.jpg" />
        <view>紫罗兰</view>
      </view>
      <view class="list-item">
        <image src="/images/cover.jpg" />
        <view>五月之歌</view>
      </view>
      <view class="list-item">
        <image src="/images/cover.jpg" />
        <view>菩提树</view>
      </view>
      <view class="list-item">
        <image src="/images/cover.jpg" />
        <view>欢乐颂</view>
      </view>
      <view class="list-item">
        <image src="/images/cover.jpg" />
        <view>安魂曲</view>
      </view>
      <view class="list-item">
        <image src="/images/cover.jpg" />
        <view>摇篮曲</view>
      </view>
    </view>
  </view>
</scroll-view>

index.wxss


.content-info {
  height: 100%;
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

/* 轮播图 */

.content-info-slide {
  height: 302rpx;
  margin-bottom: 20px;
}

.content-info-slide image {
  width: 100%;
  height: 100%;
}

/* 功能按钮 */

.content-info-portal {
  display: flex;
  margin-bottom: 15px;
}

.content-info-portal > view {
  flex: 1;
  font-size: 11pt;
  text-align: center;
}

.content-info-portal image {
  width: 120rpx;
  height: 120rpx;
  display: block;
  margin: 20rpx auto;
}

/* 热门音乐 */

.content-info-list {
  font-size: 11pt;
  margin-bottom: 20rpx;
}

.content-info-list > .list-title {
  margin: 20rpx 35rpx;
}

.content-info-list > .list-inner {
  display: flex;
  flex-wrap: wrap;
  margin: 0 20rpx;
}

.content-info-list > .list-inner > .list-item {
  flex: 1;
}

.content-info-list > .list-inner > .list-item > image {
  display: block;
  width: 200rpx;
  height: 200rpx;
  margin: 0 auto;
  border-radius: 10rpx;
  border: 1rpx solid #555;
}

.content-info-list > .list-inner > .list-item > view {
  width: 200rpx;
  margin: 10rpx auto;
  font-size: 10pt;
}

播放器页

play.wxml

<view class="play">
  <!-- 基本信息 -->
  <view class="music_info">
    <view class="name">{{play.title}}</view>
    <view class="auto">{{play.singer}}</view>
  </view>
  <!-- 封面 -->
  <view class="cover">
    <image src="{{play.coverImgUrl}}" style="animation-play-state:{{state}}" />
  </view>
  <!-- 进度条 -->
  <view class="progress">
    <!-- 显示播放进度和时间 -->
    <text>{{play.currentTime}}</text>

    <slider bindchange="sliderChange" activeColor="#d33a31" block-size="12" backgroundColor="#dadada"
      value="{{play.percent}}" />

    <text>{{play.duration}}</text>
  </view>

</view>

play.wxss

.play {
  display: flex;
  flex-direction: column;
}


/*  */
.music_info {
  text-align: center;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
}


/*  */
.cover {
  margin-top: 80rpx;
  margin-bottom: 120rpx;
  flex: 1;
}

.cover>image {
  width: 400rpx;
  height: 400rpx;
  display: block;
  margin: 0 auto;
  border-radius: 50%;
  /* 动画旋转 */
  animation: rotateImage 10s linear infinite;
}

@keyframes rotateImage {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.progress{
  padding-bottom: 50rpx;
  display: flex;
}
.progress>slider{
  display: inline-block;
  /* width: 400rpx; */
  flex: 1;
}
.progress>text{
  padding: 16rpx;
  height: 50rpx;
  line-height: 50rpx;
}

播放列表页

playist.wsml

<scroll-view class="playlist" scroll-y>
  <view class="playlist-item" wx:for="{{musics}}" wx:key="id" bindtap="change" data-index="{{index}}">
    <image class="playlist-cover" src="{{item.coverImgUrl}}" />
    <view class="playlist-info">
      <view class="playlist-info-title">{{item.title}}</view>
      <view class="playlist-info-singer">{{item.singer}}</view>
    </view>
    <view class="playlist-controls">
      <text wx:if="{{index==playIndex}}">正在播放</text>
    </view>
  </view>
</scroll-view>

playist.wsss

.playlist-item {
  display: flex;
  align-items: left;
  border-bottom: 1rpx solid #333;
  height: 140rpx;
}

.playlist-cover {
  width: 100rpx;
  height: 100rpx;
  margin: 12rpx;
  margin-left: 20rpx;
  border-radius: 8rpx;
  border: 1px solid #333;
}

.playlist-info {
  flex: 1;
  font-size: 12pt;
  line-height: 50rpx;
  margin-left: 10rpx;
  text-align: left;
  padding-bottom: 8rpx;
  margin-top: 12rpx;
}

.playlist-info-singer {
  color: #888;
}

.playlist-controls {
  font-size: 12pt;
  margin-right: 30rpx;
  color: #c25b5b;
}

逻辑

index.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    currrentTab: 1,
    musics: [{
    id: 1,
    title: '智联世界',
    singer: '小冰',
    src: '/audio/智联家园.mp3',
    coverImgUrl: '/images/小冰.jpg'
  }, {
    id: 2,
    title: '不要认输',
    singer: '坂井泉水',
    src: '/audio/不要认输.mp3',
    coverImgUrl: '/images/坂井泉水.jpg'
  }, {
    id: 3,
    title: '白桦林',
    singer: '朴树',
    src: '/audio/白桦林.mp3',
    coverImgUrl: '/images/朴树.jpg'
  }, {
    id: 4,
    title: '红豆',
    singer: '王菲',
    src: '/audio/红豆.mp3',
    coverImgUrl: '/images/王菲.jpg'
  }],
  state: 'paused',
  playIndex: 0,
  play: {
    currentTime: '00:00',
    duration: '00:00',
    percent: 0,
    title: '',
    singer: '',
    coverImgUrl: '/images/cover.jpg',
  }
  },

  // 单击导航栏拿到自定义属性
  switchTab: function (e) {
    // var tab = e.target.dataset.tab
    // this.setData({
    //   currrentTab:tab
    // })
    this.setData({
      currentTab: e.target.dataset.tab,
    })
  },
  changeTab: function (e) {
    // var tab = e.target.dataset.tab
    // this.setData({
    //   currrentTab:tab
    // })
    this.setData({
      currentTab: e.detail.current
    })
  },



  // 实现播放器播放功能
  audioCtx: null,
  onReady: function() {
    this.audioCtx = wx.createInnerAudioContext()
    // 默认选择第1曲
    this.setMusic(0)
    var that = this
    // 播放进度检测
    this.audioCtx.onError(function() {
      console.log('播放失败:' + that.audioCtx.src)
    })
    // 播放完成自动换下一曲
    this.audioCtx.onEnded(function() {
      that.next()
    })
    // 自动更新播放进度
    this.audioCtx.onPlay(function() {})
    this.audioCtx.onTimeUpdate(function() {
      that.setData({
        'play.duration': formatTime(that.audioCtx.duration),
        'play.currentTime': formatTime(that.audioCtx.currentTime),
        'play.percent': that.audioCtx.currentTime / that.audioCtx.duration * 100
      })
    })
    // 格式化时间
    function formatTime(time) {
      var minute = Math.floor(time / 60) % 60;
      var second = Math.floor(time) % 60
      return (minute < 10 ? '0' + minute : minute) + ':' + (second < 10 ? '0' + second : second)
    }
  },
  // 音乐播放
  setMusic: function(index) {
    var music = this.data.musics[index]
    this.audioCtx.src = music.src
    this.setData({
      playIndex: index,
      'play.title': music.title,
      'play.singer': music.singer,
      'play.coverImgUrl': music.coverImgUrl,
      'play.currentTime': '00:00',
      'play.duration': '00:00',
      'play.percent': 0
    })
  },

  // 播放按钮
  play: function() {
    this.audioCtx.play()
    this.setData({
      state: 'running'
    })
  },

  // 暂停按钮
  pause: function() {
    this.audioCtx.pause()
    this.setData({
      state: 'paused'
    })
  },

  // 下一曲按钮
  next: function() {
    var index = this.data.playIndex >= this.data.musics.length - 1 ? 0 : this.data.playIndex + 1
    this.setMusic(index)
    if (this.data.state === 'running') {
      this.play()
    }
  },
  
  // 滚动条调节歌曲进度
  sliderChange: function(e) {
    var second = e.detail.value * this.audioCtx.duration / 100
    this.audioCtx.seek(second)
  },

  // 播放列表换曲功能
  change: function(e) {
    this.setMusic(e.currentTarget.dataset.index)
    this.play()
  }
posted @   Patrick-Rex  阅读(435)  评论(0编辑  收藏  举报  
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示