当前位置: 首页 > news >正文

微信小程序实现一个音乐播放器的功能

微信小程序实现一个音乐播放器的功能

    • 要求
    • 代码实现
      • 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.页面包含一个音乐列表&#xff0c;点击列表中的音乐可以播放对应的音乐。 2.播放中的音乐在列表中有标识&#xff0c;并且可以暂停或继续播放。 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)

一.问题引入 目前在写项目的时候&#xff0c;在B端查看文章&#xff0c;A端修改文章。为了增加效率&#xff0c;以及防止堆内存溢出&#xff0c;在B端选择本地缓存文章的方案。但是目前出现了A端对文章修改之后&#xff0c;B端读的还是旧数据&#xff0c;出现了缓存不一致的问…...

【开源CDP】市场增长未来的探索,开源CDP带来的技术崛起与变革

数字化趋势之下&#xff0c;数据成了企业竞争的核心资源&#xff0c;不管是公域还是私域&#xff0c;网络俨然成了品牌打响市场的一线战场&#xff0c;然而&#xff0c;在这场数字战役里&#xff0c;许多企业不得不面临一个共同问题&#xff1a;数据零散、分散、平台众多、无法…...

第11章 GUI Page423~424 步骤六 支持文字,使用菜单,对话框输入文字

运行效果&#xff1a; 点击OK&#xff0c;然后再窗口上按住左键&#xff0c;拖动鼠标 关键代码&#xff1a; 新增头文件和成员&#xff0c;新增私有成员_text 成员初始化 为菜单项MenuItemText添加响应函数 新增创建TextItem()的代码...

【Qt】Qt Creator 警告: Unused parameter ‘xxx‘

1. 问题 Qt开发中&#xff0c;有些函数参数没有使用&#xff0c;会报Unused parameter xxx警告&#xff0c;这个警告不影响代码正常运行。 2. 屏蔽这个警告的方法 2.1 方法1 函数中添加 Q_UNUSED(arg); TestClass::TestClass(QObject *parent) {Q_UNUSED(parent); }2.2 方…...

「Vue3面试系列」Vue3.0性能提升主要是通过哪几方面体现的?

文章目录 一、编译阶段diff算法优化静态提升事件监听缓存SSR优化 二、源码体积三、响应式系统参考文献 一、编译阶段 回顾Vue2&#xff0c;我们知道每个组件实例都对应一个 watcher 实例&#xff0c;它会在组件渲染的过程中把用到的数据property记录为依赖&#xff0c;当依赖发…...

网络结构模式

一、C/S结构 服务器 - 客户机&#xff0c;即 Client - Server &#xff08; C/S &#xff09;结构。 C/S 结构通常采取两层结构。服务器负责数据的 管理&#xff0c;客户机负责完成与用户的交互任务。客户机是因特网上访问别人信息的机器&#xff0c;服务器则是提 供信息供人…...

IIC及OLED实验

I2C (Inter-Integrated Circuit): I2C 是一种用于在芯片之间进行短距离数字通信的串行通信协议。它允许多个设备通过两根导线&#xff08;一根数据线 SDA 和一根时钟线 SCL&#xff09;进行通信。I2C 常常用于嵌入式系统中连接传感器、存储器、显示屏和其他外设。 数据线和时钟…...

day6 力扣公共前缀--go实现---对字符串的一些思考

今日份知识&#xff1a; curl -x 指定方法名 请求的url -d 请求体body里面的内容 //curl命令 curl -x Get 127.0.0.1:8080/add/user -d jinlicurl如果不指定方法&#xff0c;默认使用get方法&#xff0c;在go里面&#xff0c;get方法到底可以不可以把内容数据写在body里面传…...

27.Java程序设计-基于Springboot的在线考试系统小程序设计与实现

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

Redis可视化工具Redis Desktop Manager mac功能特色

Redis Desktop Manager mac是一款非常实用的Redis可视化工具。RDM支持SSL / TLS加密&#xff0c;SSH隧道&#xff0c;基于SSH隧道的TLS&#xff0c;为您提供了一个易于使用的GUI&#xff0c;可以访问您的Redis数据库并执行一些基本操作&#xff1a;将键视为树&#xff0c;CRUD键…...

【C++】揭开运算符重载的神秘面纱

目录 一、引言 优点 二、介绍 1.定义 2.语法 三、示例 1.加法运算符重载 2.一元运算符重载 3.友元函数 4.流插入和流提取 5.自增自减运算符 总结 一、引言 何为运算符重载&#xff1f;运算符重载&#xff0c;是C中的一项强大特性&#xff0c;赋予了程序员在自定义类…...

竞赛保研 基于LSTM的天气预测 - 时间序列预测

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 机器学习大数据分析项目 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f9ff; 更多资料, 项目分享&#xff1a; https://gitee.com/dancheng-senior/po…...

前端常用的开发工具

前端常用的开发工具&#x1f516; 文章目录 前端常用的开发工具&#x1f516;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)的基础上&#xff0c;匹配ArkUI框架&#xff0c;扩展了声明式UI、状态管理等相应的能力&#xff0c;让开发者以更简洁、更自然的方式开发跨端应用。 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 个人不喜欢安装包&#xff0c;所以是下载zip包的方式。这里我下载的node 14解压包版本 下载地址如下&#xff1a;https://nodejs.org/dist/v14.15.1/node-v14.15.1-win-x64.zip 想要其他版本的小伙伴去https://nodejs.org/di…...

12.18构建哈夫曼树(优先队列),图的存储方式,一些细节(auto,pair用法,结构体指针)

为结构体自身时&#xff0c;用.调用成员变量&#xff1b;为结构体指针时&#xff0c;用->调用成员变量 所以存在结构体数组时&#xff0c;调用数组元素里的成员变量&#xff0c;就是要用. 结构体自身只有在new时才会创建出来&#xff0c;而其指针可以随意创建 在用new时&…...

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

连锁超市冷库节能解决方案:如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

uniapp 开发ios, xcode 提交app store connect 和 testflight内测

uniapp 中配置 配置manifest 文档&#xff1a;manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号&#xff1a;4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...

第7篇:中间件全链路监控与 SQL 性能分析实践

7.1 章节导读 在构建数据库中间件的过程中&#xff0c;可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中&#xff0c;必须做到&#xff1a; &#x1f50d; 追踪每一条 SQL 的生命周期&#xff08;从入口到数据库执行&#xff09;&#…...

如何应对敏捷转型中的团队阻力

应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中&#xff0c;明确沟通敏捷转型目的尤为关键&#xff0c;团队成员只有清晰理解转型背后的原因和利益&#xff0c;才能降低对变化的…...

数据库——redis

一、Redis 介绍 1. 概述 Redis&#xff08;Remote Dictionary Server&#xff09;是一个开源的、高性能的内存键值数据库系统&#xff0c;具有以下核心特点&#xff1a; 内存存储架构&#xff1a;数据主要存储在内存中&#xff0c;提供微秒级的读写响应 多数据结构支持&…...

webpack面试题

面试题&#xff1a;webpack介绍和简单使用 一、webpack&#xff08;模块化打包工具&#xff09;1. webpack是把项目当作一个整体&#xff0c;通过给定的一个主文件&#xff0c;webpack将从这个主文件开始找到你项目当中的所有依赖文件&#xff0c;使用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…...