前端 用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 协…...
Python｜GIF 解析与构建（5）：手搓截屏和帧率控制
目录 Python｜GIF 解析与构建（5）：手搓截屏和帧率控制 一、引言 二、技术实现：手搓截屏模块 2.1 核心原理 2.2 代码解析：ScreenshotData类 2.2.1 截图函数：capture_screen 三、技术实现&…...
调用支付宝接口响应40004 SYSTEM_ERROR问题排查
在对接支付宝API的时候，遇到了一些问题，记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...
Leetcode 3576. Transform Array to All Equal Elements
Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接：3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到…...
React19源码系列之 事件插件系统
事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...
Caliper 配置文件解析：config.yaml
Caliper 是一个区块链性能基准测试工具，用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构，并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件，主要包含以下几个部…...
今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存
文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...
零基础在实践中学习网络安全-皮卡丘靶场（第九期-Unsafe Fileupload模块）（yakit方式）
本期内容并不是很难，相信大家会学的很愉快，当然对于有后端基础的朋友来说，本期内容更加容易了解，当然没有基础的也别担心，本期内容会详细解释有关内容 本期用到的软件：yakit（因为经过之前好多期…...
【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题
【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题 摘要： 近期，在使用较新版本的OpenSSH客户端连接老旧SSH服务器时，会遇到 "no matching key exchange method found", "n…...
Caliper 配置文件解析：fisco-bcos.json
config.yaml 文件 config.yaml 是 Caliper 的主配置文件，通常包含以下内容： test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...
MacOS下Homebrew国内镜像加速指南（2025最新国内镜像加速）
macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 🍺 最新版brew安装慢到怀疑人生？别怕，教你轻松起飞！ 最近Homebrew更新至最新版，每次执行 brew 命令时都会自动从官方地址 https://formulae.…...