微信小程序音乐播放器【含源码】_微信小程序音乐播放器源码

微信小程序音乐播放器

样式

<!--pages/musicIndex/musicIndex.wxml-->
<view class="tab">
  <view class="tab-item {{tab==0?'active':''}} "bindtap="changeItem" data-item="0">音乐</view>
  <view class="tab-item {{tab==1?'active':''}} "bindtap="changeItem" data-item="1">播放器</view>
  <view class="tab-item  {{tab==2?'active':''}} "bindtap="changeItem" data-item="2">播放列表</view>
</view>

<!-- 内容 -->
<view class="content">
  <swiper current="{{item}}" bindchange="changeTab">
      <swiper-item >
        <include src="info.wxml"/>
      </swiper-item>
      <swiper-item>
        <include src="play.wxml"/>
      </swiper-item>
      <swiper-item>
        <include src="playList.wxml"/>
      </swiper-item>
  </swiper>
</view>
<view class="player">
  <image class="player-cover" src="{{play.coverImgUrl}}" mode=""/>
  <view class="player-info">
    <view class="player-info-title">
      {{play.title}}
    </view>
    <view class="player-info-singer">
      {{play.singer}}
    </view>
  </view>
  <view class="player-controls">
  <!-- 切换到播放列表 -->
    <image src="/images/01.png" bindtap="changePage" data-page="2" mode=""/>
    <!-- 播放 -->
    <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" mode=""/>
  </view>
</view>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

取源码私聊