Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс
Войти через VK Войти через FB Войти через Google Войти через Яндекс
Поиск по сайту
Кнопки управления audio
Управлять проигрывателем с помощью кнопок самого audio-объекта не всегда удобно. На смартфоне не всем удается попасть пальцем в маленькие кнопочки "пуск" и "пауза".
Поэтому для создания дружественного интерфейса разумно дублировать элементы, запускающие и останавливающие воспроизведение, отдельными большими интуитивно понятными хорошо всем знакомыми кнопками. Кнопки реализованы в формате внедренного SVG, что делает код простым, легким и без внешний файлов картинок.
Данный подход использован при написании аудио-гида по станице Старочеркассая
Исходный код этого примера:
<!--<html><head>-->
<style type="text/css">
.hide {
display: none !important;
}
.button-box a {
display: block;
width: 75px;
height: 75px;
}
</style>
<!--</head><body>-->
<div class="button-box">
<a href="" title="Слушать" class="play-btn" onclick="return togglePlay()">
<svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%">
<path class="ytp-svg-fill" d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z"></path>
</svg>
</a>
<a href="" title="Пауза" class="pause-btn hide" onclick="return togglePlay()">
<svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%">
<path class="ytp-svg-fill" d="M 12,26 16,26 16,10 12,10 z M 21,26 25,26 25,10 21,10 z" id="ytp-id-285"></path>
</svg>
</a>
</div>
<audio controls="controls" style="width:100%;max-width:600px;">
<source src="http://kdg.htmlweb.ru/music/mark_bernes_-_zhuravli.mp3" type="audio/mp3">
</audio>
<script>
var audio = document.getElementsByTagName('audio')[0];
var pauseBtn = document.getElementsByClassName('pause-btn')[0];
var playBtn = document.getElementsByClassName('play-btn')[0];
function togglePlay() {
if (audio.paused) {
audio.play();
} else {
audio.pause();
}
return false;
}
audio.addEventListener('canplay', event => {
audio.play();
});
audio.addEventListener('play', function () {
playBtn.classList.add('hide');
pauseBtn.classList.remove('hide');
});
audio.addEventListener('pause', function () {
pauseBtn.classList.add('hide');
playBtn.classList.remove('hide');
});
</script>
<!--</body></html>-->
.
Прокомментировать/Отблагодарить