大家知道 < audio > 标签无法定义样式，面对设计图中要实现的效果，我们该怎么办呢？
实现思路：不使用< audio >标签，使用JavaScript调用Audio对象并监听相应事件，实现音频的播放停止，这样就可以自定义播放器样式了
demo适用场景：播放音频（如：用户自介绍音频等）
demo缺陷：暂停功能需自己扩展
<html>
<head>
<meta charset="UTF-8">
<title>js播放音频，自定义播放器样式</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
.audio {
background-color : white;
border : 1px solid red;
width : 20%;
border-radius : 25px;
text-align : center;
margin : 16% auto;
line-height : 50px;
cursor : pointer;
}
.audio img {
width : 14px;
height : 14px;
}
.audio span {
margin-left : 20px;
font-size : 14px;
color : red;
}
</style>
</head>
<body>
<div class="audio"
onclick="playAudio(this)"
audio-data="../assets/audio/1.mp3"
audio-time="9">
<img src="../assets/img/chat.gif"
alt="音频图"/>
<span>
9'
</span>
</div>
<div class="audio"
onclick="playAudio(this)"
audio-data="../assets/audio/2.mp3"
audio-time="7">
<img src="../assets/img/chat.gif"
alt="音频图"/>
<span>
7'
</span>
</div>
</body>
<script>
// 语音播放部分
let audio, is_play = false;
let total_play_time, span_time, audio_clear_interval;
// 初始化语音组件
audio = new Audio();
// 语音结束时触发
audio.addEventListener("ended", function() {
is_play = false;
span_time.text(total_play_time);
});
// 音频播放时触发
function playAudio(that) {
let self = $(that);
// 先取消下 计数器，避免发生秒数错乱情况
clearInterval(audio_clear_interval);
if (is_play) {
// 暂停
audio.pause();
is_play = false;
// 恢复秒数
span_time.text(total_play_time);
// 判断是否是切换音频播放
if (self.attr("audio-data") === audio.src) {
// 不是的话，不继续执行
return
}
}
// 获取属性中 音频地址
audio.src = self.attr("audio-data");
// 获取属性中 音频时长
let time = self.attr("audio-time");
// 获取span节点，用于展示秒数
span_time = self.find("span");
is_play = true;
let duration = time;
total_play_time = time;
// 开始倒计时
audio_clear_interval = setInterval(function() {
if (!is_play) {
return clearInterval(audio_clear_interval);
}
duration -= 1;
span_time.text(duration + "'");
}, 1000);
// 开始播放音频
audio.play();
}
</script>
</html>
网友评论