Аудио-отзывы

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("&hellip;"),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()});
})();
//аудиоотзывы
Контакты

Работаем: с ПН по ПТ, с 08:00 до 17:00 (МСК)
Отдыхаем: в СБ и ВС, чтобы быть в тонусе
и реализовывать самые сложные идеи