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

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

news 2026/2/8 23:01:58

目录

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

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

编程新知 2025/9/23 15:13:40

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

编程新知 2026/1/15 21:24:41

深入剖析AI大模型：大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

编程新知 2026/2/8 20:42:53

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

编程新知 2026/2/7 17:33:19

vscode（仍待补充）

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

编程新知 2026/1/24 13:04:10

跨链模式：多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

编程新知 2026/2/5 14:15:13

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

编程新知 2026/1/31 12:52:29

工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

编程新知 2025/11/25 4:59:47

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如&#xff0c;已知表达式3*52&#xff0c;依照子表达式的求值顺序&#xff0c;有两种可能的结果&#xff0c;如图9-3所示。 如果乘法先执行&#xff0c;结果是17。如果5…...

编程新知 2026/1/31 13:13:28

淘宝扭蛋机小程序系统开发：打造互动性强的购物平台

淘宝扭蛋机小程序系统的开发&#xff0c;旨在打造一个互动性强的购物平台&#xff0c;让用户在购物的同时&#xff0c;能够享受到更多的乐趣和惊喜。 淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机&#xff0c;实现旋转、抽拉等动作&#xff0c;增…...

编程新知 2026/1/31 7:11:11