суббота, 10 января 2015 г.

Как включить mp3 плеер в ваш блог

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

План работы
1 Найти код mp3 проигрывателя
2 Встроить плеер в страницу
3 Найти и вставить ссылки на нужные песни
4 Набрать текст песен

Нашла нужный проигрыватель, в интернете их много, даже есть сайты конструкторы, куда только ссылку на песню вставляешь, а он тебе готовый код проигрывателя с песней дает, там даже над дизайном можно поработать.
Конструктор плеера пример 1
Конструктор плеера пример 2
Но какой бы я плеер не встраивала, не работает, я уже решила опустить руки.
Оказывается, когда работаешь в НТМL, предпросмотр страницы работает криво, нужно сразу публиковать и смотреть что получилось. Поэтому - когда создаете страницу с помощью НТМL, не пользуйтесь предпросмотром, публикуем - смотрим - изменяем, если необходимо.
Обнаружив данную особенность Blogger, я наконец встроила плеер.

<div align="center">
<object data="http://flv-mp3.com/i/pic/ump3player_500x70.swf" height="70" type="application/x-shockwave-flash" width="470">
<param name="wmode" value="transparent"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><param name="movie" value="http://flv-mp3.com/i/pic/ump3player_500x70.swf"><param name="FlashVars" value="way=сюда вставляем ссылку нужной песни&amp;swf=http://flv-mp3.
com/i/pic/ump3player_500x70.swf&amp;w=470&amp;h=70&amp;time_seconds=
0&amp;autoplay=0&amp;q=&amp;skin=http://flv-mp3.com/files/skins/skin_aluminium
1.swf&amp;volume=50&amp;comment="></object> </div>

Плеер ориентирован по центру, жирным шрифтом выделяю место, куда вставляется ссылка на песню, без пробелов. Если в самой ссылке есть пробелы заменяем их на _ /нижние тире/.
Например:http://dl.zaycev.net/116789/759668/debyussi_-_lunnyy_svet_(zaycev.net).mp3
Итогом получается так:


Далее я набрала текст песен, опубликовала страницу и с победным УРА! думала, что все загвоздки пройдены.
Но проблемы продолжали сыпаться!
Я использовала прямые ссылки из источников, которыми всегда пользуюсь.
http://b-track.ru/
http://x-minus.org/
Оказывается, они закрывают доступ к ссылке, считая роботом встроенный проигрыватель.
Добавила все песни в нашу группу В Контакте, вставила ссылки оттуда, но тоже через пару дней они перестали работать
Тогда занялась поиском сайтов, с которых будет постоянный доступ по ссылке. Один из них -http://zaycev.net/. Но на этих сайтах не всегда можно найти необходимые треки(((
И вот родилось новое решение! 
1. Загружаете нужную песню на Google ДИСК
2. Когда прослушиваете, нажимаете на значок - в новом окне
3. В новом окне нажимаете на значок другие действия
4. Выбираете - встроить.
5. Копируете код, вставляете в нужном месте страницы в разделе НТМL /можно отредактировать размеры/
И это оказалось самым простым, пользуясь только возможностями Google. Страница конечно по дизайну оказалась неустойчивой, но зато дети могут прослушать все песни и минусовки.
Новогодние песни
P.S. Когда собиралась создавать страницу с песнями и предположить не могла, сколько хлопот она принесет, но зато ученики имели возможность репетировать дома, а я получила опыт работы с плеерами. Новогодний праздник получился чудесный!
Поздравляем Всех с Новым годом и Рождеством! 
Всего только самого светлого и наилучшего!

6 комментариев:

  1. Огромное спасибо за сообщение! Прочитала с большим интересом! Тема "воспроизведения звуковых файлов" меня давно волнует и на одном из наших вебинаров о плеере должна была рассказывать учитель началтных классов, соведущая вебинара А.В.Потапенко. Попробую по вашей инструкции выполнить вставку песни.

    ОтветитьУдалить
  2. Интересная идея про Диск, но только надо настроить доступ "для всех", чтобы не было проблем с учётной записью, если её нет у ребёнка.

    ОтветитьУдалить
  3. С воспроизведением с Диска, пока еще проблем не возникало, доступ, да - для всех. Если у Вас возникли проблемы, напишите мне пожалуйста, хочется "довести все до ума"

    ОтветитьУдалить
  4. Лилия Сергеевна! А у меня такой простой вопрос - как вы берете сам трек с указанных сайтов?

    ОтветитьУдалить
  5. Спасибо! Не знала о такой возможности! Теперь будет только одна забота - найти нужный файл, а разместить всегда получится!

    ОтветитьУдалить