微信小程序 音乐播放控件，监听播放事件， 音乐播放的基本实现

最新推荐文章于 2026-05-29 11:57:53 发布
原创 最新推荐文章于 2026-05-29 11:57:53 发布 · 1.3w 阅读 · 43 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
微信小程序

当前文章被收录于：

微信小程序
29 篇文章 3 人学习
订阅专栏 查看详情
微信小程序

当前文章被收录于：

微信小程序
29 篇文章 7 人学习

微信小程序技术分享，和大家聊聊互联网最前沿的技术~

订阅专栏 查看详情
本文将介绍如何使用微信小程序的音乐控件制作音乐播放器，包括音乐播放、暂停及停止的区别，解决播放器播放后闪退的问题，以及如何监听播放事件来完善音乐播放体验。文章最后提供完整的源码包下载。

下面我将会为大家初步讲解利用微信小程序的音乐控件制作音乐播放器，以及会遇到的一些问题，最后会附上源码包喔！

在这里插入图片描述

图片以及音乐都必须使用网络链接体

在这里插入图片描述

播放器 播放之后闪退，是因为音乐的链接失效了所以 闪退

监听播放事件 完善音乐播放
在这里插入图片描述

音乐

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

否则页面的isplaymusic就不需要进行任何操作 自动设置为false

在这里插入图片描述

在这里插入图片描述

音乐pause 和stop的区别 ，前者是暂停，后者是停止

以下是微信小程序项目源码：点击可以进入gitee直接下载源码包喔
微信小程序演示程序

版权所有，禁止转载，违者必究。
喜欢的朋友可以点赞评论喔，您的支持是我更新最大的动力~

标签
#微信小程序 #音乐播放控件 #监听播放事件 #音乐播放的基本实现
微信小程序 初学——【音乐播放器】
qq_56238454的博客
12-12 1万+
本人在学习微信小程序【音乐播放器】时的简单介绍
ios端微信小程序背景音频调用stop或自然播放结束后无法重新播放bug
飞鱼日记的博客
08-24 2207
问题：微信小程序背景音频BackgroundAudioManager调用stop或自然播放结束后重新播放无效。 原因：经测试发现：在iOS和微信调试工具调用stop或自然播放结束后，音频地址被清空了，而在安卓音频地址不为空。 解决方案：设置一个变量resetBgAudio判断是否重置音频，在onStop和onEnded监听事件中标记resetBgAudio为true，在onPlay监听事件中标记resetBgAudio为false，点击播放按钮时，判断resetBgAudio为true的话重置音频。 解.
从A2L到Hex：深入解读Vector CANape离线标定背后的Flash编程与XCP通信机制
最新发布
weixin_30599769的博客
05-29 671
本文深入解析Vector CANape离线标定技术中的Flash编程与XCP通信机制，涵盖A2L文件内存映射、XCP协议指令流及Flash驱动在PSRAM中的运行原理。通过Autosar内存分区与Infineon Tricore芯片特性的交叉分析，揭示标定数据对齐、Fast/Burst写入差异等关键技术细节，助力开发者构建完整的汽车电子标定知识体系。
微信小程序实现一个音乐播放器的功能
weixin_71893790的博客
12-21 5952
微信小程序实现一个音乐播放器的功能
微信小程序中实现——【音乐播放器】
热门推荐
py20010218的博客
12-10 3万+
微信小程序实现音乐播放器
基于微信小程序的音乐播放器的设计与实现
07-10 1116
根据用户听歌和使用系统的习惯，本系统的流程设计为，用户先进行注册，然后登录到本系统，在系统的前台可以看到歌曲信息，歌曲可以按照分类、歌曲推荐等进行排名；管理员的流程为先在登录界面进行登录，然后进行歌曲信息、用户信息、会员办理、会员优惠等的管理。科技的发展赋予了听音乐新的途径，微信小程序名词的出现改变了用户生活的习惯，同时也为管理者打开了新的市场。微信小程序也可以理解为利用小程序来解决需求，这种方式可以打破时间和地点的限制，可以为用户提供随时听歌的平台，用户可以在平台上随时找喜欢的歌曲进行播放。
微信小程序音乐播放与控制功能开发指南
weixin_42601608的博客
06-05 1430
微信小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的概念，用户扫一扫或搜一下即可打开应用。同时，它实现了应用“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。微信小程序的开发语言主要是JavaScript，结合了WXML（WeiXin Markup Language，微信标记语言），WXSS（WeiXin Style Sheets，微信样式表）和JSON配置文件，开发门槛较低，适合前端开发人员快速上手。
uniapp音乐播放整理
懒羊羊我小弟的博客
05-11 6554
本文介绍了使用uniapp实现音乐播放的基本功能、播放暂停，进度条拖拽跳转等功能；可以适用于微信小程序、h5或是app都可以；
微信小程序全局音频播放，实现分析
learn8more的博客
11-22 2862
1. 需求分析 育儿柚道小程序中有针对育儿教育提供的音频课程，主要包含读书、读文的音频内容。 1.1 功能需求 课程音频：包含课程音频的地方有三处 课程卡片，包含在 scrollview 中的试听内容； 音乐卡片 课程详情页的课程章节列表； 课程详情页 底部与导航 tab 结合的播放控件 Player bar 音频管理： 1）...
微信小程序：音乐播放器带进度条
科小洋的博客
03-06 2406
代码 JS var app = getApp() const innerAudioContext = wx.createInnerAudioContext(); const bgMusic = wx.getBackgroundAudioManager() Page({ /** * 页面的初始数据 */ data: { list: [], id: '', ...
微信小程序音乐播放界面设计与实践
weixin_42153793的博客
05-21 1267
audio>组件是微信小程序提供的用于音频播放的基础组件之一。它的主要作用是将音频内容嵌入到小程序页面中，并提供播放、暂停、停止等基本控制功能。开发者无需编写复杂的播放逻辑，只需通过简单的标签属性即可控制音频的播放。该组件的特点包括：简便性：使用HTML5标准的标签，操作简单。控制功能：支持基本的播放控制，如播放、暂停、停止、加载、预加载等。交互事件：提供多种事件监听，如播放完成、加载状态变化等。跨平台：在不同设备和操作系统上均保持了良好的兼容性。
微信小程序入门与实战之音乐播放
Lbsssss的博客
10-09 1855
我们首先要让该音乐图标脱离文档流，设置 position: absolute，再通过 left: 50%;设置居中，但此时我们的居中是对图标的左侧而言，所以我们还需要减去图标一般的宽度。
微信小程序音乐播放器实战开发源码（2018年版）
weixin_31688273的博客
06-06 936
微信小程序的生命周期可被分为三个主要阶段：初始化阶段、运行阶段和销毁阶段。每个阶段都有对应的生命周期函数，这些函数为开发者提供了操作的应用程序状态变化的机会。在本章中，我们探讨了微信小程序的生命周期函数，包括它们的用途、触发时机和最佳实践。生命周期方法是小程序框架的核心组成部分，理解和正确使用它们是构建高效、稳定小程序应用程序的关键。通过实际案例的演示，我们学习了如何在音乐播放器中应用生命周期方法来管理应用状态和资源。生命周期方法的应用不仅限于音乐播放器，它们适用于任何微信小程序项目。
微信小程序多媒体
qq_42863620的博客
07-15 664
audio组件可以在微信小程序中播放音乐idaudio组件在页面的唯一标识符,如果js代码需要控制audio组件中音乐的播放，则需要设置这个属性src:要播放音频的资源地址loop设置是否循环播放controls设置是否显示默认控件,默认为trueposter设置默认空间上的音频封面的图片资源地址,如果controls属性值为false,则设置poster无效name默...
微信小程序音乐播放器毕设：从零实现音频播放与状态管理的完整方案
2600_94960146的博客
03-24 377
按照上面的步骤，你应该能搭建出一个核心功能稳定、状态同步良好的音乐播放器了。这个架构清晰地将播放逻辑（player.js）、状态存储（globalData）和 UI 展示（各个 Page）分离，符合工程化的思想，写在毕设报告里也是加分项。歌单与列表管理：在全局状态里增加一个playlist数组和playMode（顺序、随机、单曲循环）。在player.js的onEnded回调中，根据播放模式自动计算并播放下一首。歌词同步（LRC）：这是一个很好的挑战。
【微信小程序】媒体组件（一）audio
不想做菜鸟的小螃蟹
10-12 3357
周四没有课，开心，写个博客庆祝一下。 今天记录一下audio的基本使用，首先看下效果图。（声音请脑补一下~） 1.介绍一下audio属性（来自微信官方文档） 属性名 类型 默认值 说明 id String audio 组件的唯一标识符 src String 要播放音频的资源地址 loop Boole
微信小程序-audio组件-替换自己喜欢的音乐
watt的博客
03-20 3363
一.audio组件属性 属性名 类型 默认值 说明 id String 　 audio 组件的唯一标识符 src String 　 要播放音频的资源...
描述一下微信小程序中的音频和视频播放API，以及在项目中的使用场景。
长风破浪会有时的博客
01-10 859
创建并返回内部对象，用于控制音频播放。该对象提供了诸如播放、暂停、停止、调整音量等方法。：获取后台音频管理器实例，允许音频在小程序切换到后台时继续播放。组件：提供了一个简单的UI组件，可以直接在页面上显示一个默认的音频播放控件，用户可以直接操作。组件：这是一个专门用于展示视频内容的组件，它自带了播放、暂停、进度条等功能按钮，并支持自定义样式和事件绑定。：通过给定的videoId创建一个实例，可以用来远程控制指定的组件，例如播放、暂停等操作。
微信小程序 - 音频播放进度条和点击拖动的控制，支持自定义音乐播放控件样式布局（wx.createAudioContext）解决各种 InnerAudioContext.onTimeUpdate不执行
🏆 前端领域优质创作者
10-27 3899
微信小程序播放音频怎么显示出进度条，音乐播放器组件，wx.createAudioContext配合slider显示播放进度条，用wx.createInnerAudioContext怎么写进度条？onTimeUpdate怎么做音乐进度条，完美解决微信小程序InnerAudioContext.onTimeUpdate失效问题，解决InnerAudioContext.onTimeUpdate不执行的问题，seek()方法执行后不走，InnerAudioContext.onTimeUpdate不触发小程序
微信小程序自定义音频组件，自定义滚动条，单曲循环，循环播放 小程序自定义音频组件，带滚动条
bill的博客
11-15 3017
1,app,json里面配置 “requiredBackgroundModes”: [ “audio”, “location” ], 2，app.js里面配置 globalData: { userInfo: null, global_bac_audio_manager: { manage: wx.getBackgroundAudioManager(), is_play: false, id: ‘...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值