1.先看效果
2.完整源码（另外为html直接运行）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Audio Demo by Liangxin at 2021-02-09</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.2/css/all.css" rel="stylesheet">
<style>
.fa-pause,.fa-pause-circle-o{
color: #F00
}.fa-play .fa-play-circle-o{
color: #0F0
}
</style>
</head>
<body>
<a href="#"><div class="btn-audio" ><i class="fa fa-play"></i>
<audio class="player" src="http://dict.youdao.com/dictvoice?type=0&audio=hello liangxin" >
</audio>
</div></a>
<div class="btn-audio" ><i class="fa fa-play"></i>
<audio class="player" src="http://dict.youdao.com/dictvoice?type=0&audio=How are you" loop="loop">
</audio>
</div>
<script type="text/javascript">
$(function(){
//播放完毕
$('.player').on('ended', function() {
$(this).parent().find("i") .attr("class","fa fa-play");
})
$('.btn-audio').click(function() {
var audio = $(this).find("audio").get(0);
event.stopPropagation();
if(audio.paused){
$(this).find("i") .attr("class","fa fa-pause");
audio.play();
return;
}else{
$(this).find("i") .attr("class","fa fa-play");
audio.pause();
}
});
})
</script>
</body>
</html>
说明：该内容参考https://blog.csdn.net/qq_40999496/article/details/85015033，进行优化，支持多个audio标签。
1943
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
