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

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

news 2025/10/4 1:44:24

目录

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

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

编程新知 2025/10/4 0:56:34

云原生核心技术 (7/12): K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

编程新知 2025/9/6 5:44:49

智慧医疗能源事业线深度画像分析（上）

引言 医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

编程新知 2025/10/2 18:30:41

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

编程新知 2025/9/30 9:17:16

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

编程新知 2025/9/28 3:30:47

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

编程新知 2025/9/28 3:31:27

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

编程新知 2025/9/30 19:45:33

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...

编程新知 2025/6/17 3:19:01

Golang——9、反射和文件操作

反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一&#xff1a;使用Read()读取文件2.3、方式二&#xff1a;bufio读取文件2.4、方式三&#xff1a;os.ReadFile读取2.5、写…...

编程新知 2025/10/2 3:34:07

CVPR2025重磅突破：AnomalyAny框架实现单样本生成逼真异常数据，破解视觉检测瓶颈！

本文介绍了一种名为AnomalyAny的创新框架&#xff0c;该方法利用Stable Diffusion的强大生成能力&#xff0c;仅需单个正常样本和文本描述&#xff0c;即可生成逼真且多样化的异常样本&#xff0c;有效解决了视觉异常检测中异常样本稀缺的难题&#xff0c;为工业质检、医疗影像…...

编程新知 2025/9/29 11:13:55