+7(983)178-57-68

Новые горизонты успешного бизнеса!

Главная Посчитать и заказатьОставить заявку Статьи Отзывы Контакты

Вставить добавить аудио на сайт. Тег <audio> HTML5

В этой статье мы расскажем Вам как

вставить (добавить) аудио

файл на сайт. Сначала мы используем два флэш-плеера, а затем разместим аудио на сайте с помощью тега <audio> доступного в HTML5

Для примера, наш плеер, файл и скрипт находятся в папке PLAYER
Плеер 1
Пишем следующий код:
<script type="text/javascript" src="player/swfobject.js"></script>
<object type="application/x-shockwave-flash" data="player/player-a.swf" id="audioplayer1" height="24" width="290">
<param name="movie" value="player/player-a.swf">
<!-- В этой строке меняем цвета у плеера,
также указываем проигрываемый файл -->
<param name="FlashVars" value="bg=0xf8f8f8&leftbg=0xeeeeee&lefticon=0x666666&rightbg=0x424141&rightbghover=0x636262&righticon=0x666666&righticonhover=0xffffff&text=0x666666&slider=0x666666&track=0xFFFFFF&border=0x666666&loader=0x9FFFB8&loop=no&playerID=1&soundFile=player/music.mp3">
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
</object>

Плеер 2
Пишем следующий код:
<script type="text/javascript" src="player/swfobject.js"></script>
<object type="application/x-shockwave-flash" data="player/player-b.swf" width="250" height="20">
<param name="movie" value="player/player-b.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<!--
В этой строке меняем цвета у плеера, также указываем проигрываемый файл
-->
<param name="FlashVars" value="mp3=player/music.mp3&width=250&showstop=1&showvolume=1&buttonwidth=22&sliderwidth=12&volumeheight=8&bgcolor1=f5f5f5&bgcolor2=cccccc&slidercolor1=888888&slidercolor2=#333333&sliderovercolor=333333&buttoncolor=666666&buttonovercolor=000000&textcolor=666666&autoplay=0" />
</object>

Плеер HTML5
Тег <audio> добавляет аудиозаписи на веб-странице. Путь к файлу задается через атрибут src или вложенный тег <source>. Список поддерживаемых браузерами кодеков ограничен, поэтому лучше указывайте несколько аудио файлов.
<audio controls>
<source src="music.ogg" type="audio/ogg; codecs=vorbis">
<source src="music.mp3" type="audio/mpeg">
<source src="music.wav" type="audio/wav">
<source src="music.aac" type="audio/aac; codecs=vorbis">
</audio>

Для тега <audio> предусмотрено несколько атрибутов:
autoplay - звук начинает играть сразу после загрузки страницы;
controls - добавляет панель управления к аудиофайлу;
loop="loop" - повторение звукозаписи;
preload="none | metadata | auto" - загрузка аудиофайла вместе с загрузкой веб-страницы
none - файл не загружается;
metadat - загружается только служебная информация;
auto - файл загружается вместе с веб-страницей


Демонстрация


Остались вопросы? Спрашивайте!


Понравилась статья? Расскажи другим :)

Опубликовано: | Просмотров: 11463