利用JavaScript实现点击音频实现播放功能
更新时间：2025年06月14日 14:19:27 作者：妮在想什么
这篇文章主要介绍了关于如何利用JavaScript实现点击音频实现播放功能,文中通过示例讲解了使用HTML、CSS和JavaScript结合jQuery实现一个简易音频播放器,包含播放、暂停及倒计时功能,适用于学习平台等场景,需要的朋友可以参考下
前言
今天通过 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>总结
到此这篇关于利用JavaScript实现点击音频实现播放功能的文章就介绍到这了,更多相关js点击音频实现播放内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了js实现网页随机切换背景图片的方法,涉及数组、随机函数与css样式的调用技巧,非常具有实用价值,需要的朋友可以参考下2014-11-11
这篇文章主要介绍了微信小程序全局变量的设置、使用、修改过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
JSON是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。本文给大家介绍JS操作JSON方法总结，非常不错具有参考借鉴价值，感兴趣的朋友一起学习吧2016-06-06
Bootstrap table 服务器端分页功能实现方法示例
这篇文章主要介绍了Bootstrap table 服务器端分页功能实现方法,结合实例形式详细分析了Bootstrap table 服务器端后台交互与分页功能相关操作技巧,需要的朋友可以参考下2020-06-06
本文给大家分享基于js实现输入框与清空框按钮联动效果，非常实用，代码简单易懂，感兴趣的朋友一起看看吧2016-09-09
伸缩的菜单，想必大家都有见到过吧，实现方法也是很多的，在接下来的文章中为大家介绍下使用js是如何实现的，需要的朋友可以参考下2013-12-12
这篇文章主要介绍了详解ES6 Promise Promise的生命周期和创建,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要介绍了使用JavaScript 实现的人脸检测的方法和实例，非常的不错，这里推荐给大家，有需要的小伙伴参考下。2015-03-03
JavaScript时间处理Date/moment/dayjs/Temporal方法全解
前端开发中,时间处理一直是个让人头疼的难题,本文系统梳理了JavaScript时间处理的演进历程,从原生Date对象的缺陷到第三方库的解决方案,文中的示例代码讲解详细,希望对大家有所帮助2026-03-03
这篇文章主要介绍了如何解决ligerUI布局时Center中的Tab高度大小的相关资料,需要的朋友可以参考下2015-11-11
最新评论