как изменить внешний вид тега audio с помощью css - есть ответ

Артем Юров, 491 просмотр

Желательно, без использования яваскриптов и точно без флеша.
В инете мало информации по этому вопросу, только яваскрипт-плагины советуют, но мне их использовать нежелательно.

Примечание:
крепко нагуглился. есть вероятность, что никак без яваскрипта не обойтись.
недавно и временно после флеша перешел по долгу службы на веб. дико удивляюсь, как хтмл5 можно сравнивать с флешем. сколько мороки и издевательства с отображением я еще не видел :)

Но... не обращаем внимания на лирику, если есть что посоветовать - советуйте :)

Ответы:

EL Alexandro

Посмотри пример - css отдельно, js отдельно. Если не хочешь особо разбираться, так копируй функцию init, запускай при загрузке и не парься.
Исспользовать так:
<audio id="player1" preload controls tabindex="0">
<source type="audio/mpeg" src="../music/audio/smallf.mp3"/>
<source type="audio/ogg" src="../music/audio/smallf.ogg"/>
Your browser does not support HTML5 audio.
</audio>
внутри найдёшь css...

EL Alexandro

Тут народ говорит что без js не обойтись, но некоторые свойства таки менять возможно, а именно: скругление уголков, длина, тень, преобразования (transform, transition) ну и ещё что-нибудь. Рекомендуют исспользовать cAudio, но он платный (15$).
Исспользовать его довольно удобно:
Добавляешь ссылку на скрипт плеера, пишешь
<div class="audio-player" id="custom-player" data-mp3="laugh.mp3" data-ogg="laugh.ogg"></div>
и настраиваешь стили.

10 лет назад

RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.

Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.

Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.