微信小程序——【云音乐播放器】
2024-05-14 04:22:23
目录
第一章 开发准备
一、项目结构
二、新建微信小程序项目
第二章 标签页切换
一、常用组件介绍
二、编写页面结构和样式
第三章 音乐推荐
一、组件介绍
二、编写音乐推荐页面结构和样式
第四章 播放器
一、任务分析
二、组件介绍
三、实现播放器功能
四、编写播放器页面
第五章 播放列表
一、实现播放列表功能
二、测试播放列表切换功能
三、最终结果展示页面
第一章 开发准备
一、项目结构
| tab导航栏 | content内容区 | player音乐播放器控件 |
| 标签 | 功能 |
|---|---|
| app.js | 应用程序的逻辑文件 |
| app.json | 应用程序的配置文件 |
| pages/index/index.js | index页面的逻辑文件 |
| pages/index/index.json | index页面的配置文件 |
| pages/index/index.wxss | index页面的样式文件 |
二、新建微信小程序项目
- 修改
app.json，标题导航栏名称改为"音乐"{"pages":["pages/index/index"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "音乐","navigationBarTextStyle":"black"},"style": "v2","sitemapLocation": "sitemap.json" }
- 删除
index.wxml、index.wxss里的内容使其成为一个空白的页面
第二章 标签页切换
一、常用组件介绍
swiper常用属性：
| 可选值 | 说明 | 默认 |
|---|---|---|
| indicator-dots | Boolean | 是否显示面板指示点，默认为false |
| indicator-color | Color | 指示点颜色，默认为rgba(0,0,0,.3) |
| indicator-active-color | Color | 当前选中的指示点颜色，默认为#000000 |
| autoplay | Boolean | 是否自动切换，默认为false |
| current | Number | 当前所在滑块的index，默认为0 |
| current-item-id | String | 当前所在滑块的item-id（不能同时指定current） |
| interval | Number | 自动切换时间间隔（毫秒），默认为5000 |
| duration | Number | 滑动动画时长（毫秒），默认为500 |
| circular | Boolean | 是否采用衔接滑动，默认为false |
| vertical | Boolean | 滑动方向是否为纵向，默认为false |
| vertical | Boolean | 滑动方向是否为纵向，默认为false |
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>二、编写页面结构和样式
- 在
pages/index/index.wxml编写页面和tab导航栏<!-- 标签页标题 --> <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"></view> <!-- 底部播放器 --> <view class="player"></view> - 在
pages/index/index.wxss编写页面样式和tab导航栏样式
page {display: flex;flex-direction: column;background: #17181a;color: #ccc;height: 100%;}.tab {display: flex;
}.tab-item {flex: 1;font-size: 10pt;text-align: center;line-height: 72rpx;border-bottom: 6rpx solid #eee;
}
.tab-item.active {color: #c25b5b;border-bottom-color: #c25b5b;
}
- 添加页面
info.wxml、playlist.wxml、play.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"></include></swiper-item><swiper-item><include src="play.wxml"></include></swiper-item><swiper-item><include src="playlist.wxml"></include></swiper-item></swiper>
</view>
<!-- 底部播放器 -->
<view class="player"></view>
- 滚动事件
// tab切换changeTab: function(e) {this.setData({tab: e.detail.current})},
- 通过滚动事件切换页面
第三章 音乐推荐
一、组件介绍
scroll-view组件的属性及说明
| 可选值 | 说明 | 默认 |
|---|---|---|
| scroll-x | Boolean | 允许横向滚动，默认为false |
| scroll-x | Boolean | 允许横向滚动，默认为false |
| scroll-x | Boolean | 允许横向滚动，默认为false |
| scroll-left | Number / String | 设置横向滚动条的位置 |
| bindscrolltoupper | EventHandle | 滚动到顶部/左边时触发的事件 |
| bindscrolltolower | EventHandle | 滚动到底部/右边时触发的事件 |
| bindscrolltolower | EventHandle | 滚动到底部/右边时触发的事件 |
| bindscrolltolower | EventHandle | 滚动到底部/右边时触发的事件 |
| bindscroll | EventHandle | 滚动时触发的事件 |
二、编写音乐推荐页面结构和样式
- 在
info.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/banner.jpg" /></swiper-item><swiper-item><image src="/images/banner.jpg" /></swiper-item><swiper-item><image src="/images/banner.jpg" /></swiper-item></swiper>
</scroll-view>
.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%;
}
- 展示页面
- 在
info.html里实现功能按钮
<!-- 功能按钮 --><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>
/* 功能按钮 */.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><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>
/* 热门音乐 */.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;}
- 展示页面
- 在
index.wxml里编写底部播放器代码<!-- 底部播放器 --> <view class="player"><image class="player-cover" src="/images/cover.jpg" /><view class="player-info"><view class="player-info-title">钢琴协奏曲</view><view class="player-info-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> </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.音乐信息：显示当前播放曲目的标题和艺术家
2.专辑封面：当音乐播放时，专辑封面会顺时针旋转
3.播放进度：显示播放进度，调节音乐进度二、组件介绍
var audioCtx = wx.createInnerAudioContext();| 可选值 | 名称 | 说明 |
| 属性 | src | 音频资源的地址，用于直接播放 |
| startTime | 开始播放的位置（秒），默认为0 | |
| autoplay | 是否自动开始播放，默认为false | |
| loop | 是否循环播放，默认为false | |
| volume | 音量。范围0~1。默认为1 | |
| duration | 音频的长度（秒）。在当前有合法的src时返回（只读） | |
| currentTime | 音频的播放位置（秒）。在当前有合法的src时返回（只读） | |
| paused | 开始播放的位置（秒），默认为0 |
三、实现播放器功能
/*** 页面的初始数据*/data: {item: 0,tab: 0,// 播放列表数据playlist: [{id: 1,title: '玫瑰花的葬礼',singer: '许嵩',src: 'https://www.ytmp3.cn/down/78393.mp3',coverImgUrl: '/images/cover.jpg'}, {id: 2,title: '幻听',singer: '许嵩',src: 'https://www.ytmp3.cn/down/59696.mp3',coverImgUrl: '/images/cover.jpg'}, {id: 3,title: '清明雨上',singer: '许嵩',src: 'https://www.ytmp3.cn/down/36119.mp3',coverImgUrl: '/images/cover.jpg'}, {id: 4,title: '灰色头像',singer: '许嵩',src: 'https://www.ytmp3.cn/down/59697.mp3',coverImgUrl: '/images/cover.jpg'}],state: 'paused',playIndex: 0,play: {currentTime: '00:00',duration: '00:00',percent: 0,title: '',singer: '',coverImgUrl: '/images/cover.jpg',}},
- 在
index.js编辑音乐播放逻辑代码// 实现播放器播放功能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) % 60return (minute < 10 ? '0' + minute : minute) + ':' + (second < 10 ? '0' + second : second)}},// 音乐播放setMusic: function(index) {var music = this.data.playlist[index]this.audioCtx.src = music.srcthis.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><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;
}
- 底部播放器播放功能
- 在indexjs里编写底部播放器暂停/播放按钮控制歌曲以及播放器切换下一曲歌曲功能
// 播放按钮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.playlist.length - 1 ? 0 : this.data.playIndex + 1this.setMusic(index)if (this.data.state === 'running') {this.play()}},
- 测试底部播放功能
四、编写播放器页面
- 在
play.wxml编写播放器页面代码
<!-- 播放器 -->
<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>
- 页面效果
- 在
index.wxss编写播放器样式
/* 播放器 */.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;
}
/* 显示专辑页面样式 */.content-play-cover image {animation: rotateImage 10s linear infinite;width: 400rpx;height: 400rpx;border-radius: 50%;border: 1px solid #333;
}@keyframes rotateImage {from {transform: rotate(0deg);}to {transform: rotate(360deg);}
}/* 播放进度和时间 */.content-play-progress {display: flex;align-items: center;margin: 0 35rpx;font-size: 9pt;text-align: center;
}.content-play-progress > view {flex: 1;
}
- 查看播放器页面
第五章 播放列表
一、实现播放列表功能
- 在
playlist.wxml编写播放列表结构
<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>
- 查看结果页面
- 在
index.wxss编写播放列表样式
/* 播放列表 */.playlist-item {display: flex;align-items: center;border-bottom: 1rpx solid #333;height: 112rpx;
}.playlist-cover {width: 80rpx;height: 80rpx;margin-left: 15rpx;border-radius: 8rpx;border: 1px solid #333;
}.playlist-info {flex: 1;font-size: 10pt;line-height: 38rpx;margin-left: 20rpx;padding-bottom: 8rpx;
}.playlist-info-singer {color: #888;
}.playlist-controls {font-size: 10pt;margin-right: 20rpx;color: #c25b5b;
}
- 查看结果页面
- 在
index.js里实现播放列表的切换功能// 播放列表换曲功能change: function(e) {this.setMusic(e.currentTarget.dataset.index)this.play()}二、测试播放列表切换功能
- 播放列表测试效果图
三、最终结果展示页面
音乐推荐页面
- 播放器页面
- 播放列表页面
微信小程序——【云音乐播放器】相关推荐
- 【微信小程序——云音乐播放器】
文章目录 第一章 开发前的准备 一.项目展示 二.项目分析 三.项目初始化 第二章 标签页切换 一.任务分析 二.常用组件介绍 三.编写页面结构和样式 第三章 音乐推荐 一.任务分析 二.组件介绍 三 ...
- html5音乐播放器设计论文,基于微信小程序的音乐播放器设计和毕业论文
摘 要 随着通信技术的发展和智能设备的普及,移动互联网在近两年发展迅猛,新兴的移动社交软件"微信"逐渐走进了手机用户的生活,深受全国数亿用户的欢迎.随着微信版本的不断更新,微信也 ...
- 微信小程序实现音乐播放器（2）
文章目录 前情提要 BackgroundAudioManager API:wx.setNavigationBarTitle() 搭建静态资源服务器 小程序项目 app.json app.wxss pa ...
- 许嵩音乐智能问答系统微信小程序之音乐播放器
许嵩音乐智能问答系统微信小程序之音乐播放器 - 项目简介 项目简介. 音乐播放器搭建. 获取数据及文本分类. 智能客服聊天界面. 连接前端微信小程序输入和后端python,并返回值 连接知识图谱 你还 ...
- 微信小程序实现音乐播放器（3）（使用全局数据实现数据共享）
文章目录 前情提要 搭建静态资源服务器 小程序项目 app.json app.js app.wxss pages/index/index.json pages/index/index.wxml pag ...
- 微信小程序实现音乐播放器（5）
文章目录 前情提要 pubsubjs实现页面通信 moment.js实现时间格式化 BackgroundAudioManager 小程序项目 app.json app.wxss app.js page ...
- 微信小程序入门-音乐播放器
萌新,随便做做,只是了解一下微信小程序,希望可以给看到的胖友一点参考. 之前在网上看到这个人入门四天做完一个,我五天做完了,比他好看,突然有一点自信 然后发现自己特别不乐意重新看自己的代码,总觉得写的 ...
- 微信小程序017音乐播放器系统 php java
小程序前端框架:uniapp 小程序运行软件:微信开发者 后端技术:java+Ssm(Spring+SpringMVC+MyBatis)+vue.js 后端开发环境:idea/eclipse 数据库: ...
- 基于微信小程序的音乐播放器设计
目 录 1绪论 1 1.1选题背景及意义 1 1.2发展现状 1 1.2.1什么是微信小程序 1 1.2.2小程序市场的现状 4 1.3研究主要内容 4 2系统技术 5 2.1 Java语言 5 2. ...
- 基于微信小程序java音乐播放器毕业设计论文/程序代码
摘 要 5G时代已经慢慢的融入了我们的日常生活,随着国家的通信政策以及各大运营商的宣传的影响,5G手机已经随处可见,面对全球信息.技术空前高速发展,信息高速化发展更是社会进步的一个标志.在全球信息化 ...
最新文章
- CentOS安装SVN服务器并配置HTTPS连接
- 什么是 Webpack？【Webpack Book 翻译】
- [UE4]C++中extern关键字浅谈
- 我与Linux系统的交集
- “约见”面试官系列之常见面试题第五篇说说vuex登录信息（建议收藏）
- LeetCode 934. 最短的桥（2次BFS）
- 亚马逊招聘实习生，ML、CV、机器人和语音处理领域
- Java集合框架知多少——干货！！！
- html小作业--新闻栏目
- jar文件怎么打开 查看jar文件内容操作方法
- 14款免费的GIF制作软件（转载）
- 简易留言薄系统-ASP.NET MVC（Model层）
- 使用elastix搭建IP电话及传真
- 简单之美——系统设计黄金法则
- python--基础知识点--json模块
- table中实现div完全填充td
- 泽塔云在2022年Gartner中国区超融合市场竞争报告中被评为优秀厂商代表
- Ubuntu18.04安装搜狗拼音输入法皮肤透明解决方法
- Windows/Linux获取Mac地址和CPU序列号实现
- 01_Dive_into_python (reading note)