Встраиваемый mp3 плеер на сайт - это просто!

Как встроить mp3 плеер на сайт?Конечно, если у вас сайт, который работает на CMS, примеру такой, как у меня – вы можете просто воспользоваться специальным плагином, и подключить любой mp3 файл.

Однако, часто бывает ситуация, когда вам необходимо подключить mp3 плеер на сайт, который использует лишь HTML и CSS. Допустим, вы продаете какой-нибудь товар, и решили встроить на продажном сайте аудио обращение к потенциальным клиентам.

Как встроить mp3 плеер на сайт проще всего?

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

Это все просто, вот только где взять этот “волшебный” код, да и сам флэш плеер?

Тренинг по вёрстке сайта на HTML5 и CSS3

Я сам, лично, использую два варианта таких плееров, но уверяю вас, если хорошо поискать в интернете – можно найти просто огромное количество!

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

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

Однако, в наше время, хостинг стоит не так уж и дорого. Тем более, если вы собираетесь разместить один mp3 файл на вашем сайте.

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

Скачать пример встроенных mp3 плееров.

Предупреждения:

1.    Имена mp3 файлов не должны содержать русских букв и пробелов. Иначе аудио не запустится. Должны быть только латинские символы.

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

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

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

5.    Если нет программы, которой вы бы хотели просмотреть код, тогда вам на страничку про редакторы.

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

В папке script размещен скрипт и сами флэш плееры. А в папке music – сами песни.

Все вопросы сунем в комментарии.

Комментариев: 37 RSS

Тренинг по вёрстке сайта на HTML5 и CSS3
Оставьте комментарий!

Вы можете войти под своим логином или зарегистрироваться на сайте.

(обязательно)

Комментариев: 37
  •  Alexander Pchela | 13 октября 2010 в 09:35:04

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

  •  Серёга | 13 октября 2010 в 11:09:00

    Здравствуйте!

    Нажимаете на ссылку, на открывшейся странице нажимаете кнопку простое скачивание, если вы не имеете платного аккаунта.

    На следующей странице вводите защитный код на картинке и жмете - скачать.

    Ждете 59 секунд, там будет идти таймер, когда он закончится, вместо него появится ссылка. Жмем ее. По нажатии появляется окно загрузки.

    Так же окно может появиться через некоторое время.

    Просто дождитесь появления.

  •  Александр | 13 октября 2010 в 21:01:40

    Здравствуйте! А зачем скрипт подключать? Ведь и без него вроде всё работает.

  •  Александр | 13 октября 2010 в 21:32:55

    + ещё, если надо сделать плеер с плейлистом то берём этот код:






    Там где sound1.mp3 sound2.mp3 sound3.mp3 прописываем названия ваших песен.

    Затем вставляем этот код в блокнот и сохраняем как "имя.xml" (пример: playlist.xml)

    Загружаем этот файл на хостинг. Далее сылку на этот файл прописываем в код плеера в то место, где ссылка на одну песню(качайте из поста архив, там будет код плеера).

    P.S. Сергей, если инфа полезная, то наверное будет лучше добавить её в архив с кодом, добавив ваши коментарии.

  •  Аноним | 10 ноября 2010 в 21:56:08

    подскажите пожалуйста, как правильно прописать последовательность файлов, чтоб один автоматически сменял другой?

  •  alexblag3 | 17 ноября 2010 в 23:07:18

    Ну, как так, никто не ответит, чо не знаете? Или глупость спросил?

  •  Серёга | 17 ноября 2010 в 23:47:31

    Да, возможность есть.

    Просто завтра расскажу.

    Мне пользователь 2010-10-13 в 21:01:40 | Александр оставлял в комментах, но там код не прописался))

    С мишкой который на аватаркеwink

  •  Александр | 19 ноября 2010 в 00:56:27

    Код плейлиста берём отсюда _http://textsnip.com/00b045, а далее действуем как описано в 4 комментарии. Удачи wink

  •  alexblag3 | 19 ноября 2010 в 03:51:46

    Нифига не понял. Чо им туда вводить надо.

  •  Александр | 19 ноября 2010 в 04:04:52

    Ты скачал пример встроенных mp3 плееров? (ссылка в статье)

    Если да то делай так:

    1. Берёшь код плейлиста отсюда _http://textsnip.com/00b045 и копируешь его в блокнот

    2. Вместо sound1.mp3 sound2.mp3 sound3.mp3 прописываешь ссылки на свои mp3 файлы

    3. Сохраняешь этот код как "имя.xml" (пример: playlist.xml)

    4. В коде, который ты скачал по ссылке в статье (файл называется сode), вместо ссылки на mp3 прописываешь ссылку на файл playlist.xml.

    5. Сохраняешь всё это дело.

    Удачи.

  •  alexblag3 | 19 ноября 2010 в 04:59:37

    Ok" я сначала ссылку вместе с запятой вставил и ваще не туда попал.

    Все в норме, буду пробовать. Благодарю!

  •  Серёга | 19 ноября 2010 в 08:56:06

    Ну как alexblag3 получилосьquestion

    Александр можешь ссылки просто писать, без префиксов, Макс все равно их в текст переводит.

  •  alexblag3 | 20 ноября 2010 в 04:15:45

    Руки не доходят. Дойдут отпостюсь.

  •  alexblag3 | 22 ноября 2010 в 14:39:16

    Yes!!!)))Yes!!!)))))) ЗАРАБОТАЛА!!! УРА-А-А!!!LOL

  •  Александр | 22 ноября 2010 в 14:41:23

    excaimПоздравляюexcaim

    ОООО скока мы нафлудили...bug

  •  alexblag3 | 22 ноября 2010 в 15:05:26

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

    Такое возможно?

  •  Серёга | 22 ноября 2010 в 15:42:28

    Чет не догоню - зачем тебе плэйлист на сайте?

    О чем сайт?

    Просто посетителям задолбет одно и тоже слушать.

    Может проще поставить интернет радио?

  •  alexblag3 | 22 ноября 2010 в 15:47:11

    Сайт православный. Лекции проф. Московской Духовной Академии (избранные) Проповеди Патриарха (избранные) круглосуточно.

  •  Александр | 22 ноября 2010 в 15:48:40

    rolleyes тааак, ну знаю только как сделать чтобы он автоматом запускался (в нижнем флэш плеере прописано autostart=no (найдёшь поиском), так вот если no заменить на yes, должно получиться так autostart=yes, то плеер будет запускаться автоматом (не забываем сохранять изменения)), а как сделать, чтобы по кругу крутил пока не знаю. И вообще я согласен с Сергеем. Плеер считаю ненужным, сам всё время их вырубаю, если вижу на сайте, а вдруг ты не узнаешь вкусов посетителя? и попросту его потеряешь.

  •  Александр | 22 ноября 2010 в 15:50:52

    Так если там лекции, может лучше сделать для каждой своё описаение и свой плеер и тогда посетитель захотел - послушал нужную лекцию, а так клуглые сутки крутитьgrrr Смысл?

  •  Серёга | 22 ноября 2010 в 15:54:08

    Вот вот, это накаляет, без обид.

    Но я тоже всегда выключаю.

    Понимаю, радио на этом сайте будет не в темуgrrr

    Но и музыка на сайте - это пока не слишком уместно.

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

    Поэтому - самый лучший вариант - это плэйлист!

    Захотят послушают, не захотят - нет.

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

    Мой совет - не в коем случае не делайте музыку автостартом, просто разместите плеер на видном месте.wink

  •  Серёга | 22 ноября 2010 в 15:54:46

    PS: блин, не нравятся мне мои смайлыsmile

    Хочу вставить анимированные. из скайпа))

  •  Александр | 22 ноября 2010 в 15:57:20

    Сергей М.,

    ЗЫ А мне наоборот скайповские не нравятся, какие-то они слишком простые. Ну что ж, дело вкуса.

    ЗЫЫ О, уже авторская ЦМС получится, со своими переделками LOL

  •  Серёга | 22 ноября 2010 в 16:01:00

    Угу, так мне просто нравятся их анимация, а других анимашек я не нашел, может есть че поинтереснее?

  •  Серёга | 22 ноября 2010 в 16:02:02

    А насчет вкуса, так у многих есть система такая, и везде одни и теже смайлы, а у мну скайповские будут, я даже секретные скайповские смайлы достал cheese wink

  •  alexblag3 | 22 ноября 2010 в 16:03:19

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

    Как понял, все же лучше будет на каждую лекцию свой плеер. А плейлист нужен потому, что у меня на хостинг больше 5 мб не загрузишь, так что буду клеить.

  •  Серёга | 22 ноября 2010 в 16:05:48

    Веселый хостингLOL

  •  alexblag3 | 22 ноября 2010 в 16:12:15

    народ grin

  •  alexblag3 | 9 декабря 2010 в 18:11:09

    Во-о! Так гораздо лучше. А то, какие то демонические темы. angel

  •  Евгений | 14 сентября 2011 в 18:27:25

    Не работает плейлист(

    Поставил все, как написано, проигрывает. А когда заменяю адрес на playlist.xml - не-а.

    Может кто-то подсказать в чем дело?

  •  Евгений | 14 сентября 2011 в 18:51:00

    Проблема выглядит так:

    в браузере вижу плеер, кликаю на play. Он показывает название песни, но песня не проигрывается. Кликаю на стрелочку вправо, чтобы проиграть следующую. Отображается ее название, но она тоже не проигрывается.

    Если без плейлиста, то все работает.

  •  Евгений | 14 сентября 2011 в 19:11:42

    Заработало!

    А в чем проблема была, так и не понял. Адрес, по ходу, как-то не так был прописан в playlist

  •  Ирина Буренина | 12 октября 2011 в 12:05:24

    В комменте Александра написано "2. Вместо sound1.mp3 sound2.mp3 sound3.mp3 прописываешь ссылки на свои mp3 файлы" это значит, что файлы должны быть залиты на файлообменник? а если музыка в компе, то не получится? нужна ведь ссылка?

    И еще - вот это: "В коде, который ты скачал по ссылке в статье (файл называется сode), вместо ссылки на mp3 прописываешь ссылку на файл playlist.xml." где ее взять, эту ссылку? Спасибо!

  •  Серёга | 12 октября 2011 в 12:19:46

    Файлы должны быть залиты в интернет с прямым ссылками. ФО не подойдут.

    Например - на свой хостинг.

  •  Аноним | 4 ноября 2011 в 14:50:37

    Хорошее решение.

    Еще могу посоветовать решение для чайников (встроить его проще некуда), но без плейлиста:( Например, сайт http://www.muzicons.com/ дает тоже простое решение и возможность сделать "забавный" плеер. Сила в простоте. Это сервис и на выходе просто html код.

    Итак, выбираете иконку, url путь до Вашего файла, один из трех Вариантов внешнего вида и цвет. Получается отличный вариант. Советую.

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

    В общем решение нашлось. И пришлось его опубликовать на своем блоге.

    Пост так и назвал "Плеер с автозапуском для аудио? Отличное решение…" http://runetbiz.com/business/pleer-s-avtozapuskom-dlya-audio-otlichnoe-reshenie.htm

  •  Катрин | 29 марта 2014 в 00:01:47

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

    •  Елена | 31 марта 2014 в 10:06:50

      Катрин, здравствуйте!

      На Макссайт такой функции нет.

      Хотя можно обратиться к разработчику, может он или кто-то из его команды сотворит такое smile

      http://forum.max-3000.com/