前端 用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 协…...
如何实现百度网盘下载加速？KinhDown让大文件传输效率倍增
如何实现百度网盘下载加速？KinhDown让大文件传输效率倍增 【免费下载链接】baidupcs-web 项目地址: https://gitcode.com/gh_mirrors/ba/baidupcs-web 还在忍受百度网盘的龟速下载吗？当你急需工作文件却被限制在几十KB/s的速度时，当重…...
QT控件自适应布局实战：从零到窗口响应式设计
1. QT控件自适应布局入门指南 第一次接触QT界面开发时，最让我头疼的就是窗口大小变化后控件乱成一团的问题。记得当时做的一个小工具，在笔记本上运行好好的，接到大显示器上所有按钮都挤在左上角，简直惨不忍睹。后来摸索出这套自适…...
解密GPT：从架构解析到实战应用
1. GPT架构深度拆解 第一次接触GPT模型时，我被它流畅的文本生成能力震撼到了。记得当时用GPT-2生成了一篇伪莎士比亚风格的十四行诗，连文学系的朋友都分不清真假。这种"魔法"背后，其实是精妙的架构设计在支撑。 GPT的核心是Transfo…...
LoRA训练助手效果展示：动漫风格迁移作品集
LoRA训练助手效果展示：动漫风格迁移作品集 1. 引言 你是否曾经想过，把自己拍摄的普通照片转换成新海诚风格的唯美画面，或者让日常场景拥有吉卜力工作室的梦幻质感？现在，这一切都不再是梦想。通过LoRA训练助手&#x…...
5个实战技巧深度解析：XUnity.AutoTranslator如何革新Unity游戏多语言体验
5个实战技巧深度解析：XUnity.AutoTranslator如何革新Unity游戏多语言体验 【免费下载链接】XUnity.AutoTranslator 项目地址: https://gitcode.com/gh_mirrors/xu/XUnity.AutoTranslator XUnity.AutoTranslator作为一款创新的开源实时翻译插件，为…...
元素偏析系数计算：从概念到实际应用
元素偏析系数计算(Pandat代算或自己操作) 实例32: 偏析系数k是指在熔体凝固过程中，溶质元素在固相和液相中浓度的比值。 通过计算偏析系数，可以预测在凝固过程中某一溶质元素的分布情况，从而帮助设计合金的微观组织结构。 偏析系数 k1 则倾向…...
【开题答辩全过程】以 基于JSP框架的医疗管理系统为例，包含答辩的问题和答案
个人简介一名14年经验的资深毕设内行人，语言擅长Java、php、微信小程序、Python、Golang、安卓Android等开发项目包括大数据、深度学习、网站、小程序、安卓、算法。平常会做一些项目定制化开发、代码讲解、答辩教学、文档编写、也懂一些降重方面的技巧。感谢大家的…...
华硕笔记本CPU过热？G-Helper降压调优终极指南帮你降温10℃
华硕笔记本CPU过热？G-Helper降压调优终极指南帮你降温10℃ 【免费下载链接】g-helper Lightweight Armoury Crate alternative for Asus laptops. Control tool for ROG Zephyrus G14, G15, G16, M16, Flow X13, Flow X16, TUF, Strix, Scar and other models 项目…...
STorM BGC V1.31硬件 + SimpleBGC源码：从零搭建三轴云台开发环境（含.Net框架避坑）
STorM BGC V1.31硬件 SimpleBGC源码：从零搭建三轴云台开发环境（含.Net框架避坑） 三轴云台作为稳定控制领域的经典应用，近年来在无人机、摄影设备、工业检测等领域展现出巨大潜力。STorM BGC V1.31硬件平台配合SimpleBGC开源架构&…...
)
评一个典型的“数学可视化 + 计算机图形学入门”的优秀案例(C++精灵库3D案例)
这份代码和视频展示了一个非常典型的“数学可视化 计算机图形学入门”的优秀案例。它不仅仅是一段能运行的代码，更是一个将抽象数学公式转化为直观视觉艺术的教学演示。 以下是对该程序及视频的多维度评论： 1. 技术实现与图形学原理 这段代码虽然简短…...