Как добавить аудио отзыв в блок TS203 в Tilda
Our clients love us
  • Sarah Lewin
    Facebook
    I think if you do something and it turns out pretty good, then you should go do something else wonderful, not dwell on it for too long.
    Play
  • Samuel Willson
    Facebook
    Before incorporating visual aids into speeches, the speaker should understand that if used incorrectly, the visual will not be an aid.
    Play
  • Alex Larkins
    Facebook
    You can't connect the dots looking forward, you can only connect them looking backwards.
    Play
  • Farrel Gulierm
    Facebook
    It is necessary to choose a visual aid that is appropriate for the material and audience.
    Play
  • Gregory Tabot
    Facebook
    The principal element of Suprematism in painting, as in architecture, is its liberation from all social or materialist tendencies. Through Suprematism, art comes into its pure and unpolluted form.
    Play
  • Jess Simpson
    Facebook
    I think if you do something and it turns out pretty good, then you should go do something else wonderful, not dwell on it for too long.
    Play

Как добавить аудио отзыв в блок TS203 в Tilda

1
Создали блок TS203
2
В конце текста каждого отзыва добавили слово Play со ссылкой на отзыв
3
Добавили код в блок другое Т123
В коде указали общую часть в адресе всех наших отзывов
('a[href^="https://dl.dropboxusercontent.com/');
И указали адрес на иконку
background-image: url(https://static.tildacdn.com/tild3634-3939-4534-b532-303733613163/3616606.svg);
Библиотека для примера

<style>
.t533__descr a {
    position: relative;
    color: transparent !important;
    display: inline-block;
    height: 35px;
    width: 35px;
    top: 15px;
}
.t533__descr a:before {
    content: "";
    background-image: url(https://static.tildacdn.com/tild3634-3939-4534-b532-303733613163/3616606.svg);
    background-size: cover;
    width: 35px;
    height: 35px;
    position: absolute;
    left: 0;
    border-radius:50%;
}
a.playcard:before {
    box-shadow: 0px 0px 0px 8px #fff;
}
.t533__textwrapper {
    padding-bottom:45px;
}
</style>

<audio id='soundplay'></audio>
<script>                            
(function() {
let audio = document.getElementById("soundplay");
function play(ev) {ev.preventDefault();
let playbtn = document.querySelectorAll('.t533__descr a');
playbtn.forEach(element => element.classList.remove('playcard'));
ev.currentTarget.classList.add('playcard');
let audioData = ev.currentTarget.href;audio.src = audioData;audio.play();
}
function onLoaded() {
let hrefs = document.querySelectorAll('a[href^="https://dl.dropboxusercontent.com/');
hrefs.forEach(href=>{href.addEventListener("click", play);})
}
if (document.readyState === "complete" || (document.readyState !== "loading" && !document.documentElement.doScroll)) {
onLoaded();} else {document.addEventListener("DOMContentLoaded", onLoaded);}
})();
</script>
Made on
Tilda