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

一、界面设计

  1. 播放页面:

    • 显示当前播放歌曲的封面图片、歌曲名称、歌手名称。
    • 有播放 / 暂停按钮、上一首、下一首按钮。
    • 进度条显示播放进度,可以拖动进度条调整播放位置。
    • 音量调节滑块。
  2. 歌曲列表页面:

    • 展示歌曲列表,包括歌曲名称、歌手名称和封面图片(可选)。
    • 点击歌曲可以切换播放。

二、功能实现

  1. 数据存储与获取:

    • 可以将歌曲信息存储在小程序的本地缓存或使用云开发数据库存储歌曲列表。
    • 通过网络请求获取歌曲资源的 URL。
  2. 播放控制:

    • 使用小程序的音频 API 进行播放控制。
    • 实现播放、暂停、上一首、下一首等功能。
    • 监听音频播放进度,更新进度条。
  3. 进度条控制:

    • 允许用户拖动进度条来调整播放位置。
    • 根据用户操作更新音频的播放位置。
  4. 音量调节:

    • 通过滑块控制音频的音量大小。
  5. 歌曲列表切换:

    • 在歌曲列表页面点击歌曲时,切换当前播放歌曲。
    • 更新播放页面的歌曲信息。

目的

  1. 掌握swiper组件、scroll-view组件的使用
  2. 掌握image组件的使用
  3. 掌握音频API的使用
  4. 掌握slider组件的使用

内容

 了音乐小程序项目的完整开发流程,其开发步骤包括页面结构的分析、样式的设计、组件的运用等。通过本章的学习,读者能够掌握小程序的基本交互逻辑的开发,能够运用API来实现项目中的特定功能,学会解决开发过程中常见的问题。

代码架构

index.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><!-- 内容滚动区域 --><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/xingong.jpg" /></swiper-item><swiper-item><image src="/images/banner.jpg" /></swiper-item><swiper-item><image src="/images/banner.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/图片27.jpg" /><view>紫罗兰</view></view><view class="list-item"><image src="/images/图片28.jpg" /><view>五月之歌</view></view><view class="list-item"><image src="/images/图片29.jpg" /><view>菩提树</view></view><view class="list-item"><image src="/images/图片31.jpg" /><view>欢乐颂</view></view><view class="list-item"><image src="/images/图片33.jpg" /><view>安魂曲</view></view><view class="list-item"><image src="/images/图片36.jpg" /><view>摇篮曲</view></view></view></view></scroll-view></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}}" /><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="changeItem" data-item="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>

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

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>

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.js

// pages/index/index.js
Page({/*** 页面的初始数据*/data: {item: 0,tab: 0,// 播放列表数据playlist: [{id: 1,title: '钢琴协奏曲',singer: '肖邦',src: 'http://localhost:3000/1.mp3',coverImgUrl: '/images/cover.jpg'}, {id: 2,title: '奏鸣曲',singer: '莫扎特',src: 'http://localhost:3000/2.mp3',coverImgUrl: '/images/cover.jpg'}, {id: 3,title: '欢乐颂',singer: '贝多芬',src: 'http://localhost:3000/1.mp3',coverImgUrl: '/images/cover.jpg'}, {id: 4,title: '爱之梦',singer: '李斯特',src: 'http://localhost:3000/2.mp3',coverImgUrl: '/images/cover.jpg'}],state: 'paused',playIndex: 0,play: {currentTime: '00:00',duration: '00:00',percent: 0,title: '',singer: '',coverImgUrl: '/images/图片47.jpg',}},// 页面切换changeItem: function(e) {this.setData({item: e.target.dataset.item,})},// tab切换changeTab: function(e) {this.setData({tab: 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() {})// onWaiting触发的暂停var waitFlag = false// 音频由于网络等原因等待中的回调this.audioCtx.onWaiting(function() {waitFlag = true})// 音频准备就绪的回调this.audioCtx.onCanplay(function() {if (waitFlag) {that.audioCtx.pause()that.audioCtx.play()waitFlag = false}})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})},// 播放按钮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()}},// 滚动条调节歌曲进度sliderChange: function(e) {var second = e.detail.value * this.audioCtx.duration / 100this.audioCtx.seek(second)},// 播放列表换曲功能change: function(e) {this.setMusic(e.currentTarget.dataset.index)this.play()}
})

index.json

{"navigationBarBackgroundColor": "#fff","navigationBarTitleText": "音乐","navigationBarTextStyle": "black"
}

index.wxss

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;
}.content {flex: 1;
}.content > swiper {height: 100%;
}.player {background: #222;border-top: 1px solid #252525;height: 112rpx;
}.tab-item.active {color: #c25b5b;border-bottom-color: #c25b5b;
}.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;
}/* 播放器 */.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;
}/* 底部播放器 */.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;
}/* 显示专辑页面样式 */.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-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;
}

app.json

{"pages": ["pages/index/index","pages/test/index","pages/test/swiper","pages/test/test"],"sitemapLocation": "sitemap.json"
}

配置文件

project.config.json

{"description": "项目配置文件","packOptions": {"ignore": [],"include": []},"setting": {"urlCheck": true,"es6": true,"enhance": true,"postcss": true,"preloadBackgroundData": false,"minified": true,"newFeature": true,"coverView": true,"nodeModules": false,"autoAudits": false,"showShadowRootInWxmlPanel": true,"scopeDataCheck": false,"uglifyFileName": false,"checkInvalidKey": true,"checkSiteMap": true,"uploadWithSourceMap": true,"compileHotReLoad": false,"lazyloadPlaceholderEnable": false,"useMultiFrameRuntime": true,"useApiHook": true,"useApiHostProcess": true,"babelSetting": {"ignore": [],"disablePlugins": [],"outputPath": ""},"useIsolateContext": true,"userConfirmedBundleSwitch": false,"packNpmManually": false,"packNpmRelationList": [],"minifyWXSS": true,"disableUseStrict": false,"minifyWXML": true,"showES6CompileOption": false,"useCompilerPlugins": false,"ignoreUploadUnusedFiles": true},"compileType": "miniprogram","libVersion": "2.23.1","appid": "wx0298165ccea56bb4","projectname": "music","condition": {},"editorSetting": {"tabIndent": "insertSpaces","tabSize": 2}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/442373.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++——STL简介

目录 一、什么是STL 二、STL的版本 三、STL的六大组件 没用的话..... 不知不觉两个月没写博客了&#xff0c;暑假后期因为学校的事情在忙&#xff0c;开学又在准备学校的java免修&#xff0c;再然后才继续开始学C&#xff0c;然后最近打算继续写博客沉淀一下最近学到的几周…

构建高效团队,内部CRM系统的益处详解

内部CRM系统的最大优势之一是它能够集中并系统化客户信息&#xff0c;包括联系方式、购买历史、偏好设置、服务记录等。这种集中式的数据管理使企业能够快速响应客户需求&#xff0c;预测客户行为&#xff0c;提供个性化的服务或产品。更重要的是&#xff0c;它有助于建立一个统…

【PyTorch】图像分割

图像分割是什么 Image Segmentation 将图像每一个像素分类 图像分割分类 超像素分割&#xff1a;少量超像素代替大量像素&#xff0c;常用于图像预处理语义分割&#xff1a;逐像素分类&#xff0c;无法区分个体实例分割&#xff1a;对个体目标进行分割全景分割&#xff1a;…

信息学奥赛使用的编程IDE:Dev-C++ 安装指南

信息学奥赛&#xff08;NOI&#xff09;作为全国性的编程竞赛&#xff0c;要求参赛学生具备扎实的编程能力&#xff0c;而熟练使用适合的编程工具则是学习与竞赛的基础。在众多编程环境中&#xff0c;Dev-C IDE 因其简洁、轻量、支持C编程等特点&#xff0c;成为许多参赛者的常…

Pikachu-SSRF(curl / file_get_content)

SSRF SSRF是Server-side Request Forge的缩写&#xff0c;中文翻译为服务端请求伪造。产生的原因是由于服务端提供了从其他服务器应用获取数据的功能且没有对地址和协议等做过滤和限制。常见的一个场景就是&#xff0c;通过用户输入的URL来获取图片。这个功能如果被恶意使用&am…

AI先驱荣获2024诺贝尔物理学奖

瑞典皇家科学院10月8日宣布&#xff0c;将2024年诺贝尔物理学奖授予John J. Hopfield和Geoffrey E. Hinton&#xff0c;以表彰他们利用人工神经网络实现机器学习的奠基性发现和发明。 John J. Hopfield&#xff08;约翰J霍普菲尔德&#xff09;美国新泽西州普林斯顿大学 Geoff…

1500元买哪款显卡好?对比一下,差别明显

在游戏过程中&#xff0c;显卡负责渲染游戏画面&#xff0c;将其转化为可视化的图像&#xff0c;并快速显示在屏幕上&#xff0c;确保游戏运行的流畅性和画面的质量。所以对于游戏电脑来说&#xff0c;显卡的重要性尤为突出。虽说在最近几年&#xff0c;显卡市场的“消费升级”…

ssm淘乐乐员工购物商城

系统包含&#xff1a;源码论文 所用技术&#xff1a;SpringBootVueSSMMybatisMysql 免费提供给大家参考或者学习&#xff0c;获取源码请私聊我 需要定制请私聊 目 录 目 录 III 第1章 绪论 1 1.1 课题背景 1 1.2 课题意义 1 1.3 研究内容 2 第2章 开发环境与技术 3 …

时序论文17|ICML24 SAMformer:华为新奇视角讨论Transformer时序预测时的收敛优化问题

论文标题&#xff1a;SAMformer: Unlocking the Potential of Transformers in Time Series Forecasting with Sharpness-Aware Minimization and Channel-Wise Attention 论文链接&#xff1a;https://arxiv.org/abs/2402.10198 代码链接&#xff1a;https://github.com/rom…

计算机网络——http和web

无状态服务器——不维护客户端 怎么变成有状态连接 所以此时本地建立代理—— 若本地缓存了——但是服务器变了——怎么办&#xff1f;

今日指数项目day8实战补充 - 角色处理器功能实现(上)

角色处理器 2.1 分页查询当前角色信息 1&#xff09;原型效果 2&#xff09;接口说明 功能描述&#xff1a; 分页查询当前角色信息 服务路径&#xff1a; /api/roles 服务方法&#xff1a;Post请求参数格式&#xff1a; {"pageNum":1,"pageSize":10 }响…

Vue 项目文件大小优化

优化逻辑 任何优化需求&#xff0c;都有一个前提&#xff0c;即可衡量。 那 Vue 加载速度的优化需求&#xff0c;本质上是要降低加载静态资源的大小。 所以&#xff0c;优化前&#xff0c;需要有一个了解项目现状的资源加载大小情况。 主要分 3 步走&#xff1a; 找到方法测…

Ubuntu24.04远程开机

近来在几台机器上鼓捣linux桌面&#xff0c;顺便研究一下远程唤醒主机。 本篇介绍Ubuntu系统的远程唤醒&#xff0c;Windows系统的唤醒可搜索相关资料。 依赖 有远程唤醒功能的路由器&#xff08;当前一般都带这个功能&#xff09;有线连接主机&#xff08;无线连接有兴趣朋友…

jmeter学习(4)提取器

同线程组https://blog.csdn.net/vikeyyyy/article/details/80437530 不同线程组 在JMeter中&#xff0c;正则表达式提取的参数可以跨线程组使用。 通过使用Beanshell后置处理器和属性设置函数&#xff0c;可以将提取的参数设置为全局变量&#xff0c;从而在多个线程组之间共享…

电子摄像头分割系统源码&数据集分享

电子摄像头分割系统源码&#xff06;数据集分享 [yolov8-seg-C2f-DWR&#xff06;yolov8-seg-C2f-ContextGuided等50全套改进创新点发刊_一键训练教程_Web前端展示] 1.研究背景与意义 项目参考ILSVRC ImageNet Large Scale Visual Recognition Challenge 项目来源AAAI Glob…

大多数人不知道的:线程池CallerRunsPolicy()拒绝策略

总所周知&#xff0c;java里面线程池的四个拒绝策略 AbortPolicy 丢弃并抛出RejectedExecutionException异常 DiscardPolicy 直接丢弃 DiscardOldestPolicy 直接丢弃最前面的任务&#xff0c;尝试执行新任务 CallerRunsPolicy 由调用线程池的线程处理任务&a…

Ascend C 自定义算子开发:高效的算子实现

Ascend C 自定义算子开发&#xff1a;高效的算子实现 在 Ascend C 平台上&#xff0c;开发自定义算子能够充分发挥硬件的性能优势&#xff0c;帮助开发者针对不同的应用场景进行优化。本文将以 AddCustom 算子为例&#xff0c;介绍 Ascend C 中自定义算子的开发流程及关键技术…

乌班图基础设施安装之Mysql8.0+Redis6.X安装

简介&#xff1a;云服务器基础设施安装之 Mysql8.0Redis6.X 安装 Docker安装 # 按照依赖 yum install -y yum-utils device-mapper-persistent data lvm2 Docker Mirror 从去年开始. hub.docker.com[1] 在国内的访问速度极慢. 当时大家主要还是依赖国内的一些镜像源: 如中科…

CSS圆角

在制作网页的过程中&#xff0c;有时我们可能需要实现圆角的效果&#xff0c;以前的做法是通过切图&#xff08;将设计稿切成便于制作成页面的图片&#xff09;&#xff0c;使用多个背景图像来实现圆角。在 CSS3 出现之后就不需要这么麻烦了&#xff0c;CSS3 中提供了一系列属性…

Python 卸载所有的包

Python 卸载所有的包 引言正文 引言 可能很少有小伙伴会遇到这个问题&#xff0c;当我们错误安装了一些包后&#xff0c;由于包之间有相互关联&#xff0c;导致一些已经安装的包无法使用&#xff0c;而由于我们已经安装了很多包&#xff0c;它们的名字我们并不完全知道&#x…