前端 用HTML，CSS, JS 写一个简易的音乐播放器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Music Player</title><style>/* 样式可自行修改 */.container {width: 600px;margin: 0 auto;}h2 {text-align: center;}.controls {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;}.progress {width: 400px;height: 10px;background-color: #ccc;}.progress-bar {height: 10px;background-color: #6cb0ff;}.info {display: flex;justify-content: center;align-items: center;margin-bottom: 20px;}.song-info {margin-left: 20px;display: flex;flex-direction: column;}.song-info span {margin-bottom: 5px;}.song-list {list-style: none;padding: 0;}.song-list li {margin-bottom: 5px;cursor: pointer;}.song-list li.active {color: #6cb0ff;}.play-mode {display: flex;align-items: center;}.play-mode span {margin-right: 5px;}</style>
</head>
<body><div class="container"><h2>Music Player</h2><div class="controls"><button id="prev">上一首</button><button id="play">播放</button><button id="next">下一首</button><div class="progress"><div class="progress-bar"></div></div><input type="range" id="volume" min="0" max="1" step="0.1" value="0.5"></div><div class="info"><img src="" alt="" id="cover"><div class="song-info"><span id="song-name">歌曲名称</span><span id="artist">歌手</span></div></div><ul class="song-list"><li data-src="./music/song1.mp3">歌曲1</li><li data-src="./music/song2.mp3">歌曲2</li><li data-src="./music/song3.mp3">歌曲3</li></ul><div class="play-mode"><span>播放模式：</span><button id="loop">循环</button><button id="random">随机</button><button id="single">单曲</button></div></div><script>const audio = new Audio(); // 创建音乐播放器对象const songList = document.querySelectorAll('.song-list li');const prevBtn = document.querySelector('#prev');const playBtn = document.querySelector('#play');const nextBtn = document.querySelector('#next');const volumeSlider = document.querySelector('#volume');const progressBar = document.querySelector('.progress-bar');const coverImg = document.querySelector('#cover');const songName = document.querySelector('#song-name');const artistName = document.querySelector('#artist');const loopBtn = document.querySelector('#loop');const randomBtn = document.querySelector('#random');const singleBtn = document.querySelector('#single');let currentIndex = 0;let isPlaying = false;let playMode = 'loop'; // 默认播放模式为循环function playSong(index) {const song = songList[index];audio.src = song.dataset.src;audio.play();isPlaying = true;playBtn.textContent = '暂停';coverImg.src = `./images/cover${index+1}.jpg`;songName.textContent = song.textContent;artistName.textContent = '歌手名称';songList.forEach((item) => {item.classList.remove('active');});song.classList.add('active');}function getNextIndex() {let nextIndex;switch(playMode) {case 'loop':nextIndex = currentIndex + 1;if (nextIndex >= songList.length) {nextIndex = 0;}break;case 'random':nextIndex = Math.floor(Math.random() * songList.length);break;case 'single':nextIndex = currentIndex;break;}return nextIndex;}function updateProgress() {const progress = audio.currentTime / audio.duration * 100;progressBar.style.width = `${progress}%`;}function init() {playSong(currentIndex);}init();prevBtn.addEventListener('click', () => {currentIndex--;if (currentIndex < 0) {currentIndex = songList.length - 1;}playSong(currentIndex);});nextBtn.addEventListener('click', () => {currentIndex = getNextIndex();playSong(currentIndex);});playBtn.addEventListener('click', () => {if (isPlaying) {audio.pause();isPlaying = false;playBtn.textContent = '播放';} else {audio.play();isPlaying = true;playBtn.textContent = '暂停';}});volumeSlider.addEventListener('input', () => {audio.volume = volumeSlider.value;});audio.addEventListener('timeupdate', updateProgress);progressBar.addEventListener('click', (e) => {const width = progressBar.clientWidth;const clickX = e.offsetX;const duration = audio.duration;audio.currentTime = clickX / width * duration;});songList.forEach((song, index) => {song.addEventListener('click', () => {currentIndex = index;playSong(currentIndex);});});loopBtn.addEventListener('click', () => {playMode = 'loop';});randomBtn.addEventListener('click', () => {playMode = 'random';});singleBtn.addEventListener('click', () => {playMode = 'single';});audio.addEventListener('ended', () => {currentIndex = getNextIndex();playSong(currentIndex);});</script>
</body>
</html>这个实现了基本的播放/暂停、歌曲切换、音量控制、进度条控制和显示歌曲信息等功能，同时还支持播放模式切换和歌曲列表操作。不过这只是一个简单的示例，实际上还有很多功能需要进一步完善和优化，例如：
- 支持歌词显示和同步
- 支持播放列表编辑和保存
- 支持拖拽上传歌曲
- 支持在线搜索歌曲
- 支持分享和评论等社交功能
这些功能的实现需要涉及到不同的技术和工具，如 AJAX、WebSocket、React、Node.js 等。如果你想要深入学习和掌握 Web 开发技术，可以选择相应的学习路径和教程进行学习。
相关文章：
前端 用HTML，CSS, JS 写一个简易的音乐播放器
<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Music Player</title><style>/* 样式可自行修改 */.container {width: 600px;margin: 0 auto;}h2 {text-align: center;}.controls {displ…...
)
自定义QChartView实现鼠标放在图表时，显示鼠标位置坐标值(x,y)
前言：因为需要一次性从文件中加载大量数据到图表中显示，所以打算使用qchartviewqscrollarea，当横坐标数据超出默认设定的显示范围之后，重新设置chartview的宽度和scrollarea内容区域(scrollAreaWidgetContents)的宽度，…...
antv/g6 交互与事件及自定义Behavior
监听和绑定事件 在 G6 中，提供了直接的单机事件、还有监听时机的方法。可以监听画布、节点、边、以及各函数被调用的时机等： 1. 绑定事件 要绑定事件，首先需要获得图表实例（Graph 实例），然后使用 on 方法…...
MongoDB根据时间范围查询
MongoDB 查询语句示例 1. 根据时间范围查询 db.getCollection(orders).find({"enabled":true,"$or": [{"endTime": {"$gt":ISODate("2023-10-18T14:45:17.69870008:00")}}, {"endTime": null}], "startTim…...
大数据Doris（十五）：Doris表的字段类型
文章目录 Doris表的字段类型 一、TINYINT数据类型 二、SMALLINT数据类型 三、INT数据类型...
文本批量处理，一键转换HTML文件编码，释放您的繁琐工作！
亲爱的用户，您是否曾经为需要手动转换HTML文件编码而耗费大量时间和精力而感到困扰？现在，我们为您提供了一款强大的文本批量处理工具！让您一键将HTML文件编码进行转换，轻松释放您的繁琐工作！ 首先…...
硬件工程师到底可以从哪些方面提升自己？
大家好，这里是大话硬件。 最近在大话硬件群里，聊得比较多的就是讨论怎么提升自己的能力，怎么拿到更高的工资。我想，这可能并不是只在大话硬件群才有的话题，其实在每一位工作的人心里应该都在想的两个问题。 因此，这篇文章简单分享一下，作为一名硬件工程师，可以在做哪…...
论文辅助笔记：t2vec models.py
1 EncoderDecoder 1.1 _init_ class EncoderDecoder(nn.Module):def __init__(self, vocab_size, embedding_size,hidden_size, num_layers, dropout, bidirectional):super(EncoderDecoder, self).__init__()self.vocab_size vocab_size #词汇表大小self.embedding_size e…...
R语言如何写一个爬虫代码模版
R语言爬虫是利用R语言中的网络爬虫包，如XML、RCurl、rvest等，批量自动将网页的内容抓取下来。在进行R语言爬虫之前，需要了解HTML、XML、JSON等网页语言，因为正是通过这些语言我们才能在网页中提取数据。 在爬虫过程中，…...
鸿运主动安全云平台任意文件下载漏洞复习
简介 深圳市强鸿电子有限公司鸿运主动安全监控云平台网页存在任意文件下载漏洞，攻击者可通过此漏洞下载网站配置文件等获得登录账号密码 漏洞复现 FOFA语法：body"./open/webApi.html" 获取网站数据库配置文件 POC：/808gps/Mobile…...
CMake基础【学习笔记（八）】
声明此博客为转载 CMake基础 文章目录 CMake基础一、准备知识1.1 C的编译过程1.2 静态链接库和动态链接库1.3 为什么需要CMake1.3.1 g 命令行编译1.3.2 CMake简介 二、CMake基础知识2.1 安装2.2 第一个CMake例子2.3 语法基础2.3.1 指定版本2.3.2 设置项目2.3.3 添加可执行文件…...
异常的学习
异常分为编译时期异常与运行时期异常 编译时期异常运行前必须处理，否则代码报错 除了RuntimeException和他的子类，其他都是编译时异常 运行时期异常运行时报错，一般是由参数传递错误导致的报错 异常的作用： 1.异常使用来查询b…...
【洛谷 P1101】单词方阵 题解（深度优先搜索）
单词方阵 题目描述 给一 n n n \times n nn 的字母方阵，内可能蕴含多个 yizhong 单词。单词在方阵中是沿着同一方向连续摆放的。摆放可沿着 8 8 8 个方向的任一方向，同一单词摆放时不再改变方向，单词与单词之间可以交叉，因此…...
教师减负神器
在传统的成绩管理模式中，教师需要手动输入、整理、分析成绩数据，工作量大且繁琐。这不仅耗费了教师大量的时间和精力，还容易出现错误。为了解决这个问题，我们可以通过各种代码和Excel来实现学生自助查询成绩的功能。 一、建立成绩…...
Web 开发之前的一些话
我主要是对单页面进行开发，因而VUEFlask的搭配足以满足我的需求； VUE Vue.js - 渐进式 JavaScript 框架 | Vue.js Element-UI Element - The worlds most popular Vue UI framework FLASK 欢迎来到 Flask 的世界 — Flask中文文档(2.3.x)...
git快速入门!!! git的常用命令!!!
git快速入门 git的常用命令1. 初始化一个新的 Git 仓库2. 添加文件到暂存区3. 提交更改4. 查看当前分支的状态5. 创建并切换到新的分支6. 切换回之前的分支7. 合并分支8. 拉取远程仓库的更新9. 推送本地仓库的更新 git remote -v是什么git fetchclone命令详解push指定的分支git…...
C++并发编程实战——01.并发与并行
文章目录 并发并行及其使用原因并发与并行使用与不使用并发的原因C多线程支持 并发并行及其使用原因 本书相关 github翻译地址本书源码下载地址第一版github 翻译地址英文原版PDF不错的笔记所有实例的源代码，可在出版商的网站上进行下载github上下载源码 路线图 …...
PLC如何远程控制、调试？贝锐蒲公英二层组网功能一招搞定
在制造、交通、能源、采矿等领域，工业物联网是热门话题，各类采集、控制器、控制传感器通过网络互联，实现信息实时共享、交互后，不仅能快速了解生产过程数据，还能用于设备远程、调试维护等场景，对优化生产过…...
【大数据】-- flink kubernetes operator 入门与实践
课程链接：https://edu.csdn.net/course/detail/38831 目录 课程链接：https://edu.csdn.net/course/detail/38831https://edu.csdn.net/course/detail/38831 一、你将收获...
网络安全在代理技术中的实现与应用
随着互联网技术的飞速发展，网络安全日益受到人们的重视。在这个背景下，代理技术成为了网络安全实现的重要手段之一。本文将针对 SOCKS5 代理、SK5 代理、IP 代理等代理技术，探讨它们在网络安全和爬虫应用中的重要性，并介绍 HTTP 协…...
conda相比python好处
Conda 作为 Python 的环境和包管理工具，相比原生 Python 生态（如 pip 虚拟环境）有许多独特优势，尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处： 一、一站式环境管理：…...
XCTF-web-easyupload
试了试php，php7，pht，phtml等，都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接，得到flag...
HTML 列表、表格、表单
1 列表标签 作用：布局内容排列整齐的区域 列表分类：无序列表、有序列表、定义列表。 例如： 1.1 无序列表 标签：ul 嵌套 li，ul是无序列表，li是列表条目。 注意事项： ul 标签里面只能包裹 li…...
定时器任务——若依源码分析
分析util包下面的工具类schedule utils： ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类，封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz，先构建任务的 JobD…...
[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址：pdf 英文是纯手打的！论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误，若有发现欢迎评论指正！文章偏向于笔记，谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...
1.3 VSCode安装与环境配置
进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件，然后打开终端，进入下载文件夹，键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...
Spring Boot+Neo4j知识图谱实战：3步搭建智能关系网络！
一、引言 在数据驱动的背景下，知识图谱凭借其高效的信息组织能力，正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合，探讨知识图谱开发的实现细节，帮助读者掌握该技术栈在实际项目中的落地方法。 …...
IT供电系统绝缘监测及故障定位解决方案
随着新能源的快速发展，光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域，IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选，但在长期运行中，例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...
实现弹窗随键盘上移居中
实现弹窗随键盘上移的核心思路 在Android中，可以通过监听键盘的显示和隐藏事件，动态调整弹窗的位置。关键点在于获取键盘高度，并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...
ArcGIS Pro制作水平横向图例+多级标注
今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作：ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等（ArcGIS出图图例8大技巧），那这次我们看看ArcGIS Pro如何更加快捷的操作。…...