Каждый трек вставляется блоком html разметки
<div class="podcast">
<button class="audio-btn">
<img class="play-button" src="/img/icons/play.jpg" alt="Play">
<img class="pause-button" src="/img/icons/pause.jpg" alt="Pause">
</button>
<audio src="/files/audio/audio-1.mp3"></audio>
<div class="podcast-title">Track 1</div>
</div>.podcast {
text-align: center;
}
.audio-btn {
background: none;
border: none;
cursor: pointer;
}
.podcast .pause-button {
display: none;
}
.podcast.play .pause-button {
display: inline;
}
.podcast.play .play-button {
display: none;
}Для работы скрипта требуется jQuery
(function($){
$(function(){
let currentAudio;
let isPlaying = false;
$('.audio-btn').click(function(){
let audio = $(this).parent().find('audio');
let audioTag = audio[0];
let btn = $(this);
if (!isPlaying) { // Если ничего не воспроизводится
audioTag.play();
currentAudio = audioTag;
isPlaying = !isPlaying;
$(currentAudio).parent().addClass('play');
}else{ // воспроизводится
// Если клик по тому треку, который воспроизводится
if(currentAudio === audioTag) {
currentAudio.pause();
isPlaying = !isPlaying;
$('.podcast').removeClass('play');
}else {
// Переключиться на другой трек
currentAudio.pause();
audioTag.play();
currentAudio = audioTag;
$('.podcast').removeClass('play');
$(currentAudio).parent().addClass('play');
}
}
});
});
})(jQuery);Если письма с сайта не приходят, можно попробовать отправлять из через почтовый сервер gmail. Для…
Favicon Фавиконка это маленькая пиктограмма сайта, нужна для отображения на вкладке браузера и в закладках.…
При входе в админку происходит редирект на ту же страницу входа. Эта статья для вас,…
Иногда можно получить такую ошибку: RuntimeException: failed to get url ... No working transport found…
Перед запуском wp-cli вам потребуется скачать и установить cygwin Весь wp-cli это один файл, который…
После того как я установил wp-cli, при попытке создать wp-config.php через консоль, я столкнулся с…