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

js实现点击音频实现播放功能

news 来源：原创 2025/5/9 15:11:28

1. HTML 部分：音频播放控件

2. CSS 部分：样式设置

3. JavaScript 部分：音频控制

播放和暂停音频：

倒计时更新：

播放结束后自动暂停：

4. 总结：

完整代码：

今天通过 HTML、CSS 和 JavaScript 模拟一个简易的音频播放器。它使用了基本的音频控制逻辑，并结合 jQuery 来管理用户的交互。让我们来详细解读这段代码。

1. HTML 部分：音频播放控件

首先，我们的 HTML 结构非常简单，它包含一个带有播放按钮和时间显示的 <div> 元素。

<div class="audioDiv" id="playButton"><img src="./img/yuyin.png" alt="播放图标" /><p id="countdown">4:31</p><p id="bofang">播放录音</p>
</div>

<div class="audioDiv" id="playButton">: 这是外部容器，采用了 flex 布局，保证了内容在水平方向上居中对齐，并且背景色是浅灰色。这个容器用来显示音频播放控件。
<img src="./img/yuyin.png" alt="播放图标" />: 这是播放按钮，显示一个播放图标。它会作为按钮，用户点击它时会触发音频的播放。
<p id="countdown">4:31</p>: 用来显示音频剩余时间的倒计时。初始值为 4 分 31 秒，即音频的总时长。
<p id="bofang">播放录音</p>: 这是文本提示，表明这个按钮的功能是播放录音。

2. CSS 部分：样式设置

CSS 主要负责设置播放器的外观和布局。通过以下样式，确保了播放器的基本功能和用户体验：

.audioDiv {display: flex;align-items: center;width: 204px;height: 29px;background-color: #a0a0a0;border-radius: 9px;padding: 10px;cursor: pointer;
}

display: flex 让内部元素（图标、倒计时和文本）水平排列并居中。
background-color: #a0a0a0 设置播放器背景色为灰色，给人简洁的视觉效果。
border-radius: 9px 使播放器的边缘呈圆角。

此外，按钮的样式（包括图片大小、文本的显示等）都确保了控件的清晰和简洁。

3. JavaScript 部分：音频控制

JavaScript 是实现音频播放功能的核心部分。在这里，我们通过 jQuery 处理了音频播放和倒计时的更新。以下是关键逻辑：

播放和暂停音频：

当用户点击播放按钮时，如果音频尚未播放（audioStatus === true），我们会调用 audio.play() 开始播放音频，同时启动倒计时。
如果音频正在播放（audioStatus === false），则暂停音频，并重置倒计时为初始状态（4:31）。

倒计时更新：

function player() {let m = 4;let s = 31;times = setInterval(function() {if (s < 10) {$('#countdown').html(m + ':0' + s);} else {$('#countdown').html(m + ':' + s);}s--;if (s < 0) {s = 59;m--;}}, 1000);
}

我们使用 setInterval 每秒更新倒计时。初始时设定倒计时为 4 分 31 秒，并逐秒减少。
当秒数小于 10 时，倒计时格式会是 4:09 这样，而不是 4:9，确保时间格式一致。

播放结束后自动暂停：

setTimeout(function() {audio.currentTime = 0;audio.pause();$('#countdown').html('4:31');audioStatus = true;
}, 271000);

setTimeout 在音频播放完毕后会将音频暂停，并重置倒计时显示为初始状态。

4. 总结：

这段代码实现了一个基本的音频播放器界面，并添加了自定义的倒计时功能。当用户点击播放按钮时，音频将开始播放，同时倒计时更新。通过清晰简洁的设计，用户可以随时了解音频的播放进度，并控制播放/暂停。这个小项目展示了如何使用 HTML、CSS 和 JavaScript 来实现一个自定义音频控件，并提供了一些交互和视觉反馈。

这个功能可以在许多应用场景中使用，如学习平台、在线课程、音频播客等，提升用户的互动体验。

完整代码：

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="http://www.yourdomain.com/js/jquery-3.7.1.min.js"></script><style>/* 模拟audio标签的样式 */.audioDiv {display: flex;align-items: center;width: 204px;height: 29px;background-color: #a0a0a0;border-radius: 9px;padding: 10px;cursor: pointer;}/* 播放按钮 */#playButton img {width: 30px;height: 30px;cursor: pointer;}/* 时间显示 */#countdown {margin-left: 10px;font-size: 14px;width: 45px;}/* 播放文本 */#bofang {font-size: 14px;color: #333;margin-left: 10px;}/* 控制器样式 */#playButton:hover {opacity: 0.8;}</style></head><body><div class="audioDiv" id="playButton"><img src="./img/yuyin.png" alt="播放图标" /><p id="countdown">4:31</p><p id="bofang">播放录音</p></div><script>let audio = new Audio('./img/道姑朋友.mp3');//音频自己本地插入let audioStatus = true;let times;// 播放录音功能$('#playButton').on('click', function() {if (audioStatus === true) {audio.play();player();audioStatus = false;} else {audio.currentTime = 0;audio.pause();clearInterval(times);$('#countdown').html('4:31');audioStatus = true;}setTimeout(function() {audio.currentTime = 0;audio.pause();$('#countdown').html('4:31');audioStatus = true;}, 271000); // 播放完后暂停（4分钟31秒）});function player() {let m = 4;let s = 31;times = setInterval(function() {if (s < 10) {// 如果秒数少于10，在前面加上0$('#countdown').html(m + ':0' + s);} else {$('#countdown').html(m + ':' + s);}s--;if (s < 0) {// 如果秒数少于0，就变成59秒s = 59;m--;}}, 1000);}</script></body>
</html>

js实现点击音频实现播放功能

目录 1. HTML 部分：音频播放控件 2. CSS 部分：样式设置 3. JavaScript 部分：音频控制播放和暂停音频： 倒计时更新： 播放结束后自动暂停： 4. 总结： 完整代码： 今天通过 HTML…...

编程日记 2025/5/9 15:11:28

Ubuntu安装docker：docker-desktop : 依赖: docker-ce-cli 但无法安装它、无法定位软件包 docker-ce-cli

具体错误 sudo apt-get install ./docker-desktop-amd64.deb [sudo] password for weiyu: 正在读取软件包列表... 完成正在分析软件包的依赖关系树... 完成正在读取状态信息... 完成注意，选中 docker-desktop 而非 ./docker-desktop-amd64.de…...

编程日记 2025/5/6 0:27:45

免费deepseek的API获取教程及将API接入word或WPS中

免费deepseek的API获取教程: 1 https://cloud.siliconflow.cn/中注册时填写邀请码：GAejkK6X即可获取2000 万 Tokens; 2 按照图中步骤进行操作将API接入word或WPS中 1 打开一个word，文件-选项-自定义功能区-勾选开发工具-左侧的信任中心-信任中心设置…...

编程日记 2025/5/9 14:48:04

华为交换机堆叠配置

华为交换机堆叠（Stack）技术是一种将多台物理交换机虚拟化为单一逻辑设备的高可靠性解决方案，可简化网络管理、提升带宽利用率并增强冗余能力。一、堆叠的核心概念堆叠系统组成：主交换机（Master）&#xf…...

编程日记 2025/5/9 14:00:40

基于Java SpringBoot以及vue前后端分离的旅游景区网站系统设计与实现

基于Java SpringBoot以及vue前后端分离的旅游景区网站系统设计与实现本项目是一款基于Spring Boot和Vue.js开发的旅游景区管理系统，前端合后端的架构，支持用户在线浏览景区信息、预订门票，并提供完善的后台管理功能，包括订单管理…...

编程日记 2025/5/9 13:38:09

DeepSeek教unity------MessagePack-04

Union 联合 MessagePack for C# 支持序列化接口类型和抽象类类型的对象。它的行为类似于 XmlInclude 或 ProtoInclude。在 MessagePack for C# 中，这些被称为Union。只有接口和抽象类可以被 Union 属性注解。需要唯一的联合键。 /******************************…...

编程日记 2025/5/9 13:52:41

侯捷 C++ 课程学习笔记：C++ 新标准 11/14 的革新与实战应用

在侯捷老师的 C 系列课程中，《C 新标准 11/14》这门课程让我对现代 C 编程有了全新的认识。C11 和 C14 是 C 语言发展史上的重要里程碑，它们引入了大量新特性，极大地提升了语言的表达能力和开发效率。侯捷老师通过深入浅出的讲解和丰富的实战…...

编程日记 2025/5/8 16:17:38

MATLAB图像处理：Sobel、Roberts、Canny等边缘检测算子

边缘是图像中像素值剧烈变化的区域，反映了目标的轮廓、纹理等关键信息。边缘检测是图像分割、目标识别等任务的基础。本文将系统解析六种经典边缘检测算子的数学原理、实现方法及适用场景，并给出完整的MATLAB代码示例和对比分析。 1. 边缘检测基础 1…...

编程日记 2025/5/9 14:33:49

Python Pandas（7）：Pandas 数据清洗

数据清洗是对一些没有用的数据进行处理的过程。很多数据集存在数据缺失、数据格式错误、错误数据或重复数据的情况，如果要使数据分析更加准确，就需要对这些没有用的数据进行处理。数据清洗与预处理的常见步骤： 缺失值处理：识别并…...

编程日记 2025/5/9 14:20:47

基于javaweb的SpringBootoa办公自动化系统设计和实现(源码+文档+部署讲解）

🎬 秋野酱：《个人主页》 🔥 个人专栏:《Java专栏》《Python专栏》 ⛺️心若有所向往,何惧道阻且长文章目录运行环境开发工具适用功能说明部分代码展示运行环境 Java≥8、MySQL≥5.7 开发工具 eclipse/idea/myeclipse/sts等均可配置运行…...

编程日记 2025/5/6 6:33:13

算法08-递归调用转为循环的通用方法

前导：问题引入在Python中，递归调用过多会导致“递归深度过深”的错误，通常是因为递归没有正确终止条件或者递归层次太深。这种错误通常会导致程序抛出 RecursionError 异常。 Python默认的递归深度限制大约是1000层（可以通过sys.getrecursionlimit()查看）。修正方式…...

编程日记 2025/5/5 12:20:57

[qt5学习笔记]用vs2022(msvc2017)+copilot进行QtWidgetsApplication源码解析

一直没深入了解qt，又一段时间没写qt，重新捡起来。开发环境本地vs2022(msvc2017, v14.30)先升级到最新版本，方便使用copilot。参考 VS2022QT5环境搭建下载 qt5.14.2 用vs的qt插件设置qt5.14.2x86路径，x64版本未安装。创建一…...

编程日记 2025/5/9 7:51:32

Nginx--日志（介绍、配置、日志轮转）

前言：本博客仅作记录学习使用，部分图片出自网络，如有侵犯您的权益，请联系删除一、Nginx日志介绍 nginx 有一个非常灵活的日志记录模式，每个级别的配置可以有各自独立的访问日志, 所需日志模块 ngx_http_log_module 的…...

编程日记 2025/5/9 14:47:12

Transformer 模型介绍（一）——综述

Transformer 是一种完全基于注意力机制的神经网络模型，首次在2017年的论文《Attention Is All You Need》中提出。该模型最初用于机器翻译任务，并在特定任务中表现优于谷歌的其他神经网络机器翻译模型。Transformer 也是 Seq2Seq（序列到序列&…...

编程日记 2025/5/9 14:34:39

squid版本维护年限 apt install -y cephadmecho >> "deb http://mirrors.163.com/ceph/debian-squid/ bookworm main" echo >> "deb-src http://mirrors.163.com/ceph/debian-squid/ bookworm main"#安装源 cephadm install #开始初始化一个最…...

编程日记 2025/5/7 0:32:03

封装neo4j的持久层和服务层

目录持久层 mp 模仿： 1.抽取出通用的接口类 2.创建自定义的repository接口服务层 mp 模仿： 1.抽取出一个IService通用服务类 2.创建ServiceImpl类实现IService接口 3.自定义的服务接口 4.创建自定义的服务类工厂模式为什么可以使用工厂…...

编程日记 2025/5/9 15:07:09

HTML 简介

1.什么是 HTML？ 超文本：暂且简单理解为 “超级的文本”，和普通文本比，内容更丰富。标记：文本要变成超文本，就需要用到各种标记符号。语言：每一个标记的写法、读音、使用规则&#xff0c…...

编程日记 2025/5/9 14:00:40

【AWS】EC2 安全组设置

在使用 Amazon Web Services (AWS) 的 EC2 实例时，很多用户会遇到关于安全组设置的问题，尤其是在创建或修改安全组时输入描述信息时。最近，有一个常见的错误是当用户在 EC2 安全组配置中添加描述时，使用了中文字符，…...

编程日记 2025/5/6 10:29:03

git bisect 使用二分法查找引入错误的提交

git bisect 使用二分法查找引入错误的提交 Git bisect 命令官方文档 git bisect 这个命令使用二分搜索算法来查找项目历史中哪个提交引入了一个错误使用该命令时，首先告诉它一个已知包含错误的 “坏” 提交以及一个已知在错误出现之前的 “好” 提交然后 git b…...

编程日记 2025/5/9 14:45:21

STM32 Flash详解教程文章

目录 Flash基本概念理解 Flash编程接口FPEC Flash擦除/写入流程图 Flash选项字节基本概念理解 Flash电子签名函数读取地址下存放的数据 Flash的数据处理限制部分编写不易，请勿搬运，感谢理解！！！ Flash基本概念…...

编程日记 2025/5/9 13:58:47

业务开发 | 基础知识 | Maven 快速入门

Maven 快速入门 1.Maven 全面概述 Apache Maven 是一种软件项目管理和理解工具。基于项目对象模型的概念（POM），Maven 可以从中央信息中管理项目的构建，报告和文档。 2.Maven 基本功能因此实际上 Maven 的基本功能就是作为 Ja…...

编程日记 2025/5/6 8:05:55

Python实现从SMS-Activate平台，自动获取手机号和验证码（进阶版2.0）

前言本文是该专栏的第52篇，后面会持续分享python的各种干货知识，值得关注。在本专栏之前，笔者在文章《Python实现SMS-Activate接口调用，获取手机号和验证码》中，有详细介绍基于SMS-Activate平台，通过python来实现自动获取目标国家的手机号以及对应的手机号验证码。而…...

编程日记 2025/5/9 14:13:28

网络安全 | 安全信息与事件管理（SIEM）系统的选型与实施

网络安全 | 安全信息与事件管理（SIEM）系统的选型与实施一、前言二、SIEM 系统的功能概述2.1 数据收集与整合2.2 实时监控与威胁检测2.3 事件响应与自动化2.4 合规性管理三、SIEM 系统选型的关键因素3.1 功能需求评估3.2 可扩展性与性能3.3 易用性与可维…...

编程日记 2025/5/8 21:57:25

解决DeepSeek服务器繁忙问题

目录解决DeepSeek服务器繁忙问题一、用户端即时优化方案二、高级技术方案三、替代方案与平替工具（最推荐简单好用） 四、系统层建议与官方动态用加速器本地部署DeepSeek 使用加速器本地部署DeepSeek的完整指南一、核心原理与工具选择二、…...

编程日记 2025/5/9 13:41:24

node.js+兰空图床实现随机图

之前博客一直用的公共的随机图API，虽然图片的质量都挺不错的，但是稳定性都比较一般，遂打算使用之前部署的兰空图床，自己弄一个随机图本文章服务器操作基于雨云——新一代云服务提供商的云服务器进行操作，有兴趣的话可…...

编程日记 2025/5/9 14:37:32

DeepSeek vs ChatGPT：AI对决中的赢家是……人类吗？

DeepSeek vs ChatGPT：AI对决中的赢家是……人类吗？ 文章目录 DeepSeek vs ChatGPT：AI对决中的赢家是……人类吗？一、引言1. 背景2. 问题二、DeepSeek vs ChatGPT：谁更胜一筹？2.1 语言生成能力评测对比场景…...

编程日记 2025/5/8 21:04:11

mac搭建环境

从0-1搭建mac环境先查看自己的芯片信息 bash uname -mbash-3.2$ uname -m arm64这里是自己的型号安装brew xcode-select --install xcode-select -p /bin/zsh -c “$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)” source /Users/lanren/.…...

编程日记 2025/5/9 14:47:12

【R语言】t检验

一、基本介绍 t检验（t-test）是用于比较两个样本均值是否存在显著差异的一种统计方法。 t.test()函数的调用格式： t.test(x, yNULL, alternativec("two.sided", "less", "greater"), mu0, pairFALSE, var.eq…...

编程日记 2025/5/9 14:50:37

尚硅谷爬虫note005

一、编解码 1.get请求的quote方法将汉字转为Unicode字符 # _*_ coding : utf-8 _*_ # Time : 2025/2/12 16:33 # Author : 20250206-里奥 # File : demo19_get请求的quote方法 # Project : PythonProject10-14# 景甜page # https://www.baidu.com/s?ieutf-8&f8&rsv…...

编程日记 2025/5/9 6:47:00

词袋模型和词嵌入模型区别和关联分析（词袋模型是否属于词嵌入模型）

词袋模型（Bag of Words, BoW）不属于词嵌入模型，它们是两种完全不同的文本表示方法。以下从多个维度对比二者的核心区别 1. 本质区别特性词袋模型 (BoW)词嵌入模型 (Word Embedding)表示形式离散的稀疏向量（高维，维度…...

编程日记 2025/5/9 13:50:58

借用python 学习 VM的 FTP(VisionMaster4.3)

无懒不python:看官方V社区有介绍: 需要安装 Quick Easy FTP Server V4.0.0.exe 为了表示敬意再次放出链接: V社区-机器智能技术交流-VM关于FTP存图的一点分享好了VM先放一边先用python自收自发: 毕竟这个免费 FTP服务端: 0.ftpserver.py 需要安装的库和注意事项已经在…...

编程日记 2025/5/8 4:38:53

BDD风格测试

BDD风格测试（Behavior-Driven Development） BDD（行为驱动开发）是一种以自然语言描述系统行为的测试方法论，强调团队协作与业务价值验证。结合Mockito的BDD风格API，可以编写更符合业务场景描述、更易读的测…...

编程日记 2025/5/6 19:58:08

[免费]Springboot+Vue医疗(医院)挂号管理系统【论文+源码+SQL脚本】

大家好，我是java1234_小锋老师，看到一个不错的SpringbootVue医疗(医院)挂号管理系统，分享下哈。项目视频演示【免费】SpringBootVue医疗(医院)挂号管理系统 Java毕业设计_哔哩哔哩_bilibili 项目介绍在如今社会上，关于信息上…...

编程日记 2025/5/9 15:06:18

Linux 查看磁盘中的大文件

在 Linux 系统中，你可以使用以下方法来查看磁盘中的大文件信息： 1. 使用 find 命令 find 命令可以递归查找指定目录下的大文件。 find /path/to/directory -type f -size 100M -exec ls -lh {} \;/path/to/directory：要查找的目录路径&…...

编程日记 2025/5/9 14:53:16

浅识MQ的 Kafka、ActiveMQ、RabbitMQ、RocketMQ区别

DeepSeek回复： 以下是主流消息队列（MQ）的对比分析，结合核心特性、适用场景和实际案例说明： 一、主流MQ对比分析维度 Kafka RabbitMQ RocketMQ ActiveMQ所属公司Apache（LinkedIn开源）…...

编程日记 2025/5/9 14:22:32

君海游戏岗位，需要私我

游戏岗位内推啦，需要找我哈共14个职位广告投放主管社会招聘全国广告投放社会招聘全国设计主管社会招聘全国海外投放社会招聘广东省广州市海外运营社会招聘广东省广州市产品运营专员社会招聘广东省广州市平台运营社会招聘广东…...

编程日记 2025/5/8 13:53:59

Vue2/Vue3分别如何使用Watch

在 Vue 2 和 Vue 3 中，watch 用于监听数据的变化并执行相应的逻辑。虽然两者的核心功能相同，但在语法和使用方式上有一些区别。以下是 Vue 2 和 Vue 3 中使用 watch 的详细说明： Vue 2 中的 watch 在 Vue 2 中，watch 是通过选项式…...

编程日记 2025/5/7 14:59:02

boss直聘登录网易易盾无感滑块分析

声明: 本文章中所有内容仅供学习交流使用，不用于其他任何目的，抓包内容、敏感网址、数据接口等均已做脱敏处理，严禁用于商业用途和非法用途，否则由此产生的一切后果均与作者无关！ 逆向分析实测网站是存在风控的比较…...

编程日记 2025/5/9 13:58:45

蓝桥杯 Java B 组之日期与时间计算（闰年、星期计算）

Day 5：日期与时间计算（闰年、星期计算） 在编程竞赛中，日期和时间计算是常见考点，涉及闰年判断、星期计算、日期间隔计算等问题。本日的学习目标： 判断闰年计算某个日期是星期几计算两个日期之间相差多少…...

编程日记 2025/5/9 3:38:03

51单片机之引脚图（详解）

8051单片机引脚分类与功能笔记 1. 电源引脚 VCC（第40脚）：接入5V电源，为单片机提供工作电压。GND（第20脚）：接地端，确保电路的电位参考点。 2.时钟引脚 XTAL1（第19脚&a…...

编程日记 2025/4/30 23:35:40

掌控系统性能的利器：自动化系统性能监控工具

友友们好！我的新专栏《Python进阶》正式启动啦！这是一个专为那些渴望提升Python技能的朋友们量身打造的专栏，无论你是已经有一定基础的开发者，还是希望深入挖掘Python潜力的爱好者，这里都将是你不可错过的宝藏。在这个专栏中，你将会找到： ● 深入解析：每一篇文章都将…...

编程日记 2025/5/6 6:01:12

用大模型学大模型03-数学基础概率论随机变量概率分布

deepseek.com:什么是概率，什么是随机变量？深度学习中常用概率的分布有哪些？ 1. 什么是概率？ 概率是描述事件发生的可能性的数值，范围在 0 到 1 之间： 0：事件不可能发生。1：事件必…...

编程日记 2025/5/4 23:53:26

ASP.NET Core 使用 FileStream 将 FileResult 文件发送到浏览器后删除该文件

FileStream 在向浏览器发送文件时节省了服务器内存和资源，但如果需要删除文件怎么办？本文介绍如何在发送文件后删除文件；用 C# 编写。另请参阅：位图创建和下载使用FileStream向浏览器发送数据效率更高，因为文件是从…...

编程日记 2025/5/7 10:55:37

如何使用DHTMLX Scheduler的拖放功能，在 JS 日程安排日历中创建一组相同的事件

DHTMLX Scheduler 是一个全面的调度解决方案，涵盖了与规划事件相关的广泛需求。假设您在我们的 Scheduler 文档中找不到任何功能，并且希望在我们的 Scheduler 文档中看到您的项目。在这种情况下，很可能可以使用自定义解决方案来实现此类功能。…...

编程日记 2025/5/9 13:25:40

UE_C++ —— Unreal Interfaces

目录一，Declare an Interface in C 二，Interface Specifiers 三，Implement an Interface in C 四，Declare Interface Functions 五，C Only Interface Functions 六，Blueprint Callable Interface Fu…...

编程日记 2025/5/9 14:20:47

mapbox 从入门到精通 - 目录

👨‍⚕️ 主页： gis分享者 👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏：mapbox 从入门到精通文章目录一、🍀总目录1.1 ☘️ mapbox基础1.2 ☘️…...

编程日记 2025/5/3 4:12:02

CentOS搭建PPPOE服务器

一、安装软件包 yum -y install rp-pppoe 二、配置服务器 1.修改配置文件打开/etc/ppp/pppoe-server-options文件 nano /etc/ppp/pppoe-server-options 编辑为以下内容： # PPP options for the PPPoE server # LIC: GPL require-pap require-chap login …...

编程日记 2025/5/9 15:00:49

在 CentOS 系统中配置交换空间（Swap）解决内存不足

🚀 作者主页： 有来技术 🔥 开源项目： youlai-mall ︱vue3-element-admin︱youlai-boot︱vue-uniapp-template 🌺 仓库主页： GitCode︱ Gitee ︱ Github 💖 欢迎点赞 👍 收藏 ⭐评论 …...

编程日记 2025/5/9 14:31:06

pytorch训练五子棋ai

有3个文件 game.py 五子棋游戏 mod.py 神经网络模型 xl.py 训练的代码 aigame.py 玩家与对战的五子棋 game.py class Game:def __init__(self, h, w):# 行数self.h h# 列数self.w w# 棋盘self.L [[- for _ in range(w)] for _ in range(h)]# 当前玩家 - 表示空 X先…...

编程日记 2025/5/9 14:50:37

超越DeepSeek R1的Moe开源大模型 Qwen2.5-max 和 Qwen Chat Web UI 的发布，阿里搅动AI生态

敲黑板，说重点，最近阿里推出的 Qwen2.5-max 和 Qwen Chat Web UI，将对AI生态又一次冲击。说冲击，因为 DeepSeek R1的热潮还未散退的情况下，由于服务器压力不能注册新的API，然后价格涨价，服务有…...

编程日记 2025/5/9 14:31:06

1. HTML 部分：音频播放控件

2. CSS 部分：样式设置

3. JavaScript 部分：音频控制

播放和暂停音频：

倒计时更新：

播放结束后自动暂停：

4. 总结：

完整代码：

相关文章：