微信小程序中实现——【音乐播放器】

已于 2022-12-13 11:39:44 修改
阅读量3.3w 收藏 525
点赞数 93
文章标签： 微信小程序 小程序
于 2022-12-10 15:57:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/py20010218/article/details/128263602
版权

文章目录

一、学习目标

1、掌握swiper组件、scroll-view组件的使用

2、掌握image组件的使用

3、掌握音频API的使用

4、掌握slider组件的使用

二、开发前的准备

音乐小程序项目效果展示：
在这里插入图片描述

1、页面结构图

tab导航栏
content内容区
player音乐播放控件
在这里插入图片描述

2、项目初始化

开发者工具创建空白项目：

{"pages:["pages/index/index"
]
}

“navigationBarBackgroudColor”:"#fff,
“navigationBartitletext”:“音乐,”
“navigationBarBackgroudColor”:“black”,
在这里插入图片描述

3、 任务分析

标签页和页面info.wxml、play.wxml、palylist.wxml

4、 前导知识

swiper组件编写滑动页面结构

<swiper>
<swiper-item style="background:#ccc">0</swiper-item>
<swiper-item style="background:#ddd">1</swiper-item>
<swiper-item style="background:#eee">2</swiper-item>
</swiper-item>

swiper组件编写滑动页面结构index.wxml:

<swiper current-item-id="c">
< swiper-item item-id="a"> <image
src= "https://assets.lexus.com.cn/images/index/kv/2880x1480. newes. 1.jpg?x-Oss-
process=image/resize,w. 1898/quality.q. 80" mode= "widthFix" > </image> </swiper-item>
<swiper-item item-id="b"> <image src= https://assets.exus.com.cn/images/models/s/s -kv-1 2880.jpg?x-oss-
process=image/resize,w. 1898/quality.q. 80" mode= "widthFix" > </image> </swiper-item>
<swiper-item item-id="c"> <image src="https://assets.lexus.com.cn/images/index/kv/ux. 300e-kv-1-2880.jpg?x-
oss-process= image/resize,w 1898/quality,q 80" mode="widthFix"> </image> </swiper-item>
</swiper>

swiper组件编写滑动页面结构index.wxss：

image{
width：100%;
}

include主要用途：
1、将代码拆分到多个文件中，可以更方便地查找代码。
2、将代码公共部分抽取出来。通过外部文件引入。

<include src="header.wxml />
<view>body</view>
<include src="footer.wxml " />

在这里插入图片描述

三、标签页切换

1、页面和样式：

<view class="tab>
<view class="tab-item">音乐推荐</view>
</view>
<!---内容区域--->
<view class="content"></view>
<!---底部播放器--->
<view class="player"></view>

2、音乐小程序基础页面和样式：

<!--标签页标题-->
<view class=" tab">
<view class= "tab-item {{tab==0? active':' }}" bindtap=”changeItem"
data-item= "0" >音乐推荐< /view>
<view class=”tab item {{tab== 1? actie':"}}" bindtap=”changeItem”
data-item="1" >播放器< /view>
<view class=”tab item {{tab== 2? actie':"}}" bindtap=”changeItem”
data-item= "2" >播放列表< /view>
< /view>

请添加图片描述

页面和样式：
在这里插入图片描述

3、页面和样式tab导航的样式：

请添加图片描述
tab导航效果：

在这里插入图片描述

4、测试页面info.wxml、page.wxml、play.wxml文件：

<view style= "background:#ddd; color:#000; h
eight:100%"> play </view>
<view style= "background:#ccc; color:#000; he
ight:100%" > info< /view>
<view style= "background:#eee; color:#00O; he
ight:100%" > playlist</view>

实现标签页切换
单击导航栏选项卡实现标签页切换：

<view class="tab-item {{tab==0?'a
ctive':'}}"
bindtap=" changeltem" data-item
="0">
音乐推荐< /view>
changeltem: function(e) {
this.setData({
item: e.target.dataset.item,
tab:e.target.dataset.item
}},

标签页切换样式

.tab -item.active {
color: #c25b5b;
border- bottom-color: #c25b5b;

5、通过滚动时间切换页面效果

< swiper current= "{item}" bindchange="c
hangeTab"> 
< swiper- item>
<include src = ../index/info" > </include>
</swiper-item>
< swiper- item>
<include src= ../index/play" > </include>
</swiper-item>
< swiper- item>
<include src=”./index/playlist" > </include>
</swiper-item>
</swiper>
（一）滚动事件
change Tab: function(e) {
this.setData({
tab: e.detail.current
.tab-item.active {
color: #c25b5b;
border- bottom-color: #c25b5b;}
（二）通过滚动事件切换页面效果：

在这里插入图片描述

四、音乐推荐

1、scroll-view组件的属性及说明：
< scroll-view scroll-x scroll-y style="hei
ght:200px" bindscroll- "scroll">
<view style ="width:200%;height:400p
x;background:#ccc" > </view>
</scroll-view>
scroll: function(e) {
console.log(e.detail)
},

在这里插入图片描述

2、image组件缩放模式和裁剪模式测试：

内容区域滚动

（一）scroll-view组件：
< scroll-view class= "content-info" scroll-y>
<view style= "background:#eee;height:10
00px" > </view>
<view>已到达底部< /view>
< /scroll-view>

在这里插入图片描述

3、swiper组件实现轮播图：

<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/banner.jpg" />
    </swiper-item>
    <swiper-item>
      <image src="/images/banner.jpg" />
    </swiper-item>
    <swiper-item>
      <image src="/images/banner.jpg" />
    </swiper-item>
  </swiper>

在这里插入图片描述
在这里插入图片描述

4、flex布局实现功能按钮：

<view class="content-info-portal">
    <view>
      <image src="/images/04.png" />
      <text>私人FM</text>
    </view>

在这里插入图片描述

（一）flex布局实现功能按钮：
.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;
}

在这里插入图片描述

（二）flex布局实现页面布局：
  <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>

在这里插入图片描述
热门音乐

.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;
}

在这里插入图片描述

5、index页面底部播放
<!-- 底部播放器 -->
<view class="player">
  <image class="player-cover" src="{{play.coverImgUrl}}" />
  <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" />
    <!-- 播放或暂停 -->
    <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>

在这里插入图片描述

在这里插入图片描述

.player {
  display: flex;
  align-items: center;
  background: #222;
  border-top: 1px solid #252525;
  height: 112rpx;
}

.player-cover {
  width: 80rpx;
  height: 80rpx;
  margin-left: 15rpx;
  border-radius: 8rpx;
  border: 1px solid #333;
}

在这里插入图片描述

.player-info {
  flex: 1;
  font-size: 10pt;
  line-height: 38rpx;
  margin-left: 20rpx;
  padding-bottom: 8rpx;
}

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

.player-controls image {
  width: 80rpx;
  height: 80rpx;
  margin-right: 15rpx;
}

在这里插入图片描述

五、播放器

1、audioctx对象声明的方式：

var  audioctx = wx.createInnerAudioContext();
（一）innerAudioContext案例使用：
onReady: function() {
var audioCtx = wx.createInnerAudioContext(
audioCtx.src = htt.:/....x.o.
audioCtx.onPlay(function() {
console.log('开始播放')
})
...
},
（二）slider组件的使用：
<slider bindchanging = "sliderChangeing" show-value />
sliderChanging:function(e){
console.log(e.detail.value)
},

在这里插入图片描述

（三）音乐播放列表和音乐状态数据：
   playlist: [{
      id: 1,
      title: '钢琴协奏曲',
      singer: '肖邦',
      src: 'http://localhost:3000/1.mp3',
      coverImgUrl: '/images/cover.jpg'
    },

在这里插入图片描述

（四）实现音乐播放功能

音乐播放逻辑代码：

 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.playlist[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
    })
  },
（五）底部播放器的结构代码：
<!-- 底部播放器 -->
<view class="player">
  <image class="player-cover" src="{{play.coverImgUrl}}" />
  <view class="player-info">
    <view class="player-info-title">{{play.title}}</view>
    <view class="player-info-singer">{{play.singer}}</view>
  </view>

在这里插入图片描述

底部播放器的样式代码：

.player {
  display: flex;
  align-items: center;
  background: #222;
  border-top: 1px solid #252525;
  height: 112rpx;
}

在这里插入图片描述

（六）底部播放器暂停/播放按钮控制歌曲：
   <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" />

 next: function() {
    var index = this.data.playIndex >= this.data.playlist.length - 1 ? 0 : this.data.playIndex + 1
    this.setMusic(index)
    if (this.data.state === 'running') {
      this.play()
    }
  },

在这里插入图片描述

（八）播放器页面结构代码：
<view class="content-play">
  <!-- 显示音乐信息 -->
  <view class="content-play-info">
    <text>{{play.title}}</text>
    <view>—— {{play.singer}} ——</view>
  </view>

在这里插入图片描述

六、播放器

<!-- 播放器 -->
<view class="content-play">
  <!-- 显示音乐信息 -->
  <view class="content-play-info">
    <text>{{play.title}}</text>
    <view>—— {{play.singer}} ——</view>
  </view>
  <!-- 显示专辑封面 -->
  <view class="content-play-cover">
    <image src="{{play.coverImgUrl}}" style="animation-play-state:{{state}}" />
  </view>
  <!-- 显示播放进度和时间 -->
  <view class="content-play-progress">
    <text>{{play.currentTime}}</text>
    <view>
      <slider bindchange="sliderChange" activeColor="#d33a31" block-size="12" backgroundColor="#dadada" value="{{play.percent}}" />
    </view>
    <text>{{play.duration}}</text>
  </view>
</view>

在这里插入图片描述
在这里插入图片描述

1、播放器样式1

.content-play {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  height: 100%;
  text-align: center;
}

.content-play-info > view {
  color: #888;
  font-size: 11pt;
}

在这里插入图片描述

2、通过CSS3动画实现海报的旋转功能：

  <!-- 显示专辑封面 -->
  <view class="content-play-cover">
    <image src="{{play.coverImgUrl}}" style="animation-play-state:{{state}}" />
  </view>

在这里插入图片描述

3、播放器页面下方的滑块结构：

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

在这里插入图片描述

3、显示音乐的播放进度：

  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()
    })

4、控制进度条的长度控制歌曲播放进度：

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

sliderChange: function(e) {
var second = e.detail.value
*
this.audioCtx.duration / 100
this.audioCtx.seek(second)
},

控制进度条的长度控制歌曲播放进度：

<scroll-view class="content-playlist" scroll-y>
  <view class="playlist-item" wx:for="{{playlist}}" 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>

在这里插入图片描述

七、播放列表

1、控制进度条的长度控制歌曲播放进度：

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

在这里插入图片描述

2、实现换曲功能：

change:function(e){
this.setMusic(e.currentTarget.dateset.index)
this.play()
},

在这里插入图片描述
在这里插入图片描述

潘潘.tel
关注
微信小程序+音乐播放器（完整代码）分享
11-06
音乐播放器”微信小程序的页面由上、中、下3个部分组成，这3个部分分别是标签栏区域、内容区域和播放器区域。“圆形的图片是专辑封面，在音乐播放时会旋转，音乐暂停时图片暂停旋转。下方是滑动选择器，用于显示或更改音乐的播放进度，滑动选择器左边的时间表示当前播放音乐的时长，右边的时间表示当前曲目的总时长。
微信小程序音乐播放器demo
01-12
该小程序源码是一个音乐播放器，适用于刚刚学习微信小程序的人员。
微信小程序音乐播放器开发实战：从页面搭建到功能实现
最新发布
-曾牛的博客
04-22 1232
掌握微信小程序组件化开发（include标签复用结构）实现复杂状态管理（播放状态、进度、列表数据同步）集成背景音频API，支持后台播放与精准进度控制优化交互体验（动画效果、滑动条防抖处理）
微信小程序-一个音乐播放器视频播放器小程序
08-08
音频播放器 >PS:这里音乐/图片(MP3/图片)来源是我本地电脑自己搭建的服务器. >用WAMP.把音乐放在根目录就可以了. >当然也可以返回网络上的数据 util.js getDataFromNet()返回音乐列表数据,模拟网络数据用setTimeOut 自动下一首 添加截图
微信小程序实现音乐播放器
01-03
今天继续玩小程序的api，看着别人例子跟着做一个小程序，留下一个脚印吧。末尾附上github源码地址。实现以下微信小程序的音乐播放器，先看下效果图 界面做的确实挺丑的，先上wxss文件 //index.wxss .button-style{ background-color: #eee; border-radius: 8rpx; margin: 20rpx; } 只是顶一个简单的按钮的圆角和间距，颜色这个我还是用primary这个小绿色。 下面是index.wxml文件 //index.wxml <button class=button-style type=primary
微信小程序-微信小程序：音乐播放器
08-05
微信小程序： 音乐播放器 歌曲资源来源于 baidu音乐 截图 TODO 收藏列表 切换上一曲/下一曲
微信小程序——音乐播放器
weixin_66547608的博客
09-30 8895
了音乐小程序项目的完整开发流程，其开发步骤包括页面结构的分析、样式的设计、组件的运用等。通过本章的学习，读者能够掌握小程序的基本交互逻辑的开发，能够运用API来实现项目中的特定功能，学会解决开发过程中常见的问题。
微信小程序音乐播放器
03-11
微信小程序版音乐播放器（MP3播放器），支持在线音乐 选歌 切歌等
一款基于微信小程序的音乐播放器
08-10
一款基于微信小程序的音乐播放器
微信小程序--音乐播放器
热门推荐
河里的草_increase
07-24 1万+
微信小程序练习--音乐播放器 说明： 这个项目旨在练习组件以及页面的设计。页面和交互的实现可能有多种方式，这里只为了对组件和项目的结构进行熟悉了解。后续会有更加完善的项目。 由于涉及到mp3外链导入音乐，预览二维码在外链失效时会出错，这里不放预览二维码了；另预览二维码存在有效时长，有兴趣的可以自己试着运行程序，在运行程序之前更换mp3外链的地址，以防出错。mp3外链（音乐外链在线获取_音乐外链生成网站_音乐在线听-mp3外链网 (xf1433.com)）。 喜欢的可以点个赞，如果有问题或者想要完整的
微信小程序实现一个音乐播放器的功能
weixin_71893790的博客
12-21 5532
微信小程序实现一个音乐播放器的功能
微信小程序-音乐播放器小程序
05-13
微信小程序-音乐播放器小程序
微信小程序-音乐播放器
07-08
微信小程序-音乐播放器DEMO，适用于初学者，帮助快速了解小程序
微信小程序项目实例——今日美食
05-24
【微信小程序项目实例——今日美食】是一个以移动开发技术为核心，专注于美食分享的应用。这个小程序旨在为用户带来丰富的美食制作教程，提供详细的食材配料和步骤指导，让用户在家中也能轻松制作出美味佳肴。 首先...
微信小程序开发之——音乐播放器-音乐推荐
onghaha的博客
04-20 1465
那我们该怎么做才能做到年薪60万+呢，对于程序员来说，只有不断学习，不断提升自己的实力。我之前有篇文章提到过，感兴趣的可以看看，到底要学习哪些知识才能达到年薪60万+。通过职友集数据可以查看，以北京 Android 相关岗位为例，其中 【20k-30k】 薪酬的 Android 工程师，占到了整体从业者的 30.8%！北京 Android 工程师「工资收入水平 」今天重点内容是怎么去学，怎么提高自己的技术。1.合理安排时间2.找对好的系统的学习资料3.有老师带，可以随时解决问题。
微信小程序项目实例——体质计算器
05-27
在这个“微信小程序项目实例——体质计算器”中，开发者构建了一个专注于健康领域的应用，帮助用户计算体质指数（BMI），评估其健康状况，并提供相关健康建议。 体质计算器的核心功能是根据用户的身高和体重计算BMI...
微信小程序项目实例——家居团购
06-04
微信小程序项目实例——家居团购微信小程序项目实例——家居团购微信小程序项目实例——家居团购微信小程序项目实例——家居团购微信小程序项目实例——家居团购微信小程序项目实例——家居团购微信小程序项目实例...
微信小程序开发———音乐播放器
12-23
微信小程序的音乐播放器开发主要包括以下几个步骤： 1. **设置基础结构**：首先，在小程序的页面.json文件中配置页面的结构，包括引入所需的音频资源。 2. **引入音频组件**：在wxml文件中，可以使用`audio`标签来创建一个音乐播放器，例如： ```html <audio src="your_music.mp3" id="musicPlayer"></audio> ``` 3. **控制事件处理**：通过JavaScript编写事件处理器，如播放、暂停、停止、音量调节等。可以监听`play`、`pause`、`ended`等事件，以及使用`volume`属性来改变音量。 4. **状态管理**：使用小程序的全局数据`App.globalData`或局部数据`setData`来管理播放状态，比如当前歌曲位置和是否正在播放。 5. **用户交互设计**：添加触摸事件，让用户可以滑动进度条、点击按钮切换上一曲下一曲等操作。 6. **样式定制**：利用wxss对播放器进行样式定制，提升用户体验。 7. **权限管理**：如果需要在后台播放音乐，需申请相应的权限。
评论 20
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值