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

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

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

Теперь пришло время разобрать еще один вопрос, с которым мы можем рано или поздно столкнуться, это как вставить аудио в 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/