环形音乐播放器，环形进度条，带声音波形效果

已于 2023-06-26 22:16:49 修改
阅读量203 收藏
点赞数
文章标签： jquery 编辑器 音频 javascript
于 2023-06-23 21:05:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40597009/article/details/131354166
版权
本文介绍了一种使用jQuery实现的环形音乐播放器，包括环形进度条和声音波形效果。作者分享了HTML、JS和CSS代码，适合对JQ感兴趣的开发者参考。
摘要由CSDN通过智能技术生成


这是自己研究了一段时间的成果。
或许会有人用得到。自己比较熟悉JQ，所以使用的是JQ实现。
直接上代码：
html部分


<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>环形音乐播放器</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="player">
        <div class="circle-progress">
            <svg class="circle-svg" width="200" height="200">
                <circle class="circle-bg" cx="100" cy="100" r="90" />
                <circle class="circle-bar" cx="100" cy="100" r="90" />
            </svg>
            <button class="play-btn">播放</button>
        </div>
        <div class="time-display">00:00 / 00:00</div>
        <canvas class="visualizer" width=
最低0.47元/天 解锁文章
DSVUE
关注
js实现环形可视化音频
weixin_43165220的博客
01-15 1226
效果如图：背景图片可以换成自己喜欢的或者不用，环形的颜色线条粗细也可以自己调整。 代码（可直接复制）： <html lang="en"> <head> <meta charset="UTF-8"> <title>可视化音频</title> <script src="https://code.jquery.com/jq...
带波形进度的环形进度条实现
钟铭
12-06 1040
自定义环形进度条我的博客首页,希望大家喜欢。废话不多说，上自定义圆环代码：import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Path; import a
QT 带有动画的 圆形进度条 水波进度条
漫步繁华街的专栏
07-29 2万+
我们在使用其他软件的时候，经常能看到各种绚丽的进度条，其中带有水波波纹的进度条就是其中一个。对于PC端软件开发使用的QT，只是提供了process bar，样式十分单一。 所以这次我们就使用QT的paint 以及定时器来实现类似的水波进度条。 先看一下最终效果图: 这个是怎样实现的呢？ 我们仍然是在一个QWidget上的paintEvent上重绘实现图形绘制 + QTimer 实现动画效果。 首...
OpenHarmony实战开发-如何实现波纹进度条
2401_82546228的博客
05-22 866
应用开发过程中经常用到波纹进度条，常见的如充电进度、下载进度、上传进度等，本例即为大家介绍如何实现上述场景。
web特效-折叠隐藏文字&炫酷复选框&波动加载条&音乐波动加载条&流彩边框&环形指示器
Aqours的博客
08-17 458
web特效 折叠隐藏文字 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>被折叠隐藏的字符</title> <style> *{ margin: 0px; padding: 0px; } .char1{ background-color: red;
HTML实现进度条/加载框模版
joe_g12345的博客
06-09 1164
【代码】HTML实现进度条/加载框模版。
打造跳跃音波播音乐放器(Electron+Nodejs+React)
weixin_34315485的博客
05-09 1944
Electron可以让我们使用html,css,javascript来搭建跨平台（Windows、macOS、Linux）的桌面应用。下面通过Electron+Nodejs+React来实现一个支持播放在线音乐及本地音乐的播放器。播放器设计风格为windows的Fluent Design，win10和macOS上均可运行（如果构建打包需要不同平台区分打包），Linux上未测试。 本文主要说明开发中...
C# winform推荐波形图表控件scottplot
wjx870901的博客
01-04 1万+
Hello大家好，我是开箱测评小汪。自从我推荐了scottplot控件后就有很多小伙伴留言，希望我还有没有什么推荐的控件呢。今天给大家推荐的一款C# winform开发程序中可以使用的开源免费界面库sunnyui。相信很多刚开始接触C#编程的小伙伴和我一样肯定很纠结，我到底是学winform和WPF呢。一般winform开发的程序的界面比较low，WPF开发的程序界面非常漂亮，但是入门门槛比较高。 但是今天我给大家推荐的是一款在winform开发中可以用的窗口界面库...
（四十六）c#Winform自定义控件-水波进度条
冰封一夏
09-10 1729
前提 入行已经7,8年了，一直想做一套漂亮点的自定义控件，于是就有了本系列文章。 GitHub：https://github.com/kwwwvagaa/NetWinformControl 码云：https://gitee.com/kwwwvagaa/net_winform_custom_control.git 如果觉得写的还行，请点个 star 支持一下吧 欢迎前来交流探讨： 企鹅群5...
Qt/C++控件SDK使用示例大全
Qt/C++视频监控/推流/物联网/大屏系统/自定义控件/UI定制/输入法
11-07 1万+
文章 链接 01表盘控件-01汽车仪表盘-gaugecar https://qtchina.blog.csdn.net/article/details/120240257 01表盘控件-02圆弧仪表盘-gaugearc https://qtchina.blog.csdn.net/article/details/120240333 01表盘控件-03百分比表盘-gaugepercent https://qtchina.blog.csdn.net/article/details/1202...
Qt/C++自定义控件大全文章导航
Qt/C++视频监控/推流/物联网/大屏系统/自定义控件/UI定制/输入法
12-01 7716
文章 链接 Qt编写自定义控件1-汽车仪表盘 https://blog.csdn.net/feiyangqingyun/article/details/89407746 Qt编写自定义控件2-进度条标尺 https://blog.csdn.net/feiyangqingyun/article/details/89420205 Qt编写自定义控件3-速度仪表盘 https://blog.csdn.net/feiyangqingyun/article/details/89428878 ...
ym——android源码大放送（实战开发必备）
热门推荐
陈宇明
08-10 4万+
文件夹 PATH 列表 卷序列号为 000A-8F50 E:. │  javaapk.com文件列表生成工具.bat │  使用说明.txt │  免费下载更多源码.url │  目录列表.txt │   ├─android web应用 │      jqmDemo_static.zip │      jqmMobileDemo-master.zip │      jqmMo
java对音频文件的频谱分析
liujunvy89的专栏
09-13 6835
MP3音频录音机MP3音频录音机是一款运行于个人计算机上的功能强大的录音、播放软件。使用它，您可将计算机内部或外部声音（如来自麦克风、线路输入、INTERNET的广播或各影音播放软件正在播放的声音）永久保存到硬盘上。 Frobis MP3 Studio 1.6该软件可以将WAV编码为MP3，或反向将MP3解码为 WAV，并可播放这两种文件格式，还可编辑MP3 Tag。 Filthy Fil...
rpa批量发送邮件如何通过编辑器编发邮件？
最新发布
danplus的博客
10-10 406
通过编辑器实现rpa批量发送邮件，不仅可以大幅提高邮件发送的效率，还能确保邮件的一致性和专业性。AokSend，RPA批量发送邮件首选，API与SMTP接口融合，自动化更高效，邮件营销从此无忧！
Cursor AI编辑器：开发效率提升利器
budahui的博客
10-04 1059
通过llamafactory.cn的开发经历，我体会到Cursor配合v0.dev真的巨提升开发效率。它不仅节省了大量编码时间，还提供了高质量的代码建议和智能的问题解决方案。我强烈推荐尝试这种开发方式当然，工具终归是工具，关键还是要不断提升自己的编程能力和系统设计能力。AI工具能够帮助我们更快地实现想法，但不能替代对技术的深入理解。希望这篇文章能够帮助大家在实际项目中更好地利用AI工具，提升开发效率。
【JAVA开源】基于Vue和SpringBoot的高校学科竞赛平台
杨荧的CSDN博客
10-10 923
教师功能有个人中心，题目类型管理，竞赛题库管理，竞赛类型管理，竞赛信息管理，报名信息管理，竞赛评分管理，参赛名单管理，晋级名单管理，获奖名单管理，竞赛总结管理，报销清单管理，成绩申诉管理，参赛信息管理，参赛信息管理，往年成绩管理，获奖情况管理。
解释器、预处理、main函数
编程语言技巧经验分享
10-07 1230
解释器覆盖范围很广，不管是解释语言的运行时解释翻译器，还是操作系统自带脚本的解释器。
React中的refs是什么？
Front end development engineer
10-10 116
React 的众多优点之一是它抽象了处理真实 DOM 的复杂性。现在，我们无需手动查询元素、绞尽脑汁思考如何为这些元素添加类又或者是添加样式等，也无需为浏览器兼容性而苦恼，只需编写组件并专注于用户体验即可。然而，仍然有一些情况（虽然很少！）我们需要访问实际的 DOM。而当涉及到实际的 DOM 时，最重要的是要理解并学习如何正确使用 ref 以及 ref 周围的一切。
Android自定义View：打造环形进度条
"Android自定义View实现环形进度条的思路与实例，涵盖了自定义宽度、颜色、旋转图片等功能，适用于Android应用开发中的个性化进度条设计。" 在Android开发中，有时我们需要根据需求创建独特的UI组件，比如环形...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

DSVUE

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值