前端 用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 协…...
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造,完美适配AGV和无人叉车。同时,集成以太网与语音合成技术,为各类高级系统(如MES、调度系统、库位管理、立库等)提供高效便捷的语音交互体验。 L…...
Linux应用开发之网络套接字编程(实例篇)
服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...
rknn优化教程(二)
文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK,开始写第二篇的内容了。这篇博客主要能写一下: 如何给一些三方库按照xmake方式进行封装,供调用如何按…...
vscode(仍待补充)
写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh? debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...
学校招生小程序源码介绍
基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码,专为学校招生场景量身打造,功能实用且操作便捷。 从技术架构来看,ThinkPHP提供稳定可靠的后台服务,FastAdmin加速开发流程,UniApp则保障小程序在多端有良好的兼…...
测试markdown--肇兴
day1: 1、去程:7:04 --11:32高铁 高铁右转上售票大厅2楼,穿过候车厅下一楼,上大巴车 ¥10/人 **2、到达:**12点多到达寨子,买门票,美团/抖音:¥78人 3、中饭&a…...
多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验
一、多模态商品数据接口的技术架构 (一)多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如,当用户上传一张“蓝色连衣裙”的图片时,接口可自动提取图像中的颜色(RGB值&…...
【2025年】解决Burpsuite抓不到https包的问题
环境:windows11 burpsuite:2025.5 在抓取https网站时,burpsuite抓取不到https数据包,只显示: 解决该问题只需如下三个步骤: 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...
WEB3全栈开发——面试专业技能点P2智能合约开发(Solidity)
一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解,适合用作学习或写简历项目背景说明。 🧠 一、概念简介:Solidity 合约开发 Solidity 是一种专门为 以太坊(Ethereum)平台编写智能合约的高级编…...
零基础设计模式——行为型模式 - 责任链模式
第四部分:行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习!行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想:使多个对象都有机会处…...
