微信小程序实现一个音乐播放器的功能
微信小程序实现一个音乐播放器的功能
- 要求
- 代码实现
- wxml 文件
- wxss 文件
- js文件
- 解析
要求
1.页面包含一个音乐列表,点击列表中的音乐可以播放对应的音乐。
2.播放中的音乐在列表中有标识,并且可以暂停或继续播放。
3.显示当前音乐的播放进度和总时长,并可以拖动进度条调整播放进度。
4.点击切换按钮可以切换到下一首音乐。
5.点击循环按钮可以切换音乐的播放模式(单曲循环、列表循环、随机播放)。
代码实现
wxml 文件
<view class="container"><scroll-view scroll-y class="music-list"><view wx:for="{{ musicList }}" wx:key="{{ index }}" class="music-item" bindtap="onMusicTap" data-index="{{ index }}"><view class="music-name">{{ item.name }}</view><view class="music-artist">{{ item.artist }}</view></view></scroll-view><audio id="audio" src="{{ currentMusic.src }}" bindtimeupdate="onTimeUpdate" bindended="onEnded"></audio><view class="player"><view class="controls"><button class="control-btn" bindtap="onPrev">上一首</button><button class="control-btn" bindtap="onPlayOrPause">{{ playing ? '暂停' : '播放' }}</button><button class="control-btn" bindtap="onNext">下一首</button><button class="control-btn" bindtap="onChangeMode">模式</button></view><view class="progress"><text>{{ currentTime }}</text><slider max="{{ duration }}" value="{{ currentPosition }}" bindchange="onSliderChange" /><text>{{ durationStr }}</text></view></view>
</view>
wxss 文件
.container {padding: 20rpx;
}.music-list {height: 300rpx;
}.music-item {padding: 10rpx;border-bottom: 1rpx solid #eee;text-align: left;
}.player {margin-top: 20rpx;display: flex;flex-direction: column;align-items: center;
}.controls {display: flex;justify-content: space-around;width: 100%;margin-bottom: 10rpx;
}.control-btn {background-color: #009688;color: #fff;padding: 10rpx 20rpx;border-radius: 4rpx;
}progress {display: flex;align-items: center;
}.slider {flex: 1;margin: 0 10rpx;
}
js文件
Page({data: {musicList: [{ name: '歌曲1', artist: '歌手1', src: 'music1.mp3' },{ name: '歌曲2', artist: '歌手2', src: 'music2.mp3' },// 更多音乐...],currentMusic: {},playing: false,duration: 0,currentPosition: 0,currentTime: '00:00',durationStr: '00:00',playMode: 0, // 0: 列表循环,1: 单曲循环,2: 随机播放},onMusicTap(e) {const index = e.currentTarget.dataset.index;const music = this.data.musicList[index];this.setData({currentMusic: music,playing: true,});this.playMusic();},onPlayOrPause() {if (this.data.playing) {this.pauseMusic();} else {this.playMusic();}},playMusic() {const audio = this.selectComponent('#audio');audio.play();this.setData({playing: true,});},pauseMusic() {const audio = this.selectComponent('#audio');audio.pause();this.setData({playing: false,});},onPrev() {let currentIndex = this.data.musicList.findIndex(item => item.src === this.data.currentMusic.src);if (currentIndex === 0) {currentIndex = this.data.musicList.length - 1;} else {currentIndex--;}const music = this.data.musicList[currentIndex];this.setData({currentMusic: music,playing: true,});this.playMusic();},onNext() {let currentIndex = this.data.musicList.findIndex(item => item.src === this.data.currentMusic.src);if (currentIndex === this.data.musicList.length - 1) {currentIndex = 0;} else {currentIndex++;}const music = this.data.musicList[currentIndex];this.setData({currentMusic: music,playing: true,});this.playMusic();},onTimeUpdate(e) {const duration = e.detail.duration;const currentPosition = e.detail.currentTime;const currentTime = this.formatTime(currentPosition);const durationStr = this.formatTime(duration);this.setData({duration: duration,currentPosition: currentPosition,currentTime: currentTime,durationStr: durationStr,});},onEnded() {if (this.data.playMode === 1) {// 单曲循环const audio = this.selectComponent('#audio');audio.seek(0);audio.play();} else {this.onNext();}},onSliderChange(e) {const value = e.detail.value;const audio = this.selectComponent('#audio');audio.seek(value);},onChangeMode() {let playMode = this.data.playMode;playMode = (playMode + 1) % 3;this.setData({playMode: playMode,});},formatTime(time) {const minutes = Math.floor(time / 60);const seconds = Math.floor(time % 60);const minuteStr = minutes < 10 ? '0' + minutes : '' + minutes;const secondStr = seconds < 10 ? '0' + seconds : '' + seconds;return minuteStr + ':' + secondStr;},
});
解析
其中,onPrev() 和 onNext() 函数实现了切换到上一首和下一首音乐的逻辑。通过 findIndex()
函数找到当前音乐在列表中的位置,然后根据播放模式计算出下一首或上一首音乐的位置,更新当前音乐并播放。onTimeUpdate() 函数实现了更新播放进度的逻辑,通过 detail 参数获取音频的总时长和当前播放进度,并格式化成 00:00
的形式,更新页面数据。onEnded() 函数实现了音乐播放结束的逻辑,根据当前的播放模式决定是单曲循环还是切换到下一首音乐。
onSliderChange() 函数实现了调整播放进度的逻辑,通过 seek() 函数跳转到指定的时间点。
onChangeMode() 函数实现了切换播放模式的逻辑,通过取余操作循环切换三种播放模式。
到这里也就结束了,希望对您有所帮助。
相关文章:
微信小程序实现一个音乐播放器的功能
微信小程序实现一个音乐播放器的功能 要求代码实现wxml 文件wxss 文件js文件 解析 要求 1.页面包含一个音乐列表,点击列表中的音乐可以播放对应的音乐。 2.播放中的音乐在列表中有标识,并且可以暂停或继续播放。 3.显示当前音乐的播放进度和总时长&#…...

算法基础之表达整数的奇怪方式
表达整数的奇怪方式 中国剩余定理: 求M 所有m之积 然后Mi M / mi x 如下图 满足要求 扩展中国剩余定理 找到x **使得x mod mi ai**成立 对于每两个式子 都可以推出①式 即 用扩展欧几里得算法 可以算出k1,-k2和m2–m1 判无解 : 若**(m2–m1) % d ! 0** 说明该等式无解 …...

WEB 3D技术 three.js 设置图像随窗口大小变化而变化
本文 我们来讲讲我们图层适应窗口变化的效果 可能这样说有点笼统 那么 自适应应该大家更熟悉 就是 当我们窗口发生变化说 做一些界面调整比例 例如 我们这样一个i项目界面 我们打开 F12 明显有一部分被挡住了 那么 我们可以刷新 这样是正常了 但是 我们将F12关掉 给F12的…...

实战案例:缓存不一致问题的解决(redis+本地缓存caffine)
一.问题引入 目前在写项目的时候,在B端查看文章,A端修改文章。为了增加效率,以及防止堆内存溢出,在B端选择本地缓存文章的方案。但是目前出现了A端对文章修改之后,B端读的还是旧数据,出现了缓存不一致的问…...
【开源CDP】市场增长未来的探索,开源CDP带来的技术崛起与变革
数字化趋势之下,数据成了企业竞争的核心资源,不管是公域还是私域,网络俨然成了品牌打响市场的一线战场,然而,在这场数字战役里,许多企业不得不面临一个共同问题:数据零散、分散、平台众多、无法…...

第11章 GUI Page423~424 步骤六 支持文字,使用菜单,对话框输入文字
运行效果: 点击OK,然后再窗口上按住左键,拖动鼠标 关键代码: 新增头文件和成员,新增私有成员_text 成员初始化 为菜单项MenuItemText添加响应函数 新增创建TextItem()的代码...
【Qt】Qt Creator 警告: Unused parameter ‘xxx‘
1. 问题 Qt开发中,有些函数参数没有使用,会报Unused parameter xxx警告,这个警告不影响代码正常运行。 2. 屏蔽这个警告的方法 2.1 方法1 函数中添加 Q_UNUSED(arg); TestClass::TestClass(QObject *parent) {Q_UNUSED(parent); }2.2 方…...

「Vue3面试系列」Vue3.0性能提升主要是通过哪几方面体现的?
文章目录 一、编译阶段diff算法优化静态提升事件监听缓存SSR优化 二、源码体积三、响应式系统参考文献 一、编译阶段 回顾Vue2,我们知道每个组件实例都对应一个 watcher 实例,它会在组件渲染的过程中把用到的数据property记录为依赖,当依赖发…...
网络结构模式
一、C/S结构 服务器 - 客户机,即 Client - Server ( C/S )结构。 C/S 结构通常采取两层结构。服务器负责数据的 管理,客户机负责完成与用户的交互任务。客户机是因特网上访问别人信息的机器,服务器则是提 供信息供人…...
IIC及OLED实验
I2C (Inter-Integrated Circuit): I2C 是一种用于在芯片之间进行短距离数字通信的串行通信协议。它允许多个设备通过两根导线(一根数据线 SDA 和一根时钟线 SCL)进行通信。I2C 常常用于嵌入式系统中连接传感器、存储器、显示屏和其他外设。 数据线和时钟…...
day6 力扣公共前缀--go实现---对字符串的一些思考
今日份知识: curl -x 指定方法名 请求的url -d 请求体body里面的内容 //curl命令 curl -x Get 127.0.0.1:8080/add/user -d jinlicurl如果不指定方法,默认使用get方法,在go里面,get方法到底可以不可以把内容数据写在body里面传…...

27.Java程序设计-基于Springboot的在线考试系统小程序设计与实现
1. 引言 随着数字化教育的发展,在线考试系统成为教育领域的一项重要工具。本论文旨在介绍一个基于Spring Boot框架的在线考试系统小程序的设计与实现。在线考试系统的开发旨在提高考试的效率,简化管理流程,并提供更好的用户体验。 2. 系统设…...

Redis可视化工具Redis Desktop Manager mac功能特色
Redis Desktop Manager mac是一款非常实用的Redis可视化工具。RDM支持SSL / TLS加密,SSH隧道,基于SSH隧道的TLS,为您提供了一个易于使用的GUI,可以访问您的Redis数据库并执行一些基本操作:将键视为树,CRUD键…...
【C++】揭开运算符重载的神秘面纱
目录 一、引言 优点 二、介绍 1.定义 2.语法 三、示例 1.加法运算符重载 2.一元运算符重载 3.友元函数 4.流插入和流提取 5.自增自减运算符 总结 一、引言 何为运算符重载?运算符重载,是C中的一项强大特性,赋予了程序员在自定义类…...

竞赛保研 基于LSTM的天气预测 - 时间序列预测
0 前言 🔥 优质竞赛项目系列,今天要分享的是 机器学习大数据分析项目 该项目较为新颖,适合作为竞赛课题方向,学长非常推荐! 🧿 更多资料, 项目分享: https://gitee.com/dancheng-senior/po…...

前端常用的开发工具
前端常用的开发工具🔖 文章目录 前端常用的开发工具🔖1. Snipaste--截图工具2. ScreenToGif--gif图片录制3. Typora--Markdown编辑器4. notepad--文本代码编辑器5. uTools--多功能工具6. EV录屏--录屏软件7. Xmind--思维导图8. Apifox -- 接口调试9. Tor…...

鸿蒙开发语言介绍--ArkTS
1.编程语言介绍 ArkTS是HarmonyOS主力应用开发语言。它在TypeScript (简称TS)的基础上,匹配ArkUI框架,扩展了声明式UI、状态管理等相应的能力,让开发者以更简洁、更自然的方式开发跨端应用。 2.TypeScript简介 自行补充TypeScript知识吧。h…...

关于“Python”的核心知识点整理大全36
目录 13.4.4 向下移动外星人群并改变移动方向 game_functions.py alien_invasion.py 13.5 射杀外星人 13.5.1 检测子弹与外星人的碰撞 game_functions.py alien_invasion.py 13.5.2 为测试创建大子弹 13.5.3 生成新的外星人群 game_functions.py alien_invasion.py …...

安装nodejs,配置环境变量并将npm设置淘宝镜像源
安装nodejs并将npm设置淘宝镜像源 1. 下载nodejs 个人不喜欢安装包,所以是下载zip包的方式。这里我下载的node 14解压包版本 下载地址如下:https://nodejs.org/dist/v14.15.1/node-v14.15.1-win-x64.zip 想要其他版本的小伙伴去https://nodejs.org/di…...

12.18构建哈夫曼树(优先队列),图的存储方式,一些细节(auto,pair用法,结构体指针)
为结构体自身时,用.调用成员变量;为结构体指针时,用->调用成员变量 所以存在结构体数组时,调用数组元素里的成员变量,就是要用. 结构体自身只有在new时才会创建出来,而其指针可以随意创建 在用new时&…...
vscode里如何用git
打开vs终端执行如下: 1 初始化 Git 仓库(如果尚未初始化) git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...
连锁超市冷库节能解决方案:如何实现超市降本增效
在连锁超市冷库运营中,高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术,实现年省电费15%-60%,且不改动原有装备、安装快捷、…...
Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务
通过akshare库,获取股票数据,并生成TabPFN这个模型 可以识别、处理的格式,写一个完整的预处理示例,并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务,进行预测并输…...
Typeerror: cannot read properties of undefined (reading ‘XXX‘)
最近需要在离线机器上运行软件,所以得把软件用docker打包起来,大部分功能都没问题,出了一个奇怪的事情。同样的代码,在本机上用vscode可以运行起来,但是打包之后在docker里出现了问题。使用的是dialog组件,…...

uniapp 开发ios, xcode 提交app store connect 和 testflight内测
uniapp 中配置 配置manifest 文档:manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号:4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...
第7篇:中间件全链路监控与 SQL 性能分析实践
7.1 章节导读 在构建数据库中间件的过程中,可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中,必须做到: 🔍 追踪每一条 SQL 的生命周期(从入口到数据库执行)&#…...

如何应对敏捷转型中的团队阻力
应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中,明确沟通敏捷转型目的尤为关键,团队成员只有清晰理解转型背后的原因和利益,才能降低对变化的…...
数据库——redis
一、Redis 介绍 1. 概述 Redis(Remote Dictionary Server)是一个开源的、高性能的内存键值数据库系统,具有以下核心特点: 内存存储架构:数据主要存储在内存中,提供微秒级的读写响应 多数据结构支持&…...
webpack面试题
面试题:webpack介绍和简单使用 一、webpack(模块化打包工具)1. webpack是把项目当作一个整体,通过给定的一个主文件,webpack将从这个主文件开始找到你项目当中的所有依赖文件,使用loaders来处理它们&#x…...

Mac flutter环境搭建
一、下载flutter sdk 制作 Android 应用 | Flutter 中文文档 - Flutter 中文开发者网站 - Flutter 1、查看mac电脑处理器选择sdk 2、解压 unzip ~/Downloads/flutter_macos_arm64_3.32.2-stable.zip \ -d ~/development/ 3、添加环境变量 命令行打开配置环境变量文件 ope…...