html播放本地音乐
本地有多个音乐文件，想用 html 逐个播放，或循环播放，并设置初始音量。
audio
在 html 中播放音乐文件用 audio 标签：
controls启用控制按钮，如进度条、播放、音量、速度等。不加不显示任何 widget。autoplay理应启用自动播放，但浏览器似乎禁止自动播放，故目前没什么用。muted静音。
<!DOCTYPE html>
<html>
<body><audio controls autoplay><source src="C:/Users/tom/Music/Wonderful U - 张含韵.mp3" type="audio/mpeg">Failed.
</audio><br/><audio controls muted><source src="C:/Users/tom/Music/Sacred Play Secret Place - Matryoshka.m4a" type="audio/x-m4a">Failed.
</audio></body>
</html>
Set Volume Automatically
想在打开 html 文件时，自动设置某个音量，如 20%，而不是默认的最大声、或 muted 静音。用到 javascript：
class标记需要调音量的 audio；- 在
script内用 javascript 选中这些 audio，并设置其音量。
<!DOCTYPE html>
<body>
<!-- 用 `a` 标记需要自动校音量的 audio -->
<audio class="a" controls><source src="C:/Users/tom/Music/Wonderful U - 张含韵.mp3" type="audio/mpeg">Failed.
</audio>
<br/>
<audio class="a" controls><source src="C:/Users/tom/Music/Sacred Play Secret Place - Matryoshka.m4a" type="audio/x-m4a">Failed.
</audio><script>// 添加事件：加载时自动执行document.addEventListener("DOMContentLoaded", function() {var audioPlayers = document.querySelectorAll('.a'); // 根据 `a` 选 audio 元素audioPlayers.forEach(function(player) {player.volume = 0.2; // set initial volume});});
</script>
</body>
</html>
Play a List
有多个音乐文件，想顺序或循环播放它们，同样用 javascript 函数控制。
- 浏览器可能禁止未有交互就自动播放，故一开头要手动点播放，但后面可连播。
<!DOCTYPE html>
<body>
<!-- 放一个空 audio 元素 -->
<audio id="auto-audio" controls autoplay></audio><script>const path = 'C:/Users/tom/Music/'; // 音乐文件都在这个目录下const playlist = ['嗵嗵 - DOUDOU.mp3','我拿什么留住你 - FloruitShow 福禄寿.mp3','琢磨 - 许靖韵.mp3'];let currentTrack = 0; // 目前播放的文件下标const audioPlayer = document.getElementById('auto-audio');// 播放函数function playTrack(index) {audioPlayer.src = path + playlist[index]; // 完整路径audioPlayer.volume = 0.2; // 校音量audioPlayer.play().catch(error => {console.log("%cAutoplay prevented:", "color: red;", error);});}// 加载时执行document.addEventListener("DOMContentLoaded", function() {// 播放第一首（可能被浏览器阻止自动播放而失败）playTrack(currentTrack);// 添加事件：播放结束后自动放下一首audioPlayer.addEventListener('ended', function () {// 顺序播放if (currentTrack < playlist.length) {playTrack(currentTrack);}// 循环播放// currentTrack = (currentTrack + 1) % playlist.length;// playTrack(currentTrack);});});
</script>
</body>
</html>
References
- html用css grid实现自适应四宫格放视频
相关文章：
html播放本地音乐
本地有多个音乐文件，想用 html 逐个播放，或循环播放，并设置初始音量。 audio 在 html 中播放音乐文件用 audio 标签： controls 启用控制按钮，如进度条、播放、音量、速度等。不加不显示任何 widget。autoplay 理应启…...
Windows11下玩转 Docker
一、前提准备 WSL2：Windows 提供的一种轻量级 Linux 运行环境，具备完整的 Linux 内核，并支持更好的文件系统性能和兼容性。它允许用户在 Windows 系统中运行 Linux 命令行工具和应用程序，而无需安装虚拟机或双系统。Ubuntu 1.1 安…...
vLLM + Open-WebUI 本地私有化部署 DeepSeek-R1-Distill-Qwen-32B 方案
一、vLLM 部署 DeepSeek-R1-Distill-Qwen-32B DeepSeek-R1-Distill 系列模型是 DeepSeek-R1 的蒸馏模型，官方提供了从 1.5B - 70B 不同尺寸大小的模型。特别适合在计算资源有限的环境中部署。 DeepSeek-R1 各个版本的蒸馏模型评估结果如下： 其中 DeepS…...
【基础知识】回头看Maven基础
背景 项目过程中，对于Maven的pom.xml文件，很多时候，我通过各种参考、仿写，最终做出想要的效果。 但实际心里有些迷糊，不清楚具体哪个基础的配置所实现的效果。 今天，特意回过头来，了解Maven的基…...
在 MyBatis 中，若数据库字段名与 SQL 保留字冲突解决办法
在 MyBatis 中，若数据库字段名与 SQL 保留字冲突，可通过以下方法解决： 目录 一、使用转义符号包裹字段名二、通过别名映射三、借助 MyBatis-Plus 注解四、全局配置策略（辅助方案）最佳实践与注意事项 一、使用转义符号…...
docker-compose Install reranker(fastgpt支持) GPU模式
前言BGE-重新排名器 与 embedding 模型不同，reranker 或 cross-encoder 使用 question 和 document 作为输入，直接输出相似性而不是 embedding。 为了平衡准确性和时间成本，cross-encoder 被广泛用于对其他简单模型检索到的前 k 个文档进行重新排序。 例如，使用 bge 嵌入模…...
200W数据需要去重，如何优化？
优化去重逻辑的时间取决于多个因素，包括数据量、数据结构、硬件性能（CPU、内存）、去重算法的实现方式等。以下是对优化去重逻辑的详细分析和预期优化效果： 1. 去重逻辑的性能瓶颈 时间复杂度：使用HashSet去重的时间复…...
使用免费IP数据库离线查询IP归属地
一、准备工作 1.下载免费IP数据库 首先，访问 MaxMind官网（https://www.maxmind.com/en/home）如果你还没有MaxMind账号，可以通过此链接地址（https://www.maxmind.com/en/geolite2/signup）进行账号注册&…...
【游戏】【客户端性能测试】
待续… 一、 常见指标 1. 越高越好 FPS 2. 越低越好 网络流量CPU内存（PSS， momo）Drawcalls三角形数耗电量包体大小 二、 游戏体验 1. 直接体感 游戏花屏闪退卡顿延迟 2. 可能原因 内存超标Drawcall数量多FPS波动严重CPU占用高居不下…...
软考中级-数据库-3.3 数据结构-树
定义:树是n(n>=0)个结点的有限集合。当n=0时称为空树。在任一非空树中，有且仅有一个称为根的结点:其余结点可分为m(m>=0)个互不相交的有限集T1,T2,T3...,Tm…，其中每个集合又都是一棵树，并且称为根结点的子树。 树的相关概念 1、双亲、孩子和兄弟: 2、结点的度:一个结…...
typora高亮方案+鼠标侧键一键改色
引言 在typora里面有一个自定义的高亮, <mark></mark>>但是单一颜色就太难看了, 我使用人工智能, 搜索全网艺术家, 汇集了几种好看的格式,并且方便大家侧键一键 调用, 是不是太方便啦 ! 示例 午夜模式 春意盎然 深海蓝调 石墨文档 秋日暖阳 蜜桃宣言 使用方法 …...
【CSS】Tailwind CSS 与传统 CSS：设计理念与使用场景对比
1. 开发方式 1.1 传统 CSS 手写 CSS：你需要手动编写 CSS 规则，定义类名、ID 或元素选择器，并为每个元素编写样式。 分离式开发：HTML 和 CSS 通常是分离的，HTML 中通过类名或 ID 引用 CSS 文件中的样式。 示例&#…...
命令详解：vim)
Linux(Centos 7.6)命令详解：vim
1.命令作用 vi/vim 是Linux 系统内置不可或缺的文本编辑命令，vim 是vi 的加强版本，兼容vi 的所有指令，不仅能编辑文本，而且还具有shell 程序编辑的功能，可以不同颜色的字体来辨别语法的正确性。 2.命令语法 usage: …...
记录一次wifi版有人物联串口服务器调试经过
1、首先买了一个华为的wifi路由器，连接上以后，设置好网络名字和wifi密码 2、用网线连接串口服务器，通过192.168.1.1登录，进行配置 找到无线客户端配置，先在基本配置中打开5G配置，然后再去5.8G配置中设置 …...
QWQ大模型评测榜单
评测榜单说明 在数学推理基准AIME24上，QwQ-32B达到了79.5分，几乎与DeepSeek-R1-617B的79.8分持平，远超OpenAI o1-mini的63.6分，及相同尺寸的R1蒸馏模型。 在编程能力方面，QwQ-32B 在LiveCodeBench上获得了63.4分&…...
【CXX】5.4 属性
命名空间 顶层的 cxx::bridge 属性宏接受一个可选的命名空间参数，用于控制生成外部 Rust 项的 C 命名空间，以及期望找到外部 C 项的命名空间。 #[cxx::bridge(namespace "path::of::my::company")] mod ffi {extern "Rust" {type…...
 介绍及使用(序列化、json和结构体转换、协程)
c++雅兰亭库 (yalantinglibs) 介绍及使用(序列化、json和结构体转换、协程
c雅兰亭库 (yalantinglibs) 介绍及使用(序列化、json和结构体转换、协程)-CSDN博客 雅兰亭库(yalantinglibs)介绍 雅兰亭库，名字很优雅，也很强大。它是阿里开源的一个现代C基础工具库的集合, 现在包括 struct_pack, struct_json, struct_xml, struct_yam…...
3.6 登录认证
登录功能 登录思路 联调测试 登录校验 问题：在未登录情况下，我们也可以直接访问部门管理、员工管理等功能。 登录标记 用户登录成功之后，每一次请求中，都可以得到该标记。 统一拦截 过滤器Filter拦截器Interceptor 会话技术 会…...
宇树科技嵌入式面试题及参考答案（春晚机器人的公司）
目录 设计一个带看门狗（Watchdog）的嵌入式系统，描述故障恢复流程 在资源受限的 MCU 上实现 OTA 升级功能，描述关键设计点 如何实现 OTA（空中升级）功能？描述固件校验和回滚机制的设计要点 推挽输出与开漏输出的区别？举例说明其在 GPIO 控制中的应用 UART、SPI、I2C …...
Android 存储路径详解
内部存储空间中的应用私有目录（data/data/app package name） WebView 缓存页面信息，SharedPreferences 和 SQLiteDatabase 持久化应用相关数据等当用户卸载 App 时，系统自动删除 data/data 目录下对应包名的文件夹及其内容。getF…...
国防科技大学计算机基础课程笔记02信息编码
1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制，因此这个了16进制的数据既可以翻译成为这个机器码，也可以翻译成为这个国标码，所以这个时候很容易会出现这个歧义的情况； 因此，我们的这个国…...
Mybatis逆向工程，动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件
今天呢，博主的学习进度也是步入了Java Mybatis 框架，目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学，希望能对大家有所帮助，也特别欢迎大家指点不足之处，小生很乐意接受正确的建议&…...
Qt Widget类解析与代码注释
#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码，写上注释 当然可以！这段代码是 Qt …...
剑指offer20_链表中环的入口节点
链表中环的入口节点 给定一个链表，若其中包含环，则输出环的入口节点。 若其中不包含环，则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...
江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命
在华东塑料包装行业面临限塑令深度调整的背景下，江苏艾立泰以一场跨国资源接力的创新实践，重新定义了绿色供应链的边界。 跨国回收网络：废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点，将海外废弃包装箱通过标准…...
【SQL学习笔记1】增删改查+多表连接全解析（内附SQL免费在线练习工具）
可以使用Sqliteviz这个网站免费编写sql语句，它能够让用户直接在浏览器内练习SQL的语法，不需要安装任何软件。 链接如下： sqliteviz 注意： 在转写SQL语法时，关键字之间有一个特定的顺序，这个顺序会影响到…...
ETLCloud可能遇到的问题有哪些？常见坑位解析
数据集成平台ETLCloud，主要用于支持数据的抽取（Extract）、转换（Transform）和加载（Load）过程。提供了一个简洁直观的界面，以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...
VTK如何让部分单位不可见
最近遇到一个需求，需要让一个vtkDataSet中的部分单元不可见，查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行，是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示，主要是最后一个参数，透明度…...
QT3D学习笔记——圆台、圆锥
类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体（对象或容器）QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质（定义颜色、反光等）QFirstPersonC…...
安全突围：重塑内生安全体系：齐向东在2025年BCS大会的演讲
文章目录 前言第一部分：体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分：体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...