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

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

news 2026/2/9 1:10:06

目录

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 部分&#xff1a;音频播放控件 2. CSS 部分&#xff1a;样式设置 3. JavaScript 部分&#xff1a;音频控制 播放和暂停音频&#xff1a; 倒计时更新&#xff1a; 播放结束后自动暂停&#xff1a; 4. 总结&#xff1a; 完整代码&#xff1a; 今天通过 HTML…...

编程日记 2025/2/16 8:55:34

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

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

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

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

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

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

解决DeepSeek服务器繁忙问题

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

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

小项目第一天

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

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

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

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

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

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

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

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

SpringMVC新版本踩坑[已解决]

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

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

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

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

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

老牌软件，如今依旧坚挺

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

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

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

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

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

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

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

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

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

一、字符串拼接的接种方法&#xff1a; 二、字符串拼接方法的运用&#xff1a; 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接口的颜色并不是判断版本的可靠标准&#xff0c;但根据行业常见规范分析如下&#xff1a; USB接口颜色与版本对照表&#xff1a; 接口颜色常见版本内部触点数量传输速度黑色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作业&#xff0c;这次C…...

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

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

本次基于单片机的开关电源节能控制系统的设计中&#xff0c;在功能上设计如下&#xff1a; &#xff08;1&#xff09;系统输入220V&#xff1b; &#xff08;2&#xff09;系统.输出0-12V可调&#xff0c;步进0.1V; &#xff08;3&#xff09;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

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

目录 题目方法解析&#xff1a;代码设计&#xff1a;代码呈现&#xff1a; 题目方法解析&#xff1a; 代码设计&#xff1a; 代码呈现&#xff1a; class Solution {int m,n;int[] dx {0,0,-1,1};int[] dy {-1,1,0,0};public List<List<Integer>> pacificAtlant…...

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

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

编程新知 2026/2/1 21:58:45

P3 QT项目----记事本（3.8）

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

编程新知 2026/2/1 6:56:36

是否存在路径（FIFOBB算法）

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

编程新知 2025/10/1 6:09:21

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

编程新知 2026/1/25 11:52:39

PHP 8.5 即将发布：管道操作符、强力调试

前不久&#xff0c;PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5&#xff01;作为 PHP 语言的又一次重要迭代&#xff0c;PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是&#xff0c;借助强大的本地开发环境 ServBay&am…...

编程新知 2026/1/31 8:53:50

Spring AI Chat Memory 实战指南：Local 与 JDBC 存储集成

一个面向 Java 开发者的 Sring-Ai 示例工程项目&#xff0c;该项目是一个 Spring AI 快速入门的样例工程项目&#xff0c;旨在通过一些小的案例展示 Spring AI 框架的核心功能和使用方法。 项目采用模块化设计&#xff0c;每个模块都专注于特定的功能领域&#xff0c;便于学习和…...

编程新知 2025/10/16 14:46:22

华为OD机试-最短木板长度-二分法(A卷,100分)

此题是一个最大化最小值的典型例题&#xff0c; 因为搜索范围是有界的&#xff0c;上界最大木板长度补充的全部木料长度&#xff0c;下界最小木板长度&#xff1b; 即left0,right10^6; 我们可以设置一个候选值x(mid)&#xff0c;将木板的长度全部都补充到x&#xff0c;如果成功…...

编程新知 2026/2/4 17:42:50

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement 1. LAB环境2. L2公告策略2.1 部署Death Star2.2 访问服务2.3 部署L2公告策略2.4 服务宣告 3. 可视化 ARP 流量3.1 部署新服务3.2 准备可视化3.3 再次请求 4. 自动IPAM4.1 IPAM Pool4.2 …...

编程新知 2026/2/5 17:29:21

《Docker》架构

文章目录 架构模式单机架构应用数据分离架构应用服务器集群架构读写分离/主从分离架构冷热分离架构垂直分库架构微服务架构容器编排架构什么是容器&#xff0c;docker&#xff0c;镜像&#xff0c;k8s 架构模式 单机架构 单机架构其实就是应用服务器和单机服务器都部署在同一…...

编程新知 2026/2/4 16:31:26

《信号与系统》第 6 章 信号与系统的时域和频域特性

目录 6.0 引言 6.1 傅里叶变换的模和相位表示 6.2 线性时不变系统频率响应的模和相位表示 6.2.1 线性与非线性相位 6.2.2 群时延 6.2.3 对数模和相位图 6.3 理想频率选择性滤波器的时域特性 6.4 非理想滤波器的时域和频域特性讨论 6.5 一阶与二阶连续时间系统 6.5.1 …...

编程新知 2026/2/5 4:45:50