前端 用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 协…...
Flask RESTful 示例
目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题： 下面创建一个简单的Flask RESTful API示例。首先，我们需要创建环境，安装必要的依赖，然后…...
深入理解JavaScript设计模式之单例模式
目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式（Singleton Pattern&#…...
五年级数学知识边界总结思考-下册
目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解：由来、作用与意义**一、知识点核心内容****二、知识点的由来：从生活实践到数学抽象****三、知识的作用：解决实际问题的工具****四、学习的意义：培养核心素养…...
涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战
“🤖手搓TuyaAI语音指令 😍秒变表情包大师，让萌系Otto机器人🔥玩出智能新花样！开整！” 🤖 Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制（TuyaAI…...
爬虫基础学习day2
# 爬虫设计领域 工商：企查查、天眼查短视频：抖音、快手、西瓜 ---> 飞瓜电商：京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空：抓取所有航空公司价格 ---> 去哪儿自媒体：采集自媒体数据进…...
ArcGIS Pro制作水平横向图例+多级标注
今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作：ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等（ArcGIS出图图例8大技巧），那这次我们看看ArcGIS Pro如何更加快捷的操作。…...
.Net Framework 4/C# 关键字（非常用，持续更新...）
一、is 关键字 is 关键字用于检查对象是否于给定类型兼容，如果兼容将返回 true，如果不兼容则返回 false，在进行类型转换前，可以先使用 is 关键字判断对象是否与指定类型兼容，如果兼容才进行转换，这样的转换是安全的。 例如有：首先创建一个字符串对象，然后将字符串对象隐…...
免费PDF转图片工具
免费PDF转图片工具 一款简单易用的PDF转图片工具，可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件，也不需要在线上传文件，保护您的隐私。 工具截图 主要特点 🚀 快速转换：本地转换，无需等待上…...
Chromium 136 编译指南 Windows篇：depot_tools 配置与源码获取（二）
引言 工欲善其事，必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后，我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集，就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...
Bean 作用域有哪些？如何答出技术深度？
导语： Spring 面试绕不开 Bean 的作用域问题，这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开，结合典型面试题及实战场景，帮你厘清重点，打破模板式回答，…...