HTML
<?php if( have_rows('аудиоотзывы') ): ?>
<div class="reviews-audio" id="reviews-audio">
<div class="container">
<div class="content-title"><?php the_field('заголовок_блока_аудио-отзывов'); ?></div>
<div class="flex_block">
<?php while( have_rows('аудиоотзывы') ): the_row(); ?>
<div class="audio-reviews__inner anim-in">
<div class="people">
<div class="text">
<div class="site"><?php the_sub_field('имя_и_фамилия'); ?></div>
<div class="name"><?php the_sub_field('название_компании'); ?></div>
</div>
</div>
<div class="al-audioPlayer-wrapper">
<audio preload="auto" controls>
<source src="<?php the_sub_field('mp3_-_файл'); ?>">
</audio>
</div>
</div>
<?php endwhile; ?>
</div>
</div>
</div>
<?php endif; ?>LESS
.reviews-audio{
padding-top: 150px;
background: #fff;
color: #141414;
@media (max-width: 724px){
padding-top: 80px;
}
.audio-reviews__inner {
width: 353px;
text-align: left;
margin-right: 100px;
margin-bottom: 60px;
&:nth-child(3n) {
margin-right: 0;
}
@media (max-width: 1300px){
width: calc(~'33.333% - 70px');
}
@media (max-width:750px) {
margin: 0 auto;
margin-bottom: 60px;
width: 100%;
display: block;
}
.people {
padding-left: 60px;
margin-bottom: 5px;
.site {
color: #a2a2a2;
margin-bottom: 7px;
}
.name {
font-weight: 600;
}
}
.audioplayer {
color: #e4e4e4;
position: relative;
z-index: 1;
background: transparent;
}
.audioplayer-mini {
width: 2.5em;
margin: 0 auto;
}
.audioplayer > div {
position: absolute;
}
.audioplayer-playpause {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid #000;
text-indent: -9999px;
text-align: left;
cursor: pointer;
z-index: 2;
top: -47px;
left: 0;
}
.audioplayer-mini .audioplayer-playpause {
width: 100%;
}
.audioplayer-playpause a {
display: block;
}
.audioplayer:not(.audioplayer-playing) .audioplayer-playpause a {
width: 40px;
height: 40px;
background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolygon points='5 3 19 12 5 21 5 3'%3e%3c/polygon%3e%3c/svg%3e") no-repeat 12px 50%;
position: absolute;
top: 0;
left: 0;
}
.audioplayer-playing .audioplayer-playpause a {
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0;
background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='6' y='4' width='4' height='16'%3e%3c/rect%3e%3crect x='14' y='4' width='4' height='16'%3e%3c/rect%3e%3c/svg%3e") no-repeat 50% 50%;
}
.audioplayer-playing .audioplayer-playpause a:before {
left: 0;
}
.audioplayer-playing .audioplayer-playpause a:after {
right: 0;
}
.audioplayer-time {
margin-top: 5px;
line-height: 1.5;
text-align: center;
z-index: 2;
top: 0;
}
.audioplayer-playing .audioplayer-time-current {
color: #414141;
}
.audioplayer-time-current {
display: none;
right: 0;
top: -25px;
font-size: 12px;
color: #c4c3c3;
}
.audioplayer-time-duration {
right: 0;
top: -25px;
font-size: 12px;
color: #c4c3c3;
}
.audioplayer-playing .audioplayer-time-current {
display: block;
}
.audioplayer-playing .audioplayer-time-duration {
display: none;
}
.audioplayer-novolume .audioplayer-time-duration {
border-right: 0;
right: 0;
}
.audioplayer-bar {
height: 1px;
background-color: #c3c3c3;
cursor: pointer;
z-index: 1;
bottom: 0;
right: 0;
left: 0;
margin-top: 0;
}
.audioplayer-novolume .audioplayer-bar {
right: 4.375em;
/* 70 */
}
.audioplayer-bar div {
width: 0;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.audioplayer-bar-loaded {
background-color: #e4e4e4;
z-index: 1;
}
.audioplayer-bar-played {
background: @color-1;
z-index: 2;
}
.audioplayer-bar-played .audioplayer-bar-played-edge {
display: none;
position: absolute;
width: 2px;
height: 13px;
background-color: @color-1;
left: 100%;
top: -4px;
}
.audioplayer-volume {
display: none;
width: 2.5em;
/* 40 */
height: 100%;
border-left: 1px solid #111;
border-left-color: rgba(0, 0, 0, .25);
text-align: left;
text-indent: -9999px;
cursor: pointer;
z-index: 2;
top: 0;
right: 0;
}
.audioplayer-volume:hover,
.audioplayer-volume:focus {
background-color: #222;
}
.audioplayer-volume-button {
display: none;
width: 100%;
height: 100%;
}
.audioplayer-volume-button a {
width: 0.313em;
/* 5 */
height: 0.375em;
/* 6 */
background-color: #fff;
display: block;
position: relative;
z-index: 1;
top: 42%;
left: 30%;
}
.audioplayer-volume-button a:before,
.audioplayer-volume-button a:after {
content: '';
position: absolute;
}
.audioplayer-volume-button a:before {
width: 0;
height: 0;
border: 0.5em solid transparent;
/* 8 */
border-left: none;
border-right-color: #fff;
z-index: 2;
top: 50%;
right: -0.25em;
margin-top: -0.5em;
/* 8 */
}
.audioplayer:not(.audioplayer-mute) .audioplayer-volume-button a:after {
/* "volume" icon by Nicolas Gallagher, http://nicolasgallagher.com/pure-css-gui-icons */
width: 0.313em;
/* 5 */
height: 0.313em;
/* 5 */
border: 0.25em double #fff;
/* 4 */
border-width: 0.25em 0.25em 0 0;
/* 4 */
left: 0.563em;
/* 9 */
top: -0.063em;
/* 1 */
-webkit-border-radius: 0 0.938em 0 0;
/* 15 */
-moz-border-radius: 0 0.938em 0 0;
/* 15 */
border-radius: 0 0.938em 0 0;
/* 15 */
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.audioplayer-volume-adjust {
height: 6.25em;
/* 100 */
cursor: default;
position: absolute;
left: 0;
right: -1px;
top: -9999px;
background: #222;
}
.audioplayer-volume:not(:hover) .audioplayer-volume-adjust {
opacity: 0;
}
.audioplayer-volume:hover .audioplayer-volume-adjust {
top: auto;
bottom: 100%;
}
.audioplayer-volume-adjust > div {
width: 40%;
height: 80%;
background-color: #333;
cursor: pointer;
position: relative;
z-index: 1;
margin: 30% auto 0;
}
.audioplayer-volume-adjust div div {
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
background: #1ba1e2;
}
.audioplayer-novolume .audioplayer-volume {
display: none;
}
.audioplayer *,
.audioplayer *:before,
.audioplayer *:after {
-webkit-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
-moz-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
-ms-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
-o-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
transition: color .25s ease, background-color .25s ease, opacity .5s ease;
}
}
}JS
//аудиоотзывы
(function(){
!function(b,e,a){function C(e){var t=Math.floor(e/3600),a=Math.floor(e%3600/60),i=Math.ceil(e%3600%60);return(0==t?"":0<t&&t.toString().length<2?"0"+t+":":t+":")+(a.toString().length<2?"0"+a:a)+":"+(i.toString().length<2?"0"+i:i)}function E(e){var t=a.createElement("audio");return!(!t.canPlayType||!t.canPlayType("audio/"+e.split(".").pop().toLowerCase()+";").replace(/no/,""))}var w="ontouchstart"in e,L=w?"touchstart":"mousedown",x=w?"touchmove":"mousemove",M=w?"touchcancel":"mouseup";b.fn.audioPlayer=function(g){g=b.extend({classPrefix:"audioplayer",strPlay:"Play",strPause:"Pause",strVolume:"Volume"},g);var P={},e={playPause:"playpause",playing:"playing",time:"time",timeCurrent:"time-current",timeDuration:"time-duration",bar:"bar",barLoaded:"bar-loaded",barPlayed:"bar-played",volume:"volume",volumeButton:"volume-button",volumeAdjust:"volume-adjust",noVolume:"novolume",mute:"mute",mini:"mini"};for(var t in e)P[t]=g.classPrefix+"-"+e[t];return this.each(function(){if("audio"!=b(this).prop("tagName").toLowerCase())return!1;var e=b(this),t=e.attr("src"),a=""===(a=e.get(0).getAttribute("autoplay"))||"autoplay"===a,i=""===(i=e.get(0).getAttribute("loop"))||"loop"===i,n=!1;void 0===t?e.find("source").each(function(){if(void 0!==(t=b(this).attr("src"))&&E(t))return!(n=!0)}):E(t)&&(n=!0);var o=b('<div class="'+g.classPrefix+'">'+(n?b("<div>").append(e.eq(0).clone()).html():'<embed src="'+t+'" width="0" height="0" volume="100" autostart="'+a.toString()+'" loop="'+i.toString()+'" />')+'<div class="'+P.playPause+'" title="'+g.strPlay+'"><a href="#">'+g.strPlay+"</a></div></div>"),u=(u=n?o.find("audio"):o.find("embed")).get(0);if(n){o.find("audio").css({width:0,height:0,visibility:"hidden"}),o.append('<div class="'+P.time+" "+P.timeCurrent+'"></div><div class="'+P.bar+'"><div class="'+P.barLoaded+'"></div><div class="'+P.barPlayed+'"></div></div><div class="'+P.time+" "+P.timeDuration+'"></div><div class="'+P.volume+'"><div class="'+P.volumeButton+'" title="'+g.strVolume+'"><a href="#">'+g.strVolume+'</a></div><div class="'+P.volumeAdjust+'"><div><div></div></div></div></div>');function l(e){theRealEvent=w?e.originalEvent.touches[0]:e,u.currentTime=Math.round(u.duration*(theRealEvent.pageX-s.offset().left)/s.width())}function d(e){theRealEvent=w?e.originalEvent.touches[0]:e,u.volume=Math.abs((theRealEvent.pageY-(h.offset().top+h.height()))/h.height())}var s=o.find("."+P.bar),r=o.find("."+P.barPlayed),v=(o.find("."+P.barLoaded),o.find("."+P.timeCurrent)),m=o.find("."+P.timeDuration),c=o.find("."+P.volumeButton),h=o.find("."+P.volumeAdjust+" > div"),f=0,p=u.volume,y=u.volume=.111;Math.round(1e3*u.volume)/1e3==y?u.volume=p:o.addClass(P.noVolume),m.html("…"),v.text(C(0)),u.addEventListener("loadeddata",function(){m.text(C(u.duration)),h.find("div").height(100*u.volume+"%"),f=u.volume}),u.addEventListener("timeupdate",function(){v.text(C(u.currentTime)),r.width(u.currentTime/u.duration*100+"%")}),u.addEventListener("volumechange",function(){h.find("div").height(100*u.volume+"%"),0<u.volume&&o.hasClass(P.mute)&&o.removeClass(P.mute),u.volume<=0&&!o.hasClass(P.mute)&&o.addClass(P.mute)}),u.addEventListener("ended",function(){o.removeClass(P.playing)}),s.on(L,function(e){l(e),s.on(x,function(e){l(e)})}).on(M,function(){s.unbind(x)}),c.on("click",function(){return o.hasClass(P.mute)?(o.removeClass(P.mute),u.volume=f):(o.addClass(P.mute),f=u.volume,u.volume=0),!1}),h.on(L,function(e){d(e),h.on(x,function(e){d(e)})}).on(M,function(){h.unbind(x)})}else o.addClass(P.mini);a&&o.addClass(P.playing),o.find("."+P.playPause).on("click",function(){return o.hasClass(P.playing)?(b(this).attr("title",g.strPlay).find("a").html(g.strPlay),o.removeClass(P.playing),n?u.pause():u.Stop()):(b("audio").not(this).each(function(){this.pause(),b(".audioplayer").removeClass("audioplayer-playing")}),b(this).attr("title",g.strPause).find("a").html(g.strPause),o.addClass(P.playing),n?u.play():u.Play()),!1}),e.replaceWith(o)}),this}}(jQuery,window,document),$(function(){$("audio").audioPlayer()});
})();
//аудиоотзывы