用html制作一个音乐排行榜,使用原生JavaScript制作一个漂亮的音乐播放器

最新推荐文章于 2024-05-16 21:46:32 发布
最新推荐文章于 2024-05-16 21:46:32 发布
阅读量4.8k 收藏 2
点赞数
文章标签： 用html制作一个音乐排行榜

简单介绍

起初在简书上发现了这篇博客——【html、css、jq】制作一个简洁的音乐播放器。这是一个用jQuery库实现的音乐播放器，界面简约大气。

我在这个基础上，反其道而行，使用原生JavaScript实现。这个播放器是面向移动端的设备。在此感谢饥人谷和张新望，有了他们开路，使用原生的JS实现起来也并不费力。

音乐是通过豆瓣FM的API获取到的

界面类似于网易云音乐的样子

d47efcbdf26c?t=123

播放器的界面

d47efcbdf26c?t=123

d47efcbdf26c?t=123

怎么样，样式还可以吧？比较简单，最下面是可以操作的进度条和按钮，按钮从左至右依次是“显示歌词/隐藏歌词”、“切换频道”、“播放/暂停”、“下一曲”、“随机播放/单曲循环”。只有下一曲，没有上一曲，而且你永远不知道下一曲是啥，所以title就用了“与喜欢的音乐不期而遇”。

HTML部分

与喜欢的音乐不期而遇

最低0.47元/天 解锁文章
各三名
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5+原生js制作一个超简易音乐播放器
SAKURE2210866448的博客
10-20 5447
html5+原生js制作一个简易音乐播放器 最近学了html5的标签，然后就想着做一个音乐播放器。下面是效果图，emmmmm有点丑陋，随着以后学的更多，之后会完善哒~ 播放器实现的功能 点击播放 自动循环播放 上一首 下一首 下面是具体代码 注释写的很详细，大家可以复制之后体验~ 歌我就随便选了三个，可以修改成自己喜欢的。 html <!DOCTYPE HTML> <htm...
用JS写球员能力排行
m0_70793959的博客
07-07 131
用document获取id：main，用button标签定义一个投票按钮。代码并不全面，选择性演示，希望读到的人能够引发你的思考！首先设置一个DIV标签，用于存放照片，并添加元素属性。
PHP制作音乐播放器制作教案,使用原生JavaScript制作一个漂亮的音乐播放器
weixin_36410567的博客
03-13 150
简单介绍起初在简书上发现了这篇博客——【html、css、jq】制作一个简洁的音乐播放器。这是一个用jQuery库实现的音乐播放器，界面简约大气。我在这个基础上，反其道而行，使用原生JavaScript实现。这个播放器是面向移动端的设备。在此感谢饥人谷和张新望，有了他们开路，使用原生的JS实现起来也并不费力。音乐是通过豆瓣FM的API获取到的界面类似于网易云音乐的样子播放器的界面怎么样，样式还可以...
HTML+CSS+原生JS 实现音乐播放器
liu62615的博客
11-03 1522
HTML+CSS+原生JS 实现音乐播放器
使用 原生js 制作插件 (javaScript音乐播放器)
weixin_34189116的博客
06-24 363
1.引用页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1...
使用 JavaScript 制作一个可以弹的吉他
前端好玩的小案例、游戏、工具
06-06 7773
物理吉他大家应该都见过，那么数字吉他大家玩过吗，不妨来试一试 演示地址：https://haiyong.site/demo/js-guitar/ 代码都已打包上传，在文章末尾哦
网页音乐播放器(html+css+原生js)
weixin_71927437的博客
05-16 616
想自己试做一个小网站，于是边学边做，也有了一个可以用的成品，想着拿出来并简单聊聊。决定先做一个音乐播放器。以下是我参考的文章，成品也是在这位作者的基础上改来的。
一个简单的音乐网站设计与实现(HTML+CSS)
qq_524614081的博客
11-22 996
v 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
原生H5+JS+CSS实现音乐播放器（上下一首，随机单曲循环播放，进度条，播放列表）
m0_74222549的博客
03-23 6825
话不多说，下面进入到h5页面的代码。
基于原生js和HTML5的Audio制作的一个音乐播放器.zip
02-14
本项目利用原生JavaScript和HTML5的Audio元素，构建了一个功能完备的音乐播放器。通过这个项目，我们可以深入学习HTML5多媒体处理的原理和实践技巧。 首先，HTML5 Audio元素是实现音乐播放的基础。它允许在网页上...
制作一个简单HTML旅游网站（HTML+CSS+JS）无锡旅游网页设计与实现面.md
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计...
用HTML+CSS做一个漂亮简单的旅游网站——旅游网页设计与实现(6页)HTML+CSS+JavaScript
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计...
【网页设计】HTML做一个属于我的音乐页面（纯html代码）
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频...
一个简单的WEB网页制作作业——黑色的山河旅行社网站(5个页面)HTML+CSS+JavaScript
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计...
基于豪猪优化算法CPO-VMD实现信号去噪目标函数为包络信息熵 包络熵 排列熵 样本熵最小附matlab代码.rar
最新发布
07-19
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
高分项目-基于SpringBoot框架实现的毕业生信息招聘平台（包含全套源码 + 数据库sql + 论文）.zip
07-19
【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。【项目质量】：所有源码都经过严格测试，可以直接运行。功能在确认正常工作后才上传。【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。【附加价值】：项目具有较高的学习借鉴价值，也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。【沟通交流】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。鼓励下载和使用，并欢迎大家互相学习，共同进步。
Matlab实现鱼鹰优化算法OOA-CNN-LSTM-Multihead-Attention温度预测附matlab代码.rar
07-19
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
高分项目-基于SpringBoot框架实现的餐厅点餐系统（包含全套源码 + 数据库sql + 论文）.zip
07-19
【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。【项目质量】：所有源码都经过严格测试，可以直接运行。功能在确认正常工作后才上传。【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。【附加价值】：项目具有较高的学习借鉴价值，也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。【沟通交流】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。鼓励下载和使用，并欢迎大家互相学习，共同进步。
能帮我用Androidstudio开发一个原生音乐播放器吗
04-05
很高兴帮助你。下面是一个简单的Android Studio项目，该项目使用原生的MediaPlayer API实现了一个基本的音乐播放器。 首先，你需要在Android Studio中创建一个新项目，并添加以下权限到你的AndroidManifest.xml文件中： ```xml <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> ``` 这些权限将允许你访问设备上的音乐文件。 接下来，你需要创建一个MainActivity类。在这个类中，你需要创建一个MediaPlayer对象，并为它设置一个监听器，以便在播放过程中更新UI。 ```java public class MainActivity extends AppCompatActivity implements MediaPlayer.OnCompletionListener { private MediaPlayer mediaPlayer; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mediaPlayer = new MediaPlayer(); mediaPlayer.setOnCompletionListener(this); } @Override public void onCompletion(MediaPlayer mediaPlayer) { // 播放完成时回调此方法 } } ``` 接下来，你需要创建一个方法，以便从设备上的文件系统中加载音乐文件，并将其添加到MediaPlayer对象中。 ```java private void loadMusicFile() { try { File musicFile = new File(Environment.getExternalStorageDirectory().getPath() + "/Music/my_song.mp3"); mediaPlayer.setDataSource(musicFile.getPath()); mediaPlayer.prepare(); } catch (IOException e) { e.printStackTrace(); } } ``` 在这个示例中，我们将音乐文件存储在设备的Music文件夹中，并将其命名为my_song.mp3。请记住，你需要将其替换为实际的音乐文件路径。 现在，你可以创建一些UI元素，例如播放/暂停按钮，用于控制音乐播放。这些元素可以在activity_main.xml布局文件中定义。例如，以下代码将创建一个Button元素，并将其与名为playButton的ID相关联： ```xml <Button android:id="@+id/playButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Play" /> ``` 接下来，你需要在MainActivity类中获取playButton元素并为其添加一个单击监听器。在监听器中，你可以调用loadMusicFile()方法以及MediaPlayer对象的start()和pause()方法。 ```java Button playButton = findViewById(R.id.playButton); playButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { if (!mediaPlayer.isPlaying()) { loadMusicFile(); mediaPlayer.start(); playButton.setText("Pause"); } else { mediaPlayer.pause(); playButton.setText("Play"); } } }); ``` 现在，当用户单击playButton时，你的应用程序将开始播放音乐。当音乐播放完成时，onCompletion()方法将被调用，因此你可以在其中添加逻辑以在播放完成后执行一些操作。 这只是一个简单的示例，你可以根据自己的需要进行修改和扩展。希望这可以帮助到你！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值