音乐播放界面控制面板功能的实现（旋转动画、代码、思路）

最新推荐文章于 2022-03-16 11:23:15 发布

Mr.F阿

最新推荐文章于 2022-03-16 11:23:15 发布

阅读量1.6k

点赞数

分类专栏：小程序文章标签：小程序音乐播放旋转动画

本文链接：https://blog.youkuaiyun.com/shenyou_fu/article/details/104241324

版权

本文详细介绍了如何实现小程序音乐播放界面的控制面板功能，包括获取背景音频管理器、设计旋转动画以及控制面板的事件联动。在获取音频管理器后，通过云函数获取音乐数据，并利用全局变量判断播放状态。旋转动画部分，通过CSS关键帧实现图片持续旋转及指针摆动。最后，实现点击图标控制播放、暂停、上一首和下一首歌的事件处理，确保界面与音乐播放状态同步。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在之前的准备工作中，界面已经是准备好的，
在这里插入图片描述

第一部分获取背景音频管理器

现在要实现控制面板的功能实现，让他可以通过控制面板的按钮图标来实现歌曲的播放暂停上下曲。
所以我们需要获取当前播放音乐的URL地址
在这里插入图片描述
通过之前我们已经获取到数据的URL，我们从云端调用数据。event.musicId为我们传递过来的歌曲ID，之后返回获取到的数据。

在前端显示页面的脚本中，调用云函数，传递ID（musicId），打印出来来看一看返回的值是否正确
在这里插入图片描述
因为是获取的背景播放，所以我们要获取背景播放的函数

//获取全局唯一的背景音频管理器
const backgroundAudioManager=wx.getBackgroundAudioManager()

在这里插入图片描述
让我们的背景播放获取到音乐，获取到需要的数据。

这个

最低0.47元/天解锁文章

音乐播放界面控制面板功能的实现（旋转动画、代码、思路）

第一部分 获取背景音频管理器

第一部分获取背景音频管理器