jquery音频播放 css3播放动画 监听播放状态 模拟微信语音播放效果

操作：点击音频格子，播放音频，再点击暂停音频，类似于微信语音播放效果。

html

<div class="upload-file">
	<div class="delfilebtn layui-icon" data-itemid="">&#x1007;</div>
	<div class="typebtn audio-preview layui-icon" data-uri=""><div class="files audio"></div></div>
	<div data-role="audio"></div>
</div>

css

.homework-uploadbox {
	font-size: 14px;
	display: flex;
	align-items: center;
	margin-top: 15px;
	color: #616161;
	flex-wrap: wrap;
}

.upload-file {
	border: 1px #eaeaea solid;
	width: 80px;
	height: 80px;
	margin: 0 8px 8px 0;
	position: relative;
	border-radius: 5px;
}

.upload-file .files {
	width: 80px;
	height: 80px;
	overflow: hidden;
	font-size: 30px;
	text-align: center;
	line-height: 80px;
	cursor: pointer;
}

.upload-file .files.audio {
	width: 35px;
	height: 35px;
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 9;
	transform: translate(-50%, -50%);
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAMAAACfWMssAAAA/FBMVEUAAABPS09iYWJhYGFiYWJiYWJhYGFhX2FhYGFcXFxhYGFhYWFhYWFhYGFiX2JhX2FgYGBhXmFfX19cWFxVVVVhYGFhYWFhYGFhYGFhX2FfX19hYWFaWlpiYWJhYGFiYGJiYGJhYGFhYWFiYGJhYGFhYGFiYGJhYGFiYWL8/PxmZWbz8/P39/fd3d2Uk5R6eXr5+fno5+jY2NidnZ13dndqaWrt7e2ZmJlwb3D7+/vv7+/k5OTg4ODKysrIyMixsLGnp6eDg4NsbGzPzs/FxcWjo6ORkZHq6urV1dXAv8C7uru1tbWsq6ygoKCIh4h9fH10dHSNjI18e3yq+cDOAAAAKHRSTlMABO3i+fLFeuoU5t+hnnNHOSMeCweQgf7aUE00EfXV0suMhsGoma+tqHJmIwAAAppJREFUSMeVl2lf2kAQxjeAhHCfilgVUdtJJCD3LSiCZ6u23/+7dA/Tws5uiP9X8yLPb3Znnh0GosI4MpPRcCgSCYWjSfOIBMPIJGOwRSyZMXbKrFIIFITOvvnKCqVj0LDnJ63EwYd4RSMrlg7Al4NSUaXLn8JOqnmsy4UhAIlcMB0mLuW0yhCQsrVVlyoEprpphhJouALM2X9dRtOH3mzS7uGuZP4dNAFqOrZtD67xNb12muAjtCdYaX5WdE8n/Ggw5bSPfCtsuw9arl4cqpyDzD7TGXt+5ZxTodNEr4y15BAwy6fJShyw/8gOi7pySIXfAfOTft0QjXhghx2CxA/NSX/ZlNmIx6xADVQeg2RBxW2Lft7h4ZBGLdSSLEmDkjuXFqXLb1mnyluQSJMUYLy7tXlRnqjwBiRSJCqnao5EcE9T/mbBghlPFp4Tyac3ju2KtjXp9wsWdGlQlxuSINvDd2FTXF6KEb3bvVcddyRPAhKBTQY2Y81jKmx4qd0PSRiRhFMu7HLTCaGXEQm3J/6Q+eRxyV8xbeXKsxG6Y0guTnfgdoTX1l77VqqqJlA7oP/5PNrUMO8smqj6GNUa4MXz3Jujck5KZ7nXFk14x6Jnqhv/QZZTm3zJZ8YrC6/H7KEANrn3rLAP5p7zeH/wCLhQv8fxs6iyY3OzS1ywX1NQsJ4/CMuPlTMHKmJYaXlzbdELfFJKTatrOkzXXqrHI7G0C0Ob6ep4kh9bxH8id5juHRQJBYWwRtib1mc4H4QLXIZmMjYunsYel/AFLjc3qpPgupMiWjoCEc5L60o8mC6eQ4tVOdA58wRhRXfrzpUbpFHbpasRDVnfPfA0S7QY6ZhOFksb/juyqV6tzUKAZT4lL/MptMzrCPD34S+5BYaLCvC+vwAAAABJRU5ErkJggg==');
	background-size: 100%;
}

.upload-file .files.audio.active {
	animation: audioanimate 1s linear infinite;
}

@keyframes audioanimate {
	0% {
		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAMAAACfWMssAAAApVBMVEUAAABhYGFhYGE/Pz9hYGFhX2FiYWJhYGFhYGFcXFxaVlpiYWJhYWFhYWFhYGFhYWFiX2JhXmFfX19hYGFiYGJXV1dmXGZiYWJhX2FfX19gYGBhYWFaWlphYWFhYGFgX2BiX2JiYWJhYGFiYGJhYGFhYGFhYGFfX19iYWL39/fs7OxsbGyenp6Uk5R5eHnj4+PX19fKycqxsbGjo6OXl5eDg4N0t9ouAAAAKHRSTlMA7eED6nr35o8UB/PboZ6BcyMe1MQMBfpQTTg0EcWISUXOysGuqJk7+es41QAAAXxJREFUSMed12lzgjAQgOFNAgiCinii9azH4tn7//+0lrYy3Gz2+f7OMEncWaGMmpudoRSTiZDDjjkHGrXqGJhhdNaqMXNsgSWE/VSbjWwLK7jLmjRsYY1WWJG1bWxgt8u6YIONNkGx60skkP1C10KSVpC7BQ+JPCdzLlsk245ToY0abEisUMs6+VBPL/Qe12miJvP/RF3d0P17tj3U1ou7sdAPRXwlU2SYAsCOE+4AlMsJXQUzZJmBzwt96PLCLiww6+t2oYTPIDHjLYpON8p7BQPT3qMfpzthEoCFaeco9tEcWrnw5Te8UkKBaZ9xdyYcj8gfzvV8er1jM1m4DrwgxYL9ANhPjv3ImT8roQD2nHAPACEnDNnDij0eY46l21kO8CZy77GkSL1OJjvEVHcaJw463SG9UQ3o3aCdW1aIZMBcVwqLTuCRvjOAAmdIGMOlG6RaNnVLBeWOg9rPPEIl5RtVmeGr+h3ZLE2FOSIs891ca3TXCmgIfx++Aa8je1tGE+vzAAAAAElFTkSuQmCC');
		background-size: 100%;
	}

	50% {
		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAMAAACfWMssAAAA4VBMVEUAAABiYWI/Pz9bWFthYGFiYWJiYWJhYGFiYGJhYGFaWlphYGFhYWFhYWFhYGFhYWFiX2JgX2BhXmFhX2FhX2FhYGFgYGBhYWFiYWJiYGJhYWFhYGFhX2FfX19gYGBgYGBhWGFhYWFiYGJhYGFhYGFhYGFhYGFfX19eXl5YWFhVVVVhYWFiYWL6+vr8/Pz29vafn5+SkZJramtlZGXd3d3X19fJycmxsbGko6SDg4N3dndwb3Dz8/Pv7+/r6+vo5+jj4+PPz8/Gxsa8vLy1tbWop6h8e3ysq6yWlZaNjI2kWBfjAAAALHRSTlMA7QMG4vny6sOPE+bfoZ6Bc08jeUfUODT12sWIfEsgFQnX0MquqJk7Hg4MHRswxEIAAAIBSURBVEjHpZfpdptADEbFGC+Aje0YJ97r7EslvNV2nKTZl7bv/0DFkCYBRgNzev/foxnxjY4AGWKvVauYRrFomJVaaw/yIYa1MsYo1zyRqX2zDJRgWLZSO7c6yFDqn/Pe0EEFzpDRChZmYBVk3vcDzOTgLO3tmJiD6g7vqXFGia/QxZx07VhfDjE3h187ZKEG1qfnoRbex0GremL332EHqEkr8uySrliKOltHberhDaUFfyhFY3vLJqZZrG6fFiqzGYhHmOYXES2vFeIRgJCddEYBDzeK9gjYRRmvfmCukGcXGijlako0mfFiA1yUM58Q3fO9daGXLDV/v9pjUPIPK1agGv986wlN51FJIrrkRwHEh+8lBUzfMOAmuOUjPwmgiF+5oy0b3PKTaMmKxYT4EIqz8NQZYnzi/54E3l2Ytmuf6IlPa6I5OLudrqKsbYjoVdGcXirg7/29J/LfWLHHBuBZnTmXi9yLHxS8UkROHvLFkgJeVCGXPqsoB2uFZwiAY/l79J9RwTEzOnCznqOKJjus1BiF/xmPYHd0vY4NIXX9ghFjU88zx6HGNFbZ0g9OdLwT+GTczu+1C9zSocYcJdYVJ5/npBad0X4eb/9MsnBWsr2KDRJEP8vrc/vuaVvZzlNgEY0yp5UbAlRcDOSr9eACshCem1zmXU9APnL8PvwF6PSkUglc3EQAAAAASUVORK5CYII=');
		background-size: 100%;
	}

	100% {
		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAMAAACfWMssAAAA/FBMVEUAAABPS09iYWJhYGFiYWJiYWJhYGFhX2FhYGFcXFxhYGFhYWFhYWFhYGFiX2JhX2FgYGBhXmFfX19cWFxVVVVhYGFhYWFhYGFhYGFhX2FfX19hYWFaWlpiYWJhYGFiYGJiYGJhYGFhYWFiYGJhYGFhYGFiYGJhYGFiYWL8/PxmZWbz8/P39/fd3d2Uk5R6eXr5+fno5+jY2NidnZ13dndqaWrt7e2ZmJlwb3D7+/vv7+/k5OTg4ODKysrIyMixsLGnp6eDg4NsbGzPzs/FxcWjo6ORkZHq6urV1dXAv8C7uru1tbWsq6ygoKCIh4h9fH10dHSNjI18e3yq+cDOAAAAKHRSTlMABO3i+fLFeuoU5t+hnnNHOSMeCweQgf7aUE00EfXV0suMhsGoma+tqHJmIwAAAppJREFUSMeVl2lf2kAQxjeAhHCfilgVUdtJJCD3LSiCZ6u23/+7dA/Tws5uiP9X8yLPb3Znnh0GosI4MpPRcCgSCYWjSfOIBMPIJGOwRSyZMXbKrFIIFITOvvnKCqVj0LDnJ63EwYd4RSMrlg7Al4NSUaXLn8JOqnmsy4UhAIlcMB0mLuW0yhCQsrVVlyoEprpphhJouALM2X9dRtOH3mzS7uGuZP4dNAFqOrZtD67xNb12muAjtCdYaX5WdE8n/Ggw5bSPfCtsuw9arl4cqpyDzD7TGXt+5ZxTodNEr4y15BAwy6fJShyw/8gOi7pySIXfAfOTft0QjXhghx2CxA/NSX/ZlNmIx6xADVQeg2RBxW2Lft7h4ZBGLdSSLEmDkjuXFqXLb1mnyluQSJMUYLy7tXlRnqjwBiRSJCqnao5EcE9T/mbBghlPFp4Tyac3ju2KtjXp9wsWdGlQlxuSINvDd2FTXF6KEb3bvVcddyRPAhKBTQY2Y81jKmx4qd0PSRiRhFMu7HLTCaGXEQm3J/6Q+eRxyV8xbeXKsxG6Y0guTnfgdoTX1l77VqqqJlA7oP/5PNrUMO8smqj6GNUa4MXz3Jujck5KZ7nXFk14x6Jnqhv/QZZTm3zJZ8YrC6/H7KEANrn3rLAP5p7zeH/wCLhQv8fxs6iyY3OzS1ywX1NQsJ4/CMuPlTMHKmJYaXlzbdELfFJKTatrOkzXXqrHI7G0C0Ob6ep4kh9bxH8id5juHRQJBYWwRtib1mc4H4QLXIZmMjYunsYel/AFLjc3qpPgupMiWjoCEc5L60o8mC6eQ4tVOdA58wRhRXfrzpUbpFHbpasRDVnfPfA0S7QY6ZhOFksb/juyqV6tzUKAZT4lL/MptMzrCPD34S+5BYaLCvC+vwAAAABJRU5ErkJggg==');
		background-size: 100%;
	}
}

.upload-file .files img,
.upload-file .files video,
.upload-file .files audio {
	width: 80px;
	height: 80px;
	border-radius: 5px;
	object-fit: cover;
}

.upload-file .delfilebtn.layui-icon {
	position: absolute;
	right: 5px;
	top: 0;
	cursor: pointer;
	color: red;
	z-index: 99;
	font-size: 18px;
}


.upload-file .typebtn,
.upload-file .typebtn.audio-preview {
	width: 80px;
	height: 80px;
	background: rgba(0, 0, 0, .2);
	color: #fff;
	position: absolute;
	right: 0;
	top: 0;
	border-radius: 5px;
	font-size: 30px;
	text-align: center;
	line-height: 80px;
	cursor: pointer;
}

.upload-file .typebtn.audio-preview {
	background: url('/static/shared/images/homework-audiobg.png') no-repeat center;
	background-size: 100%;
	z-index: 9;
}

js第一版

获取当前播放url，创建一个audio标签音频，如果div中有open类名，那么添加active播放动画，audio并开始播放；否则移除active播放动画，暂停播放，并且用ended监听是否播放完。

缺点：这样每点击一次就创建一个audio标签播放，很麻烦

$(document).on('click','.audio-preview',function(){
	var _audiouri = $(this).attr('data-uri');
	$('.audio-preview .files').removeClass('active');
	var audiohtml = '<audio src="'+_audiouri+'" class="audios"></audio>';
	$('[data-role="audio"]').html(audiohtml);
	if($(this).hasClass('open')){
		$(this).find('.files').addClass('active');
		$('.audios')[0].play();
		$(this).removeClass('open');
	}else{
		$(this).addClass('open');
		$(this).find('.files').removeClass('active');
		$('.audios')[0].pause();
	}
	$(this).next().find('audio').bind('ended',function () {
	    $('.audio-preview .files').removeClass('active');
	    isplaying = 1;
	});
}); 

js第二版

定义isPlaying为1，如果isPlaying为1则暂停音频播放并赋值isPlaying为0，
获取播放url，如果audioPlayer 为空则创建audio音频，否则将src地址赋给audio

//上传音频-音频预览
let audioPlayer = null;
$(document).on('click','.audio-preview',function(){
    $('.audio-preview .files').removeClass('active');
    if($(this).attr('isPlaying') === '1'){
           $(this).attr('isPlaying','0');
           audioPlayer[0].pause();
           return;
    }
    let audiouri = $(this).attr('data-uri');
    if(!audioPlayer){
        audioPlayer = $('<audio>',{src:audiouri});
        audioPlayer.bind('ended',function () {
            console.log('监听结束');
         $('.audio-preview .files').removeClass('active');
        });
     	audioPlayer.bind('error',function () {
            $('.audio-preview .files').removeClass('active');
            layer.msg('播放失败,暂时无法播放安卓录制音频');
        });
    }else{
       if(audiouri !== audioPlayer.attr('src')){
            audioPlayer.attr('src',audiouri);
        }
    }
	audioPlayer[0].play();
    $('.audio-preview').attr('isPlaying','0');
    $(this).attr('isPlaying','1');
    $(this).find('.files').addClass('active');
});