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

最新推荐文章于 2022-07-27 01:00:00 发布
最新推荐文章于 2022-07-27 01:00:00 发布
阅读量1.5k 收藏 5
点赞数
分类专栏： 小程序 文章标签： 小程序 音乐播放 旋转动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shenyou_fu/article/details/104241324
版权

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

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

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

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

//获取全局唯一的背景音频管理器
const backgroun
最低0.47元/天 解锁文章
Mr.F阿
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue仿网易云音乐播放器界面
LYQ
11-21 1万+
由于工作项目的需要，需要使用到歌曲播放，参考多方资料，写了一个仿网易云音乐播放界面，能完整的实现音乐播放功能。 前端简单的使用vue组件和audio标签实现了播放器界面，后端则是调用网易云的API获取对应的歌曲信息。 废话不多说上代码 歌曲播放界面（musicPlay.vue） <template> <div class="main-page"> <audio :src="songInfo.url" id="music" autoplay=..
Vue.js+axios制作的仿酷狗音乐-音乐播放界面
destinymmm的博客
03-23 2494
音乐播放器
音乐播放器微信小程序开发-歌单界面（简陋版）
weixin_43374146的博客
04-08 5018
仿QQ音乐app的歌单界面制作了一个简易且简陋的歌单界面。 首先po一张最终效果图（很多功能还没实现，以及还有bug没有改好） 因为不涉及到逻辑，目前只需一些网页开发经验与知识即可（当然啦，还需要一定的审美） 首先从上图可以看出界面大致分为两块，上边浅蓝色部分主要为歌单介绍。其中左一正方形大图是歌单封面，小圆圈图片是登录用的头像，用户旁边文字（秋.）为用户名，Sylvia’s List是用户自己...
CSS图片旋转/暂停后保持旋转状态(音乐播放常用)
m0_65447589的博客
03-16 1471
项目场景： 通常h5项目中的音乐图标会有旋转动画,我们需要进行暂停播放,展示对应的旋转动画 问题描述 通常的做法,创建旋转动画,暂停的时候移除toggleAudioAni类名,达到暂停的效果,但是会存在一个问题,旋转角度会立马转到0,体验效果非常差 @-webkit-keyframes audio_icon { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
使用animation做一个音乐播放器循环旋转的效果
qq_40673860的博客
03-24 729
<img ref='mp3Img' src="../../assets/images/xxxxx.png" alt/> if (val.includes('mp3')) { let _this = this // 如果是mp3格式添加animation动画 _this.$refs.mp3Img.classL...
WPF 3D 轮播操控面板，功能强大，详细注释
01-09
在本文中，我们将深入探讨基于WPF的3D轮播操控面板，这是一个功能强大的用户界面组件，特别适用于创建3D展示、轮播图以及复杂的3D操控体验。这个项目不仅提供了丰富的视觉效果，而且设计思路清晰，易于扩展，使得...
VB俄罗斯方块系统设计与实现(源代码+论文).zip
09-02
在俄罗斯方块游戏中，需要设计一个清晰、简洁的游戏面板，显示当前的方块布局，以及控制面板，包括暂停、开始、速度调整等功能。 3. **数据结构与算法**：游戏的核心是管理方块的生成、移动和消除。这需要使用适当...
VB毕业设计——VB俄罗斯方块系统设计与实现(源代码+论文).zip
09-14
【VB毕业设计——VB俄罗斯方块系统设计与实现(源代码+论文)】 VB（Visual Basic）是一种由微软公司开发的事件驱动编程语言，尤其适用于初学者和快速应用程序开发。这个毕业设计项目专注于使用VB来实现一个经典的...
JAVA上百实例源码以及开源项目源代码
09-17
util实现Java图片水印添加功能，有添加图片水印和文字水印，可以设置水印位置，透明度、设置对线段锯齿状边缘处理、水印图片的路径，水印一般格式是gif，png,这种图片可以设置透明度、水印旋转等，可以参考代码加以...
实现安卓音乐播放器中的旋转动画效果
07-26
实现安卓主流音乐播放器中的旋转动画效果，其中包括如何对任意形状的图片进行圆形截取，以及如何从相册和拍照中获取图片
Android 仿百度网页音乐播放器圆形图片转圈播放效果
05-21
Android 仿百度网页音乐播放器圆形图片转圈播放效果，完美运行，效果很棒
html5自定义音频播放界面
01-19
利用audioAPI即兴做的自定义音频播放器小界面，必然有很多不足，望指出（界面难看除外）
类似冰雪奇缘一类的三消游戏，用quick-x实现的，简单的demo.zip
最新发布
04-20
5. **UI界面**：Quick-X支持自定义UI组件，游戏中的菜单、得分面板等可以通过布局文件和自定义控件实现。此外，动画效果也是提升游戏体验的重要元素，例如消除方块的爆炸动画、过渡动画等。 6. **网络同步**：如果...
微信小程序开发———音乐播放器
热门推荐
qq_50582468的博客
10-27 3万+
目录 一 小程序主体功能介绍 二 常用组件和API介绍 音频API 常用组件 三 整体布局 数据定义 主体页面 运行效果 四 播放器页面 布局部分 样式部分 运行效果 五 播放列表页面 布局部分 样式部分 运行效果 全部功能实现代码index.js 一 小程序主体功能介绍 本小程序主要实现，音乐的播放、暂停，下一曲的切换，以及播放列表和当前播放歌曲的详细信息查看等。 二 常用组件和API介绍 音频API 介绍 创建音频时需要先创建一个对象实例，从而引用该
Android 音乐播放器的实现（一）自定义按钮的实现
xiaoheliushuiya
01-15 384
Android 系统提供了MediaPlayer控件，让我们能够利用它实现音频的播放。 而从学Android开始，在看教程的时候，我就想，我要自己做一个音乐播放器，因为一个完整的音乐播放器是有很多功能的，它涉及到很多方面的知识，可以帮助我们更好地学习和掌握关于Android的点点滴滴的知识。 既然我们现在是来学习怎么用代码打出我们自己的音乐播放器，我们就别着急，心急吃不了热豆腐，一口吃不成大胖...
微信小程序 封面旋转 音乐播放器的实现
10-08 8082
  最近在学习微信小程序的UI组件，audio音频方面想做一个类似网易云的播放效果。基础需求： 1、能控制音频开始、暂停、停止 2、音乐播放，封面旋转，音乐暂停封面停止旋转 3、能显示歌曲的播放时间和进度条 4、能通过进度条控制音乐的播放进度   先上一张效果图 直接放代码，代码里面写了比较多的注释。 wxml： &lt;view class='item'&gt; ...
微信小程序音乐播放器旋转动画
weixin_45580341的博客
05-14 1371
小程序播放器专辑界面旋转动画 二话不说看效果 首先是CSS样式 .music_on{ animation: audio-rotate 8s linear infinite; } .audio_control{ display: flex; flex-direction: row; justify-content:space-around; } .audio_control button{ width:200rpx; height:80rpx; line-height:80
微信小程序音乐播放器
daisy211988的博客
07-27 449
【微信小程序代码】微信小程序音乐播放器。
html音乐播放界面结构
05-26
一个基本的HTML音乐播放界面结构如下： ```html <!DOCTYPE html> <html> <head> <title>音乐播放器</title> </head> <body> <div> <h1>My Music Player</h1> <audio controls> <source src="音乐文件地址" type="audio/mp3"> <source src="音乐文件地址" type="audio/wav"> <p>Your browser doesn't support HTML5 audio. Here is a <a href="音乐文件地址">link to the audio</a> instead.</p> </audio> </div> </body> </html> ``` 上面的代码包含一个 `<audio>` 元素，它是HTML5提供的一个播放音频的标签，其中的 `controls` 属性表示显示播放器控制面板，`<source>` 元素是用来指定音频文件的地址和格式，如果浏览器不支持 `<audio>` 标签，则会显示一个包含音频文件下载链接的段落。此外，还可以添加其他的控制按钮和样式来美化界面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值