利用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点击音频实现播放内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
下面小编就为大家分享一篇完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
本文记录下JS中产生标识符方式的演变，从ES5到ES6，ES5及其之前是一种方式，只包含两种声明（var/function），ES6则增加了一些产生标识符的关键字，如 let、const、class。2015-06-06
这篇文章主要介绍了JavaScript的内存空间、赋值和深浅拷贝，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
函数中首先给maxChars变量指定了值(输入区内最多可用的字符数，注意，该变量是个可用于计算的数值)2008-07-07
这篇文章主要介绍了bootstrap+jQuery实现的动态进度条功能,结合完整实例形式分析了bootstrap+jQuery实现动态进度条的具体步骤与相关操作技巧,需要的朋友可以参考下2017-05-05
Javascript原型继承是一个被说烂掉了的话题，但是自己对于这个问题一直没有彻底理解，今天花了点时间又看了一遍《Javascript模式》中关于原型实现继承的几种方法，下面来一一说明下，在最后我根据自己的理解提出了一个关于继承比较完整的实现。2014-11-11
这篇文章主要介绍了js实现鼠标点击文本框自动选中内容的方法,涉及javascript鼠标点击事件onClick及选择事件select的使用技巧,非常简单实用,需要的朋友可以参考下2015-08-08
这篇文章介绍了JavaScript动态操作select下拉框的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-04-04
纯Javascript实现Windows 8 Metro风格实现
Windows 8 Metro风格设计，实现网站或系统功能的导航，在本文将为大家介绍下如何用纯Javascript实现Windows 8 Metro风格，感兴趣的朋友可以参考下2013-10-10
这篇文章主要介绍了JavaScript限定图片显示大小的方法,涉及javascript针对图片的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
最新评论