jquery+BenzAMRRecorder实现微信语音amr格式播放，支持多个语音播放

语音播放效果图：

CSS样式和html代码：

.show-voice{padding: 15px;}
		.voice{ padding-top: 8px; padding-left: 5px; height: 28px; width: 20%; background: #1bbc9b; border-radius: 6px; position: relative;}
		.voice span{position: absolute;top:7px; right: 10px; color: #FFFFFF;}
		.bg {
		  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAYCAYAAAAF6fiUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzlFRDZDRDNENzlFMTFFNkJDN0NFMjA2QTFFRTRDQkIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzlFRDZDRDJENzlFMTFFNkJDN0NFMjA2QTFFRTRDQkIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTAxQkEzQ0RENzM2MTFFNjgyMEI5MTNDRkQ0OTM5QUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTAxQkEzQ0VENzM2MTFFNjgyMEI5MTNDRkQ0OTM5QUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4K4iKVAAACUUlEQVR42uSazytEURTHvTHjR4kaU8xsSDZSdmbjx4oSK8XGQrJlpSwYTSmxEWWhUIpsZK3kD7DRNBuSBZFCNjZ+JPKcV6ecXu/d3sy7595bc+vbfXPue5/749z77o83lm3bZYYFC8RZqAbQAigP2tXNj5aZF7gdkAZNk9+7WvnOCCgxRUCb9n/o1sk3pUH6QDHF/GNsoM+QeYfiy6qkFeLZDBb0GlTB4AAR/xXT9nXxZVa0WCekQd9Y0HOJjg3CHySviiZmfjO3AyIhnu0gBc0wjAIR/wLtW8z87aAOWAI9gqaYRoAff4ZUoi7EKCiUP462j4CdSCrfK4N1Ahpi6I0i/hPa50M4oFB+Dbm/SzXfL5MD4rUogxP8+Itozynm59E+q5ovyuQdHxphWh568XvR5kxq1SEn40L4e0XMA1L4EcEe7RTjLqYdqRf/gezQUwr5LxjXq+aLHPCFcTmTA7z4tutIQhXfLiJPKXyRA/oxzgW8v9DgxU+S62eF/ATGr6r5fg26Corj9RHD4Z0fvwfjS9CbQn4bxrfK+R6TyzxZNk260solTL4i/g3al10TsMXIryA72T7VfK8MnJO8X9CKy14lafXjxx8jFUsSeyUzfxhtPwHPoqTy/TJJMJzJiPgNpJdsuNJizPwztB/q4JtwHN2KW3sn3HuMOouR30l6bbsOvgkOyGIBnaPbRldalJl/h2knuvgmOKAWNAFKMUz4Iv4O6Z1xXXxTPxtazHy6khnVyS/Fb8IDpHGyuvmWgX9L4Q4toDnQFWhNN/9PgAEAR4w1ULjdCbEAAAAASUVORK5CYII=) right 0 no-repeat;
		    width: 20px; height: 20px; background-size: 400%;
		}
		.voicePlay {
		  animation-name: voicePlay;
		  animation-duration: 1s;
		  animation-direction: normal;
		  animation-iteration-count: infinite;
		  animation-timing-function: steps(3);
		}
		@keyframes voicePlay {
		  0% { background-position: 0; }
		  100% { background-position: 100%; }
		}


<div id="voice-list">
		<!--预览语音-->
		<div class="show-voice">
			<div class="voice" data-amr='/voice/fa36e12cb025723fda3651dbbece4237.amr'><div class="bg"></div><span><i>9</i><sup>&apos;&apos;</sup></span></div>
		</div>
		<div class="show-voice">
			<div class="voice" data-amr="/voice/6dcaa63fa0cb3ceaa396986d228824d2.amr"><div class="bg"></div><span><i>16</i><sup>&apos;&apos;</sup></span></div>
		</div>
	</div>

加载JS和主要代码：

<script src="/static/js/BenzAMRRecorder.min.js"></script>
	<script>
	var amr;
	$(function(){
		var tag=false, cur_play='';
		//上传后语音播放
		$('#voice-list').on('click','.voice',function(){
			let url=$(this).data('amr'), dom=$(this).children('div');
			if(tag && url!=cur_play){amr.stop();}
			if(url==cur_play){
				amr.playOrPauseOrResume();
			}else{
				amr = new BenzAMRRecorder();
				amr.initWithUrl(url).then(function() { amr.play(); });
				tag=true; cur_play=url;
			}
			amr.onEnded(function() { dom.removeClass('voicePlay'); });
			amr.onPlay(function () { dom.addClass('voicePlay'); });
			amr.onPause(function () { dom.removeClass('voicePlay'); });
			amr.onResume(function () { dom.addClass('voicePlay'); });
		})
		$('.voice').each(function(){
			let min=Number($(this).find('i').text());
			$(this).css('width',(min+20)+'%');
		})
	});
</script>

参考网站：https://www.npmjs.com/package/benz-amr-recorder