Назад
Регистрация Войти
Войти через VK Войти через Яндекс




Поиск по сайту




Наш Telegram бот: @htmlweb_bot

Кнопки управления 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>-->

.