music2

Как добавить аудио-плеер на сайт - этот вопрос прежде всего волнует тех, кто увлекается созданием музыкальных открыток. Самый простой способ добавить аудио-плеер на сайт - добавить его в виде html-кода.

В своем бесплатном курсе по созданию  открыток "Музыкальные открытки своими руками" я очень подробно описала, как добавить на свою открытку аудио-плеер с помощью готового кода, который можно сгененировать на сайте http://flv-mp3.com/ru/mp3/.

Для того, чтобы получить код плеера необходимо предварительно загрузить музыкальный файл к себе на хостинг, например, в созданную для этого папку audio. Название файла должно состоять из латинских букв или цифр без пробелов - это важно, иначе ваша музыка не будет проигрываться. Пробелы в названии можно заменить нижним подчеркиванием, проследите, чтобы не было никаких скобок. Теперь вам необходимо прописать адрес к загруженному файлу. Он будет выглядеть примерно так http://ваш_домен.ru/audio/название_музыкального_файла.mp3.

Теперь переходим на сайт, указанный выше и собираем наш плеер:

audio1

Теперь надо позаботиться о внешнем виде этого файла:

audio2

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

Как видно, цветовой выбор не очень богат, поэтому лучше воспользоваться готовыми Скинами:

audio3

Пройдитесь по строчкам и выберете для себя наиболее подходящий, я для себя выбрала в данном случае золотистый.  После этого вы нажимаете на "Собрать и получить html-код":

audio4

Если у вас правильно прописан путь к музыкальному файлу, то музыка начнется проигрывать. Если вас что-то не устраивает в уже готовом плеере (вы хотите выбрать другой скин, сделать его немного поменьше, поменять ссылку на другой музыкальный файл, то достаточно нажать на "Редактировать". Если же вас все устраивает, то вы копируете получившийся html-код:

audio5

Теперь достаточно вставить этот код в кодовую часть вашего сайта в том месте, где вы хотите, чтобы располагался этот плеер, и все готово:

audio6

audio7

audio8

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

audio9

Вы можете собирать аудио-плеер самостоятельно на том же сайте:

audio11

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

audio12

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

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

Но я могу предложить вашему вниманию небольшой код плеера, который вы можете добавлять к себе в открытку:

<div id="wb_MediaPlayer1" style="position:absolute;left:0px;top:0px;width:100px;height:100px;z-index:0;">
<audio src="audio.mp3" id="MediaPlayer1" autoplay="autoplay" controls="controls">

 

Этот код следует вставить между тегами:

<body>...</body>

audio18

Рядом (в этой же папке) с этим html-файлом разместите audio-файл с расширением mp3 (выделен красным). Если вы вставляете файл с другим названием, то в коде тоже следует тоже поменять.

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

audio19

Причем, по умолчанию, он будет располагаться в левом верхнем углу.

Кому-то может показаться, что таким плеером можно испортить всю открытку. В таком случае опустите его в самый низ вашей открытки. Для этого проставьте теги пробелов:

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
...
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

перед строкой

<audio src="audio.mp3" id="MediaPlayer1" autoplay="autoplay" controls="controls">

Чем длиннее ваша открытка, тем больше таких пробелов:

audio20

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

Один комментарий: Как вставить аудио-плеер на сайт

Страница 1 из 11
Страница 1 из 11

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Авторизация на сайте
Анимированные фоны
Магазин
katalog
plus_i_minus4
turbobanner220
Как спасти от краха свой онлайн бизнес
Подпишись на новости сайта: