HTML5 可视化音乐播放器（附源码）

已于 2024-02-28 17:18:43 修改
阅读量7.9k 收藏 14
点赞数 2
分类专栏： JSP+HTML 文章标签： javascript html5 jquery 1024程序员节
于 2022-10-24 23:02:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26599807/article/details/127503912
版权

文章目录

一、前言

最近某音乐播放器越来越迷，以前下载的本地音乐没有版权也不能播放了…
特在网上找了个音乐播放插件，但功能实在简陋，特在其基础上进行了改造，并对其扩展至layui版（兼容）。
感兴趣的可以去查看源代码，仅供个人学习使用~

二、主要功能

  • 音频播放（及控制）
  • 循环播放模式（列表循环、顺序播放、单曲循环、随机播放）
  • 歌曲列表（播放指定歌曲）
  • 添加歌曲（扩展layui，支持拖拽添加）

三、效果图

在这里插入图片描述

四、主要介绍

主要样式分为2种，JS原生版、layui+jQuery版。前者在原创基础上，修改了一些功能，但都是纯js实现的（真不容易）；后者在前者的基础上，实现了拖拽添加功能，样式更美观些。

1、关于原创/来源

声明：无意冒犯，个人借鉴学习使用，如有冒犯请联系笔者，谢谢~

2、关于JS原生版

<script src="./js/player.js" type="text/javascript
最低0.47元/天 解锁文章
liu_bees
关注
  • 2
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
QQ音乐静态项目html源码
04-27
<div class="mod_index_tab"><a class="index_tab__item index_tab__item--current">为你推荐</a><a class="index_tab__item ">背景音乐</a><a class="index_tab__item ">情歌</a><a class="index_tab__item ">网络歌曲</a><a class="index_tab__item ">官方歌单</a><a class="index_tab__item ">经典</a></div>
基于HTML5的audio 音乐播放器.zip
02-13
html5开发
十四款网页音乐播放器源码下载
12-26
网页音乐播放器源码下载，十四款源代码，可参考学习运用
使用 HTML、CSS 和 JS 创建在线音乐播放器(含免费完整源码)_网页音乐播放器源码
2401_84265571的博客
05-04 669
/ 格式持续时间为 00 : 00 格式。// 从播放列表返回到音乐播放器。// pauseBtn 点击事件。// playBtn 点击事件。/// 从音乐播放器返回。// 在此处选择所有按钮。/// 访问播放列表。
用html5写一个音乐播放器
canduecho的专栏
08-27 5105
这只是一个简单的示例，你可以根据你的需求进一步自定义和扩展播放器的功能。如果你希望实现更复杂的音乐播放器，可能需要使用一些现成的音频播放器库或框架。如果你想要增加更多的功能，如自定义样式、播放列表、自动播放等，你可能需要使用JavaScript来操作音频元素。在上面的示例中，我们使用了自定义的样式来布局播放器，并添加了自定义的播放和暂停按钮，通过JavaScript代码实现了播放和暂停功能。在HTML5中创建一个简单的音乐播放器时，你可以使用``元素来实现。音乐播放器
使用 HTML、CSS 和 JS 创建在线音乐播放器(含免费完整源码)_网页音乐播放器源码(1)
最新发布
2401_84254057的博客
05-08 1002
对于从来没有接触过网络安全的同学，我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线，大家跟着这个大的方向学习准没问题。// 格式持续时间为 00 : 00 格式。// 从播放列表返回到音乐播放器。// pauseBtn 点击事件。// playBtn 点击事件。因篇幅有限，仅展示部分资料。/// 从音乐播放器返回。// 在此处选择所有按钮。/// 访问播放列表。
HTML5音乐播放器源码.7z
07-07
这是一款样式非常古典，但又是非常时尚的HTML5播放器，说它是古典播放器，是因为这种卡带式的HTML5播放器比较古老，说它时尚，是因为现在的HTML5播放器很少有这种样式的，非常有创意。如果你想给你的个人主要添加一款个性化的播放器，那么这款HTML5卡带式古典播放器可以选择一下，个人认为这是HTML5播放器的神话，非常经典。 安装步骤： 1：下载程序包。 2：把目录下的所有文件上传至空间目录下。
基于网页的个人音乐播放器系统 毕业设计毕设源码（含后台和源代码）
04-21
后台管理--【音乐中心】   |--添加音乐：歌曲名、作者、封面、歌词、上传MP3等   |--支持查看所有音乐列表   |--支持音乐信息 修改   |--支持音乐信息 删除   --【其他功能】   |--修改账号密码   |--退出登录 前台用户   |--音乐播放列表   |--音乐播放、同步歌词显示   |--上一首、下一首、暂停、播放、自动播放下一首功能   |--拖动音乐播放   |--调节音量大小 
网站音乐播放器源码
m0_59088506的博客
05-01 2491
一起白嫖，简要快速的建立一个网站音乐播放器，在我研究一番之后直接给大家总结出结果一共四个文件。
纯HTML+CSS+JS制作音乐播放器（附源码）
热门推荐
qq_51895395的博客
05-01 1万+
代码中使用到的包括图片、视频、音频等所有素材仅为展示使用，相互之间没有任何关联，如有需要可自行更改。GitHub - falysha/musicPlayer: 原生HTML+CSS+JS，未使用任何框架。
【博主推荐】html好看的音乐播放器(附源码)
xcLeigh
06-18 1万+
html好看的音乐播放器，音乐播放器源码，html音乐播放器源码，html音乐播放器界面，html音乐播放器，音乐播放器。
基于html5的音乐播放器.zip
02-12
html5开发
博主推荐html好看的音乐播放器(附源码)
06-18
html好看的音乐播放器(附源码) 音乐播放列表，里面目前几首歌曲，到时候可以自己下载喜欢听的歌曲到里面，里面带有免费下载歌曲地址。 支持切换上一首，下一首，支持播放、暂停、支持快进，快退等功能； 功能说明及具体效果展示地址： https://blog.csdn.net/weixin_43151418/article/details/125351391
java源码包---java 源码 大量 实例
04-18
　Java生成密钥、保存密钥的实例源码，通过本源码可以了解到Java如何产生单钥加密的密钥(myKey)、产生双钥的密钥对(keyPair)、如何保存公钥的字节数组、保存私钥到文件privateKey.dat、如何用Java对象序列化保存私钥...
java源码包2
04-20
　Java生成密钥、保存密钥的实例源码，通过本源码可以了解到Java如何产生单钥加密的密钥(myKey)、产生双钥的密钥对(keyPair)、如何保存公钥的字节数组、保存私钥到文件privateKey.dat、如何用Java对象序列化保存私钥...
JAVA上百实例源码以及开源项目
01-03
　Java生成密钥、保存密钥的实例源码，通过本源码可以了解到Java如何产生单钥加密的密钥(myKey)、产生双钥的密钥对(keyPair)、如何保存公钥的字节数组、保存私钥到文件privateKey.dat、如何用Java对象序列化保存私钥...
java源码包3
04-20
　Java生成密钥、保存密钥的实例源码，通过本源码可以了解到Java如何产生单钥加密的密钥(myKey)、产生双钥的密钥对(keyPair)、如何保存公钥的字节数组、保存私钥到文件privateKey.dat、如何用Java对象序列化保存私钥...
用python写一个可视化音乐播放器
03-26
抱歉，我是一个AI语言模型，不能亲自编写代码。但是，我可以提供基本思路来实现可视化音乐播放器。 1. 导入必要的库 ```python import os from tkinter import * import tkinter.filedialog as fd import pygame.mixer from mutagen import File ``` 2. 设计用户界面 使用Tkinter库来创建GUI（图形用户界面），包括按钮、菜单、文本框和标签等。 ```python class Application(Frame): def __init__(self, master=None): super().__init__(master) self.master = master self.pack() self.create_widgets() def create_widgets(self): # 创建按钮 self.open_button = Button(self, text="选择歌曲", command=self.open_file) self.open_button.pack() self.play_button = Button(self, text="播放", command=self.play_music) self.play_button.pack() self.pause_button = Button(self, text="暂停", command=self.pause_music) self.pause_button.pack() self.stop_button = Button(self, text="停止", command=self.stop_music) self.stop_button.pack() # 创建标签 self.song_info_label = Label(self, text="") self.song_info_label.pack() # 设置菜单 menu = Menu(self.master) self.master.config(menu=menu) file_menu = Menu(menu) file_menu.add_command(label="选择歌曲", command=self.open_file) file_menu.add_command(label="退出", command=self.master.quit) menu.add_cascade(label="文件", menu=file_menu) def open_file(self): self.filename = fd.askopenfilename(title="打开音乐文件", filetypes=[("MP3", ".mp3")]) def play_music(self): pygame.mixer.music.load(self.filename) pygame.mixer.music.play() def pause_music(self): pygame.mixer.music.pause() def stop_music(self): pygame.mixer.music.stop() ``` 3. 添加音乐播放功能 使用pygame.mixer库来处理音乐文件，包括播放、暂停和停止等。 ```python def play_music(self): pygame.mixer.music.load(self.filename) pygame.mixer.music.play() def pause_music(self): pygame.mixer.music.pause() def stop_music(self): pygame.mixer.music.stop() ``` 4. 显示音乐信息 使用mutagen库来读取音乐文件中的歌曲信息，并在GUI中显示出来。 ```python def get_song_info(self): file = File(self.filename) self.song_info_label.configure(text="歌曲信息：" + file.tags["TIT2"].text[0] + " - " + file.tags["TPE1"].text[0]) def open_file(self): self.filename = fd.askopenfilename(title="打开音乐文件", filetypes=[("MP3", ".mp3")]) self.get_song_info() ``` 5. 运行程序 使用Tkinter库的mainloop()方法运行程序。 ```python root = Tk() root.title("音乐播放器") app = Application(master=root) app.mainloop() ``` 以上就是基本的思路，你可以根据自己的需要对其进行进一步修改和完善。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值