利用JavaScript实现点击音频实现播放功能
作者：妮在想什么
前言
今天通过 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点击音频实现播放内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！