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

iczq

于 2023-06-25 15:21:07 发布

阅读量2.5k

点赞数 13

分类专栏：微信小程序开发文章标签：微信小程序

本文链接：https://blog.csdn.net/m0_58520840/article/details/131378572

版权

微信小程序开发专栏收录该内容

3 篇文章

订阅专栏

该文章展示了如何使用微信小程序开发一个音乐播放器，包括切换音乐、播放控制和播放列表显示。通过WXML实现页面结构，用Swiper组件处理内容切换，以及事件绑定实现播放、暂停和切换歌曲的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序音乐播放器

样式

播放列表
个人主页

拨打电话

<!--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>

取源码私聊