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>