JavaScript中使用音频对象audio播放音频，可自定义语音播放器样式demo演示大家知道<audio>标签无法定

大家知道 < 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>