SdelaemBlog

Создание Сайтов и их настройка

Как вставить аудио в HTML-документ?

Главная Статьи HTML & CSS ВидеоКурс HTML Как вставить аудио в HTML-документ?

Приветствую, Друзья! В этом видео мы продолжим разговор о вставке объектов в HTML-документ.

В прошлом видео мы узнали, как вставить видео в HTML-документ? Познакомились с двумя HTML-тегами <object> и <param>, и некоторыми их атрибутами. Также хотелось бы отметить, что мы рассмотрели несколько способов вставки видео в HTML, включая использования сервиса YouTube. Что касается YouTube, то из прошлого видео мы можем помнить, что данный сервис предоставляет не совсем валидный HTML-код видео. То есть он не совсем подходит для выбранного нами DOCTYPE. Но мы естественно исправили немного код, используя <object> и <param>, и сделали его валидным.

Теперь пришло время разобрать еще один вопрос, с которым мы можем рано или поздно столкнуться, это как вставить аудио в HTML-документ? В этом видео уроке мы рассмотрим вставку аудио с нашего сервера с использованием аудио плеера. Аудио плеер, который мы будем использовать, можно найти в дополнительных материалах для ВидеоКурса. Также в этом видео мы снова вспомним, как подключать скрипты, так как скрипты играют далеко не последнюю роль во вставке аудио в HTML.

Как вставить аудио в HTML-документ?

Для вставки аудио в HTML сначала нам необходимо подключить скрипт, который мы сможем найти в дополнительных материалах. Для этого, до закрывающего тега <head> мы пропишем следующий код:

<script type="text/javascript" src="папка со скриптом/audio-player.js"></script>

Обратите внимание, что в пути необходимо указать папку, в которой находится скрипт и название самого скрипта. Если Вы испытываете сложности с определением пути к файлу, советую посмотреть видео урок об абсолютных и относительных ссылках.

После того, как скрипт подключен, мы должны дописать еще один скрипт, чтобы подключить саму оболочку плеера и указать параметры плеера:

<script type="text/javascript"> 
 AudioPlayer.setup("папка с файлом/player.swf", { 
 width: 290, 
 initialvolume: 100, 
 transparentpagebg: "yes", 
 left: "000000", 
 lefticon: "FFFFFF" 
 }); 
 </script>

Этот скрипт также необходимо прописать до закрывающего тега <head>. Стоит отметить, что здесь мы указали ширину, громкость, которые будут автоматически установлены при воспроизведении и другие параметры, которые мы можем менять на свое усмотрение.

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

<p id="audioplayer_2">Музыка</p>
<script type="text/javascript"> 
 AudioPlayer.embed("audioplayer_2", {soundFile: "путь к папке с муз. файлом/название файла.mp3"}); 
 </script>

Здесь также стоит обратить внимание на ID, который использован для отображения плеера. Следует учесть, что если мы хотим добавить более одной композиции на страницу нам необходимо прописывать новый ID для каждого файла. Например, чтобы добавить еще один файл мы немного изменим ID, примерно так:

<p id="audioplayer_2">Музыка</p>
<script type="text/javascript"> 
 AudioPlayer.embed("audioplayer_2", {soundFile: "путь к папке с муз. файлом/название файла.mp3"}); 
 </script>

И так далее. Достаточно просто менять порядковый номер и все.

Ну, вот в принципе и все. Теперь мы знаем, как добавить аудио в HTML-документ. Конечно, существуют и другие способы. Но я считаю в нашем случае этого варианта вполне достаточно.

Да, кстати, информацию о плеере можно найти здесь — http://wpaudioplayer.com/standalone/

Видео урок: Как вставить аудио в HTML-документ?

HTML-справочник и другие материалы можно и нужно скачать здесь!

В следующем видео подробно поговорим об устаревших тегах в HTML 4.01.

Оставьте свой коммент

Комментариев пока нет, но вы можете стать первым!

Чтобы оставить комментарий, заполните, пожалуйста форму ниже:

Смайлы

Обязательно для Заполнения!

Обязательно для Заполнения!

Проверка комментариев включена. Прежде чем Ваши комментарии будут опубликованы пройдет какое-то время.

Отправить жалобу разработчику сайта

Если у Вас возникли проблемы, не стесняйтесь отправлять жалобу, она обязательно будет учтена и все будет исправлено.

[contact-form-7 404 "Not Found"]

Спасибо большое за поддержку проекта! :)

Для поддержки проекта, выберите убодный способ для оплаты: