当前位置： 首页 > news >正文

html播放本地音乐

news 2026/2/7 12:25:13

本地有多个音乐文件，想用 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

  1. html用css grid实现自适应四宫格放视频

相关文章：

html播放本地音乐

本地有多个音乐文件&#xff0c;想用 html 逐个播放&#xff0c;或循环播放&#xff0c;并设置初始音量。 audio 在 html 中播放音乐文件用 audio 标签&#xff1a; controls 启用控制按钮&#xff0c;如进度条、播放、音量、速度等。不加不显示任何 widget。autoplay 理应启…...

编程日记 2025/3/8 20:12:44

Windows11下玩转 Docker

一、前提准备 WSL2&#xff1a;Windows 提供的一种轻量级 Linux 运行环境&#xff0c;具备完整的 Linux 内核&#xff0c;并支持更好的文件系统性能和兼容性。它允许用户在 Windows 系统中运行 Linux 命令行工具和应用程序&#xff0c;而无需安装虚拟机或双系统。Ubuntu 1.1 安…...

编程日记 2025/3/8 20:10:41

vLLM + Open-WebUI 本地私有化部署 DeepSeek-R1-Distill-Qwen-32B 方案

一、vLLM 部署 DeepSeek-R1-Distill-Qwen-32B DeepSeek-R1-Distill 系列模型是 DeepSeek-R1 的蒸馏模型&#xff0c;官方提供了从 1.5B - 70B 不同尺寸大小的模型。特别适合在计算资源有限的环境中部署。 DeepSeek-R1 各个版本的蒸馏模型评估结果如下&#xff1a; 其中 DeepS…...

编程日记 2025/3/8 20:08:38

【基础知识】回头看Maven基础

背景 项目过程中&#xff0c;对于Maven的pom.xml文件&#xff0c;很多时候&#xff0c;我通过各种参考、仿写&#xff0c;最终做出想要的效果。 但实际心里有些迷糊&#xff0c;不清楚具体哪个基础的配置所实现的效果。 今天&#xff0c;特意回过头来&#xff0c;了解Maven的基…...

编程日记 2025/3/8 20:03:33

在 MyBatis 中，若数据库字段名与 SQL 保留字冲突解决办法

在 MyBatis 中&#xff0c;若数据库字段名与 SQL 保留字冲突&#xff0c;可通过以下方法解决&#xff1a; 目录 一、使用转义符号包裹字段名二、通过别名映射三、借助 MyBatis-Plus 注解四、全局配置策略&#xff08;辅助方案&#xff09;最佳实践与注意事项 一、使用转义符号…...

编程日记 2025/3/8 20:00:29

docker-compose Install reranker(fastgpt支持) GPU模式

前言BGE-重新排名器 与 embedding 模型不同，reranker 或 cross-encoder 使用 question 和 document 作为输入，直接输出相似性而不是 embedding。 为了平衡准确性和时间成本，cross-encoder 被广泛用于对其他简单模型检索到的前 k 个文档进行重新排序。 例如，使用 bge 嵌入模…...

编程日记 2025/3/8 19:58:26

200W数据需要去重，如何优化？

优化去重逻辑的时间取决于多个因素&#xff0c;包括数据量、数据结构、硬件性能&#xff08;CPU、内存&#xff09;、去重算法的实现方式等。以下是对优化去重逻辑的详细分析和预期优化效果&#xff1a; 1. 去重逻辑的性能瓶颈 时间复杂度&#xff1a;使用HashSet去重的时间复…...

编程日记 2025/3/8 19:54:23

使用免费IP数据库离线查询IP归属地

一、准备工作 1.下载免费IP数据库 首先&#xff0c;访问 MaxMind官网&#xff08;https://www.maxmind.com/en/home&#xff09;如果你还没有MaxMind账号&#xff0c;可以通过此链接地址&#xff08;https://www.maxmind.com/en/geolite2/signup&#xff09;进行账号注册&…...

编程日记 2025/3/8 19:52:21

【游戏】【客户端性能测试】

待续… 一、 常见指标 1. 越高越好 FPS 2. 越低越好 网络流量CPU内存&#xff08;PSS&#xff0c; momo&#xff09;Drawcalls三角形数耗电量包体大小 二、 游戏体验 1. 直接体感 游戏花屏闪退卡顿延迟 2. 可能原因 内存超标Drawcall数量多FPS波动严重CPU占用高居不下…...

编程日记 2025/3/8 19:48:17

软考中级-数据库-3.3 数据结构-树

定义:树是n(n>=0)个结点的有限集合。当n=0时称为空树。在任一非空树中，有且仅有一个称为根的结点:其余结点可分为m(m>=0)个互不相交的有限集T1,T2,T3...,Tm…，其中每个集合又都是一棵树，并且称为根结点的子树。 树的相关概念 1、双亲、孩子和兄弟: 2、结点的度:一个结…...

编程日记 2025/3/8 19:47:15

typora高亮方案+鼠标侧键一键改色

引言 在typora里面有一个自定义的高亮, <mark></mark>>但是单一颜色就太难看了, 我使用人工智能, 搜索全网艺术家, 汇集了几种好看的格式,并且方便大家侧键一键 调用, 是不是太方便啦 ! 示例 午夜模式 春意盎然 深海蓝调 石墨文档 秋日暖阳 蜜桃宣言 使用方法 …...

编程日记 2025/3/8 19:46:14

【CSS】Tailwind CSS 与传统 CSS：设计理念与使用场景对比

1. 开发方式 1.1 传统 CSS 手写 CSS&#xff1a;你需要手动编写 CSS 规则&#xff0c;定义类名、ID 或元素选择器&#xff0c;并为每个元素编写样式。 分离式开发&#xff1a;HTML 和 CSS 通常是分离的&#xff0c;HTML 中通过类名或 ID 引用 CSS 文件中的样式。 示例&#…...

编程日记 2025/3/8 19:45:13

Linux(Centos 7.6)命令详解：vim

1.命令作用 vi/vim 是Linux 系统内置不可或缺的文本编辑命令&#xff0c;vim 是vi 的加强版本&#xff0c;兼容vi 的所有指令&#xff0c;不仅能编辑文本&#xff0c;而且还具有shell 程序编辑的功能&#xff0c;可以不同颜色的字体来辨别语法的正确性。 2.命令语法 usage: …...

编程日记 2025/3/8 19:41:08

记录一次wifi版有人物联串口服务器调试经过

1、首先买了一个华为的wifi路由器&#xff0c;连接上以后&#xff0c;设置好网络名字和wifi密码 2、用网线连接串口服务器&#xff0c;通过192.168.1.1登录&#xff0c;进行配置 找到无线客户端配置&#xff0c;先在基本配置中打开5G配置&#xff0c;然后再去5.8G配置中设置 …...

编程日记 2025/3/8 19:38:05

QWQ大模型评测榜单

评测榜单说明 在数学推理基准AIME24上&#xff0c;QwQ-32B达到了79.5分&#xff0c;几乎与DeepSeek-R1-617B的79.8分持平&#xff0c;远超OpenAI o1-mini的63.6分&#xff0c;及相同尺寸的R1蒸馏模型。 在编程能力方面&#xff0c;QwQ-32B 在LiveCodeBench上获得了63.4分&…...

编程日记 2025/3/8 19:29:57

【CXX】5.4 属性

命名空间 顶层的 cxx::bridge 属性宏接受一个可选的命名空间参数&#xff0c;用于控制生成外部 Rust 项的 C 命名空间&#xff0c;以及期望找到外部 C 项的命名空间。 #[cxx::bridge(namespace "path::of::my::company")] mod ffi {extern "Rust" {type…...

编程日记 2025/3/8 19:26:53

c++雅兰亭库 (yalantinglibs) 介绍及使用(序列化、json和结构体转换、协程

c雅兰亭库 (yalantinglibs) 介绍及使用(序列化、json和结构体转换、协程)-CSDN博客 雅兰亭库(yalantinglibs)介绍 雅兰亭库&#xff0c;名字很优雅&#xff0c;也很强大。它是阿里开源的一个现代C基础工具库的集合, 现在包括 struct_pack, struct_json, struct_xml, struct_yam…...

编程日记 2025/3/8 19:21:47

3.6 登录认证

登录功能 登录思路 联调测试 登录校验 问题&#xff1a;在未登录情况下&#xff0c;我们也可以直接访问部门管理、员工管理等功能。 登录标记 用户登录成功之后&#xff0c;每一次请求中&#xff0c;都可以得到该标记。 统一拦截 过滤器Filter拦截器Interceptor 会话技术 会…...

编程日记 2025/3/8 19:20:44

宇树科技嵌入式面试题及参考答案（春晚机器人的公司）

目录 设计一个带看门狗（Watchdog）的嵌入式系统，描述故障恢复流程 在资源受限的 MCU 上实现 OTA 升级功能，描述关键设计点 如何实现 OTA（空中升级）功能？描述固件校验和回滚机制的设计要点 推挽输出与开漏输出的区别？举例说明其在 GPIO 控制中的应用 UART、SPI、I2C …...

编程日记 2025/3/8 19:14:39

Android 存储路径详解

内部存储空间中的应用私有目录&#xff08;data/data/app package name&#xff09; WebView 缓存页面信息&#xff0c;SharedPreferences 和 SQLiteDatabase 持久化应用相关数据等当用户卸载 App 时&#xff0c;系统自动删除 data/data 目录下对应包名的文件夹及其内容。getF…...

编程日记 2025/3/8 19:11:36

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

编程新知 2026/1/26 20:39:53

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

编程新知 2026/1/24 10:07:40

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

编程新知 2026/1/29 3:35:37

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

编程新知 2025/11/20 14:26:29

关于 WASM：1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么&#xff1f; WebAssembly&#xff08;WASM&#xff09; 是一种能在现代浏览器中高效运行的二进制指令格式&#xff0c;它不是传统的编程语言&#xff0c;而是一种 低级字节码格式&#xff0c;可由高级语言&#xff08;如 C、C、Rust&am…...

编程新知 2025/11/19 10:53:07

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

编程新知 2026/2/6 17:10:42

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

编程新知 2026/2/5 6:28:09

学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

编程新知 2026/2/3 2:10:25

AirSim/Cosys-AirSim 游戏开发（四）外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机&#xff0c;因为在使用过程中发现 Airsim 对外部监控相机的描述模糊&#xff0c;而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置&#xff0c;最后在源码示例中找到了&#xff0c;所以感…...

编程新知 2026/2/5 18:58:39

第7篇：中间件全链路监控与 SQL 性能分析实践

7.1 章节导读 在构建数据库中间件的过程中&#xff0c;可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中&#xff0c;必须做到&#xff1a; &#x1f50d; 追踪每一条 SQL 的生命周期&#xff08;从入口到数据库执行&#xff09;&#…...

编程新知 2025/12/11 0:27:15