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

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

news 2025/12/2 23:14:09

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/2/16 8:55:34

matlab平面波展开法计算的二维声子晶体带隙

平面波展开法计算的二维声子晶体带隙，分别是正方与圆形散射体形成正方格子声子晶体，最后输出了能带图的数据，需要自己用画图软件画出来。列表平面波展开法计算二维声子晶体带隙/a2.m , 15823 平面波展开法计算二维声子晶体带隙/a4.m , 942…...

编程日记 2025/2/16 8:54:32

Spring Boot （maven）分页3.0版本通用版

前言： 通过实践而发现真理，又通过实践而证实真理和发展真理。从感性认识而能动地发展到理性认识，又从理性认识而能动地指导革命实践，改造主观世界和客观世界。实践、认识、再实践、再认识，这种形式，循环往…...

编程日记 2025/2/16 8:53:29

解决DeepSeek服务器繁忙问题

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

编程日记 2025/2/16 8:51:22

小项目第一天

总体实现流程图智能称重模块流程图定位追踪模块流程图防盗报警模块流程图密码解锁模块流程图跨平台通信流程图...

编程日记 2025/2/16 8:50:15

家里WiFi信号穿墙后信号太差怎么处理？

一、首先在调制解调器（俗称：猫）测试网速，网速达不到联系运营商； 二、网线影响不大，5类网线跑500M完全没问题； 三、可以在卧室增加辅助路由器（例如小米AX系列）90~200元区…...

编程日记 2025/2/16 8:45:08

教育小程序+AI出题：如何通过自然语言处理技术提升题目质量

随着教育科技的飞速发展，教育小程序已经成为学生与教师之间互动的重要平台之一。与此同时，人工智能（AI）和自然语言处理（NLP）技术的应用正在不断推动教育内容的智能化。特别是在AI出题系统中，如何…...

编程日记 2025/2/16 8:42:03

SpringMVC新版本踩坑[已解决]

问题： 在使用最新版本springMVC做项目部署时，浏览器反复500，如下图： 异常描述： 类型异常报告消息Request processing failed: java.lang.IllegalArgumentException: Name for argument of type [int] not specifie…...

编程日记 2025/2/16 8:40:01

一款利器提升 StarRocks 表结构设计效率

CloudDM 个人版是一款数据库数据管理客户端工具，支持 StarRocks 可视化建表，创建表时可选择分桶、配置数据模型。目前版本持续更新，在修改 StarRocks 表结构方面进一步优化，大幅提升 StarRocks 表结构设计效率。当前 CloudDM 个人…...

编程日记 2025/2/16 8:33:49

老牌软件，如今依旧坚挺

今天给大家介绍一个非常好用的老牌电脑清理软件，这个软件好多年之前就有人使用了。今天找出来之后，发现还是那么的好用，功能非常强大。 Red Button 电脑清理软件软件是绿色版，无需安装，打开这个图标就能直接使用了…...

编程日记 2025/2/16 8:28:40

Plaid | 数据库切换历程：从 AWS Aurora MySQL 到 TiDB 的迁移之旅

原文来源： https://tidb.net/blog/231f2752 原文链接： https://plaid.com/blog/switching-to-tidb/ 翻译能力来自：Deepseek （ai.com ） 作者：Zander Hill Zander Hill 是 Plaid 的软件工程师和前工…...

编程日记 2025/2/16 8:27:39

MongoDB 扩缩容实战：涵盖节点配置、服务启动与移除操作

#作者：任少近文章目录一、扩容在245节点上配置配置config server：配置mongos启动config server安装工具mongosh添加245新节点到副本集配置分片副本集启动路由并分片二、缩容Conf server上去掉server4shard上去掉server4mongos上去掉server4 一、扩容…...

编程日记 2025/2/16 8:26:35

Python学习心得字符串拼接的几种方法

一、字符串拼接的接种方法： 二、字符串拼接方法的运用： s1hello s2world #使用进行连接 print(s1s2)#使用字符串join()方法 print(.join([s1,s2]))#使用空字符串进行拼接print(*.join([hello,world,python]))#使用*进行拼接#直接拼接 print(helloworld)…...

编程日记 2025/2/16 8:23:26

USB2.03.0摄像头区分UVC相机在linux中的常用命令

这里是引用一. USB2.0 & 3.0接口支持区分 1.1. 颜色判断 USB接口的颜色并不是判断版本的可靠标准，但根据行业常见规范分析如下： USB接口颜色与版本对照表： 接口颜色常见版本内部触点数量传输速度黑色USB2.04触点480 Mbps (60 MB/s)白…...

编程日记 2025/2/16 8:20:15

electron 学习

文章目录 1.注意项1.1 安装前最好设置一下代理官网 tutorial https://www.electronjs.org/docs/latest/tutorial/tutorial-prerequisites 1.注意项 1.1 安装前最好设置一下代理 npm config set registry https://registry.npmmirror.com/...

编程日记 2025/2/16 8:19:13

美术教程2025

动画必看动画d【Unity初学者教程】如何制作 2D 游戏动画_哔哩哔哩_bilibili 如何在Unity中制作2D游戏动画 - 新手教程 - Blackthornprod_新手教程可不看序列帧【简明UNITY教程】2D游戏动画制作实例详解_哔哩哔哩_bilibili unityspine 【Unity2D游戏开发教程】2D自定…...

编程日记 2025/2/16 8:18:12

CPT205 计算机图形学 OpenGL 3D实践（CW2）

文章目录 1. 介绍2. 设计3. 准备阶段4. 角色构建5. 场景构建6. 交互部分6.1 键盘交互6.2 鼠标交互6.3 鼠标点击出多级菜单进行交互 7. 缺点与问题7.1 程序bug7.2 游戏乐趣不足7.3 画面不够好看 8. 完整代码 1. 介绍前面已经分享过了关于CPT205的CW1的2D作业，这次C…...

编程日记 2025/2/16 8:16:05

基于单片机的开关电源设计(论文+源码)

本次基于单片机的开关电源节能控制系统的设计中，在功能上设计如下： （1）系统输入220V； （2）系统.输出0-12V可调，步进0.1V; （3）LCD液晶显示实时电压&#xff…...

编程日记 2025/2/16 8:15:00

autogen_core中的DataclassJsonMessageSerializer类

源代码 import json from dataclasses import asdict, dataclass, fields from typing import Any, ClassVar, Dict, List, Protocol, Sequence, TypeVar, cast, get_args, get_origin, runtime_checkable, Union from pydantic import BaseModelfrom types import NoneType, …...

编程日记 2025/2/16 8:13:58

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

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

2. CSS 部分：样式设置

3. JavaScript 部分：音频控制

播放和暂停音频：

倒计时更新：

播放结束后自动暂停：

4. 总结：

完整代码：

相关文章：

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

matlab平面波展开法计算的二维声子晶体带隙

Spring Boot （maven）分页3.0版本通用版

解决DeepSeek服务器繁忙问题

小项目第一天

家里WiFi信号穿墙后信号太差怎么处理？

教育小程序+AI出题：如何通过自然语言处理技术提升题目质量

SpringMVC新版本踩坑[已解决]

一款利器提升 StarRocks 表结构设计效率

老牌软件，如今依旧坚挺

Plaid | 数据库切换历程：从 AWS Aurora MySQL 到 TiDB 的迁移之旅

MongoDB 扩缩容实战：涵盖节点配置、服务启动与移除操作

Python学习心得字符串拼接的几种方法

USB2.03.0摄像头区分UVC相机在linux中的常用命令

electron 学习

美术教程2025

CPT205 计算机图形学 OpenGL 3D实践（CW2）

基于单片机的开关电源设计(论文+源码)

autogen_core中的DataclassJsonMessageSerializer类

floodfill算法系列一＞太平洋大西洋水流问题

后进先出（LIFO）详解

在软件开发中正确使用MySQL日期时间类型的深度解析

理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

最新SpringBoot+SpringCloud+Nacos微服务框架分享

MODBUS TCP转CANopen 技术赋能高效协同作业

相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）

2023赣州旅游投资集团

SQL慢可能是触发了ring buffer

免费数学几何作图web平台