Этот урок в основном показывает новые дополнения к HTML5
Приведенная выше изображение является интерфейсом пользовательского интерфейса этого аудиоплеерного игрока, который также скрывает плейлист песен. За исключением портретного изображения на большом фоне и звездного рейтинга песни, пользовательский интерфейс всего игрока использует картинку и нарисован CSS и Font-Face. Единственные вещи, которые кажутся трудными, - это производство компакт -дисков и дисков. Когда песня воспроизводится, как компакт -диски, так и диски имеют эффект анимационного взаимодействия. Это будет объяснено в более поздней части. Нажмите на компакт -диск игрока, чтобы открыть плейлист ~
Поскольку этот урок в основном показывает использование API DOM нового тега <audio> и аудио -элемента, добавленных в HTML5, рисование пользовательского интерфейса игрока здесь не будет объяснено подробно. Если у вас есть какие -либо вопросы, вы можете сами просмотреть комментарии файла CSS или оставить сообщение ниже.
Основные функции:1. Играть, пауза, предыдущая песня, следующая песня, увеличение громкости и уменьшение
2. Нажмите на компакт -диск, чтобы открыть и закрыть список воспроизведения
3. Вы можете перетащить локальный музыкальный файл игроку для воспроизведения.
HTML -структура
Скопировать код