js实现点击音频实现播放功能
目录
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>