8 Май 2012

Как добавить музыку на сайт

Автор: admin. Рубрика: IT .

Как добавить музыку на сайтДобрый день. Для всех желающих решил сделать небольшой пост о том,  как добавить музыку на сайт. Многим блоггерам , сайтостроителям и просто хорошим людям рано или поздно приходит такая мысль в голову.

Делая свою статью "Бриллианты навсегда" я решил снабдить ее музыкальным сопровождением и передо мной также встала такая задача. Довольно быстро я определился с выбором плеера на сайт. Им стал Uppod.  Выбрал его, перебрав, наверное с десяток плееров. Вообще нравится podfm, но это плеер для подкастеров и в политике этого ресурса сказано, что нельзя добавлять музыкальные отрывки  и песни целиком. Но Uppod ничем не уступает конкуренту. Его безусловные достоинства:

  • малый размер
  • универсальность
  • легкость в использовании

На мой е-mail пришло несколько писем от посетителей сайта, где задавался вопрос "как вы поставили музыку на сайт".

Давайте вместе это и сделаем.

Сначала заходим на сайт uppod.ru и проходим минутную регистрацию.

Как добавить музыку на сайт

1

Далее выбираем - собрать плеер - файлы. Попадаем в следующее окно.

Как добавить музыку на сайт

2

Жмем "Скачать". Этот файл uppod.swf скачиваем на компьютер, а затем закидываем на хостинг, например в папку uploads, которая в свою очередь находится в папке wp-content. Путь при этом будет выглядеть примерно так http://fotoblur.ru/wp-content/uploads/uppod.swf   Думаю, принцип ясен. Этот файл мы закинем на хостинг только один раз. Это собственно сам плеер и больше никаких манипуляций с ним делать не надо. Разумеется Вы указываете свой путь для своего сайта. Можно просто в строку подставить свой сайт.

как добавить музыку на сайт

3

Далее, добавляем в  плеер наш музыкальный mp3 файл, который хотим увидеть на сайте. Как видите проигрыватель Uppod универсален, можно также выводить видео на сайт, фото. Мы делаем музыку, научившись это делать, можно будет таким же образом добавлять и видео. Но, предварительно, наш музыкальный файл нужно положить туда, откуда он будет проигрываться в плеере. Я добавил mp3 файл на хостинг опять же в папку uploads. И у этого файла оказался вот такой путь http://fotoblur.ru/wp-content/uploads/Laura Matisse - Brilliance Forever.mp3

Хотя можно использовать и хранилище файлов на самом uppod.ru Музыкальный файл перед добавлением я рекомендую сжать до нужного битрейта (обычно 128 кбит/сек), чтобы уменьшить вес файла.

Далее: Жмем - аудио - файлы - плюс.  Указываем название песни, как она будет отображаться в проигрывателе и в следующем поле "Ссылка" пишем путь к музыкальному файлу: в моем случае http://fotoblur.ru/wp-content/uploads/Laura Matisse - Brilliance Forever.mp3

Все это нужно для получения результирующего кода для вставки на сайт. Осталось совсем немного.

Теперь нужно придать стиль самому плееру.

Как добавить музыку на сайт

4

Делаем следующее: Аудио - Стили - Плюс.  Попадаем в редактор стилей.

Как добавить музыку на сайт

5 (кликабельно)

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

Вы получите файл в формате txt, примерно такого вида 123-12.txt Скачайте его на компьютер, а потом, как и в предыдущих случаях отправьте его на хостинг. Этот файл отвечает за внешний вид проигрывателя. Возможно Вы захотите и другие стили со временем, поэтому создайте в папке uploads  на хостинге еще одну папку styles и поместите файл вида 123-12.txt в эту папку. У меня получился такой путь http://fotoblur.ru/wp-content/uploads/styles/123-12.txt  В другой раз, создав другой стиль плеера можно будет закинуть сюда файлы со стилями. А менять стили можно из своего аккаунта в разделе "Аудио - Файлы - Нужный файл - Редактировать - Стили - Ок".

Теперь пропишем основные пути в настройках. Это делается один раз.

Как добавить музыку на сайт

6

Прописываем путь к стилям и к файлу uppod.swf   Выше мы рассмотрели, как взялись эти ссылки. Жмем "Сохранить".

Теперь нам нужно забрать готовый код с учетом всех ссылок и стилей.

Как добавить музыку на сайт

7

Идем по знакомому пути: выбираем нужный музыкальный файл, если их несколько и справа внизу нажимаем на синий квадратик. Это и есть код.

Как добавить музыку на сайт

8

Этот код HTML добавляем в статью обычным способом в режиме HTML. Поздравляю ! Музыка (и видео при желании) на сайте.

Несмотря на кажущуюся сложность на самом деле все просто. Мы все уже сделали и теперь, чтобы добавить другой музыкальный файл, нужно будет только закинуть его на хостинг, добавить новую ссылку на этот файл в "Аудио - Файлы" и скачать код, так как все остальное (стили, плеер) у нас на месте.

Таким образом, мы узнали как добавить музыку на сайт и тем самым улучшить свой блог  и самое главное - радовать своей музыкой посетителей сайта.



18 отзывов пока...

Вячеслав пишет:

08 Май 2012 в 23:02.

Спасибо за информацию,попробую применить.Удачи.

[Ответить]

Раиса пишет:

09 Май 2012 в 5:10.

Спасибо за такое подробное описание, обязательно попробую установить.

[Ответить]

Анна пишет:

09 Май 2012 в 9:37.

Спасибо за подробную инструкцию!

[Ответить]

admin пишет:

09 Май 2012 в 11:39.

Всем пожалуйста.

[Ответить]

Алексей пишет:

09 Май 2012 в 12:57.

Не знал как это делается, а теперь буду применять.Спасибо.

[Ответить]

Александр пишет:

10 Май 2012 в 0:10.

Мне как новичку это очень интересно, буду пробовать.

[Ответить]

Андрей пишет:

10 Май 2012 в 13:13.

Изучил уже несколько вариантов, но про Uppod раньше не слышал. Спасибо!

[Ответить]

Михаил пишет:

10 Май 2012 в 16:55.

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

[Ответить]

admin Ответил:

Михаил, пожалуйста. Желаю удачи в этом деле ! Эх, а ведь мне тоже английский близок. Только пока нигде особо не нужен, кроме, как в Интернете.

[Ответить]

Татьяна пишет:

10 Май 2012 в 20:24.

Спасибо! Воспользуюсь вашей подробной инструкцией позже. Сначала нужно придумать для чего на сайте музыку вставлять.

[Ответить]

admin Ответил:

Татьяна, точно. Блогу уже год, а добавил музыку только теперь.

[Ответить]

Владимир пишет:

11 Май 2012 в 13:31.

С музыкой сайт стал еще интереснее, в добавление к сменяющимся картинкам он как будто оживает.

[Ответить]

Дмитрий пишет:

11 Май 2012 в 13:31.

Добрый день. Наконец-то я добрался до комментариев. Воспользуюсь вашей статьей, в своих целях – благодарю. Заходите в гости.

[Ответить]

admin Ответил:

Дмитрий, пожалуйста. Заходите.

[Ответить]

Евгения пишет:

11 Май 2012 в 20:07.

Спасибо. Интересная информация. Очень даже нужная!

[Ответить]

Роман пишет:

03 Янв 2013 в 10:46.

Спасибо автору за информацию полезную. это нужная информация

[Ответить]

Юлия пишет:

01 Март 2013 в 23:29.

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

[Ответить]

admin Ответил:

Юлия, сейчас по своей-же инструкции добавил в эту статью плеер (желтый). Так что все работает. Попробуйте еще раз внимательно все прочитать и сделать, прописав все ссылки правильно. Код на сайте добавляйте обязательно в режиме HTML. А когда создаете сам стиль на сайте uppod, то финальный вариант зафиксируйте, нажав кнопку ОК.

[Ответить]

Ваш отзыв

  1. Комментарии, содержащие нецензурную брань, грубейшие грамматические ошибки или албанскую лексику, удаляются.
  2. В поле "Сайт" можно указывать только ссылку на главную страницу вашего сайта/блога. Ссылки на прочие веб-ресурсы или партнерские ссылки будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, адреса сайтов. Просьба указывать нормальное имя или ник.
  4. Короткие, бессмысленные кoммeнтapии, типа "Спасибо!", "Интересная статья", будут удалены.
  5. Комментарии не по теме, спам, любая реклама в сообщениях будут удаляться.
  6. Владелец сайта имеет право удалить любой комментарий без объяснения причин.
  7. Любые оскорбления, осуждения, нелицеприятные суждения, угрозы, высмеивания, направленные в адрес владельца сайта или других комментаторов, будут немедленно удаляться.

Рубрики

Последние записи

Последние комментарии

Создай свой сайт !

Архивы

Смотри на YouTube !

Подпишитесь на канал fotoblur в YouTube и получайте новые видео !