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

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

news 2026/5/9 0:32:30

目录

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

从富士通-松下SoC合并案看技术整合的协同效应陷阱与战略避坑

1. 从一则旧闻谈起&#xff1a;当“负一加负一等于负三”2013年初&#xff0c;一则关于日本科技巨头富士通与松下可能合并其系统级芯片业务的传闻&#xff0c;在业界激起了不小的涟漪。当时&#xff0c;EE Times的资深记者在东京采访了半导体行业的观察家与批评者&#xff0c;得…...

编程新知 2026/5/8 22:27:38

如何实现跨平台输入法词库迁移？深蓝词库转换技术架构解析

如何实现跨平台输入法词库迁移&#xff1f;深蓝词库转换技术架构解析 【免费下载链接】imewlconverter ”深蓝词库转换“ 一款开源免费的输入法词库转换程序 项目地址: https://gitcode.com/gh_mirrors/im/imewlconverter 在数字化工作环境中&#xff0c;输入法的个性化…...

编程新知 2026/5/8 21:53:37

5步掌握Meshroom：从照片到三维模型的完整工作流指南

5步掌握Meshroom&#xff1a;从照片到三维模型的完整工作流指南 【免费下载链接】Meshroom Node-based Visual Programming Toolbox 项目地址: https://gitcode.com/gh_mirrors/me/Meshroom 你是否曾面对一堆照片&#xff0c;却不知道如何将它们转化为精美的三维模型&am…...

编程新知 2026/5/8 21:27:02

AUTOSAR: RTE概述

类比&#xff1a;RTE就类似于电话接线员&#xff08;向他人打电话先将电话信息传给接线员&#xff0c;再由接线员传给被接受人&#xff09;。RTE管理SWC与SWC之间、SWC与BSW之间的通信信息。比如&#xff0c;SWC1要将信息传给SWC2&#xff0c;可SWC2正在执行任务&#xff0c;RT…...

编程新知 2026/5/8 21:11:59

UVM验证中的“交通指挥官”：深入浅出搞懂virtual sequence与virtual sequencer的协同调度

UVM验证中的“交通指挥官”&#xff1a;深入浅出搞懂virtual sequence与virtual sequencer的协同调度 在复杂的芯片验证环境中&#xff0c;多个接口协议需要并行工作&#xff0c;模拟真实场景下的数据交互。想象一下&#xff0c;一个SoC芯片同时处理AHB总线传输、APB寄存器配置…...

编程新知 2026/5/8 20:47:52

嵌入式开发中的极限编程(XP)实践指南

1. 嵌入式开发的困境与XP的引入在嵌入式系统开发领域&#xff0c;我们常常面临两个几乎无法逃避的现实困境。第一个是所有软件开发项目共通的痛点&#xff1a;截止日期往往在需求明确之前就被固定下来。第二个则是嵌入式开发特有的挑战&#xff1a;目标硬件通常要到项目后期才能…...

编程新知 2026/5/8 20:04:29

P1227 完美的对称【洛谷算法习题】

P1227 完美的对称 网页链接 P1227 完美的对称 题目描述 在峰会期间&#xff0c;必须使用许多保镖保卫参加会议的各国代表。代表们除了由他自己的随身保镖保护外&#xff0c;组委会还指派了一些其他的特工和阻击手保护他们。为了使他们的工作卓有成效&#xff0c;使被保卫的…...

编程新知 2026/5/8 19:39:39

SpecVibe项目复盘：基于规格驱动与智能体技能框架的AI辅助开发实践

1. 项目概述与核心价值最近在整理过往的代码仓库时&#xff0c;我重新审视了“SpecVibe”这个项目。它是我在2022年10月至2023年1月期间&#xff0c;参与一个名为“Lithium”的后端开发训练营时完成的核心作业。这个项目远不止是一份简单的作业提交&#xff0c;它是我个人对于“…...

编程新知 2026/5/8 19:26:54

FPGA协处理器加速CPU性能的技术与实践

1. FPGA协处理器加速CPU性能的技术背景在嵌入式系统开发中&#xff0c;我们经常遇到一个经典困境&#xff1a;产品迭代需要更强的计算能力&#xff0c;但原有CPU已经达到性能天花板。传统解决方案不外乎三种&#xff1a;提升时钟频率&#xff08;很快会遇到物理极限&#xff09…...

编程新知 2026/5/8 18:57:43

CoIR代码检索基准：从原理到实战，全面评估代码嵌入模型性能

1. 项目概述&#xff1a;为什么我们需要一个专门的代码检索基准&#xff1f; 在当今的软件开发、代码生成和智能编程辅助领域&#xff0c;检索增强生成&#xff08;RAG&#xff09;技术正变得无处不在。无论是让大语言模型&#xff08;LLM&#xff09;帮你写一段代码&#xff…...

编程新知 2026/5/8 18:13:22