<MyRusakov.ru />

Профессия Web-разработчик

Профессия Web-разработчик

Этот комплект за 8 месяцев превратит Вас в Web-разработчика с нуля. Учиться достаточно 1 час в день.

Начнёте Вы с HTML, CSS и вёрстки сайтов. Потом перейдёте к программированию и JavaScript. Затем изучите PHP, MySQL, SQL, Python. Изучите Web-фреймворки Laravel и Django. Создадите 5 своих сайтов для портфолио.

Комплект содержит:

- 540 видеоуроков

- 110 часов видео

- 1205 заданий для закрепления материала из уроков

- 5 финальных тестов

- 7 сертификатов

- 12 Бонусных курсов

Подробнее
Подписка

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

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Как вставить аудио на сайт

Как вставить аудио на сайт

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

Первым делом, Вы должны понять, что HTML (4-я версия) не имеет встроенных возможностей вставки аудио, поэтому нам потребуется Flash-плеер. На мой взгляд, самый лучший плеер можно собрать здесь: http://flv-mp3.com/ru/. При сборке можно указать путь к Вашему аудио-файлу, указать размеры и внешний вид плеера. Далее Вам дадут готовый код, который Вы сразу можете вставлять на свой сайт внутри тега body, и аудио сможет начать проигрываться.

Пример работы плеера:

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

<object width="470" height="70" data="http://flv-mp3.com/i/pic/ump3player_500x70.swf" type="application/x-shockwave-flash">
  <param value="transparent" name="wmode">
  <param value="true" name="allowFullScreen">
  <param value="always" name="allowScriptAccess>
  <param value="http://flv-mp3.com/i/pic/ump3player_500x70.swf" name="movie">
  <param value="way=https://files.myrusakov.ru/free/files/music.mp3&swf=http://flv-mp3.com/i/pic/ump3player_500x70.swf&w=470&h=70& time_seconds=0&autoplay=0&q=&skin=sky&volume=70&comment=MyRusakov.ru" name="FlashVars">
</object>

Самые важные параметры находятся в "FlashVars". В частности, в way находится путь к аудио-файлу, который нужно проиграть. Другие параметры, такие как w (ширина плеера), h (высота плеера), autoplay (автозапуск) и другие параметры Вы можете менять. Хотя если Вы собирали плеер, то ничего менять не потребуется, разве что way. Кстати, в way можно указывать не только абсолютный путь, но и относительный.

Вот таким несложным способом вставляется аудио на сайт. Вам лишь остаётся просто скопировать приведённый код, заменить way и вставить к себе на сайт.

Если Вы хотите узнать больше по HTML, то посмотрите мой бесплатный курс с примером создания сайта на HTML: http://srs.myrusakov.ru/html

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (57):

RussianPro RussianPro 24.10.2011 19:26:45

Круто! Спасибо! Давно искал как это сделать.

Ответить

GoTo GoTo 01.04.2012 22:35:41

Здравствуйте, Михаил. Не могу понять почему не отображается проигрыватель в опере? В IE все работает. Вот код: <object type="application/x-shockwave-flash" data="i:\WEB\example1\ump3player\ump3player_500x70.swf" height="70" width="470"><param name="wmode" value="transparent" /><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="movie" value="i:\WEB\example1\ump3player\ump3player_500x70.swf" /><param name="FlashVars" value="way=i:\WEB\example1\111.mp3&amp;swf=i:\WEB\example1\ump3player\ump3player_500x70.swf&amp;w=470&amp;h=70&amp;time_seconds=222&amp;autoplay=0&amp;q=&amp;skin=sky&amp;volume=70&amp;comment=111" /></object>

Ответить

Admin Admin 01.04.2012 22:50:33

Путь неправильно написан. Где file:///? А ещё лучше пишите относительный путь.

Ответить

GoTo GoTo 02.04.2012 00:12:34

Спасибо, заработало. p.s. Оперативно отвечаете. :-bd

Ответить

сер31 сер31 16.05.2012 20:51:19

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

Ответить

Admin Admin 16.05.2012 21:28:37

Скопируйте эту песню на сайт и укажите к ней относительную ссылку.

Ответить

сер31 сер31 16.05.2012 21:35:34

дело в том что я только пишу сайт (на dreamweaver) и остановился на том что нужно песню поставить.как мне быть?

Ответить

Admin Admin 16.05.2012 21:37:23

Вся статья и мой комментарий. А в вообще: http://myrusakov.ru/html-dreamweaver.html Я лишний раз убедился в своём мнении, что dreamweaver - это не просто плохо, но и жутко вредно.

Ответить

сер31 сер31 16.05.2012 21:41:23

я может быть задам глупый вопрос (Вы извините но я просто новичок в этом деле) а можно песню к примеру вконтакте скинуть и указать ссылку из контакта?

Ответить

Admin Admin 16.05.2012 21:43:46

Если Вы доберётесь до ссылки на mp3-файл, то да, можно. Если просто на какую-то страницу с плеером, то нет.

Ответить

user user 20.05.2012 11:17:58

Здравствуйте Михаил...как вы и говорили плеер можна собрать на http://flv-mp3.com/ru/ ...я собрал в итоге получился такой Html код (хотя судя по тому как закрывается тег <param/> это Xhtml) <object type="application/x-shockwave-flash" data="http://flv-mp3.com/i/pic/ump3player_500x70.swf" height="0" width=""><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=http:// files.mail.ru/LHAR7D&amp;swf=http://flv-mp3.com/i/pic/ump3player_500x70.swf&amp;w=&amp;h=0&amp;time_seconds=0&amp;autoplay=1&amp;q=1&amp;skin=black&amp;volume=70&amp;comment=Help" /></object>...после того как я поубирал лишние слэши и устоновил на страницу Html код то увидил там плеер ...который к сожелению не проигрывает музыку ...скажите в чем ошибка?

Ответить

Admin Admin 20.05.2012 12:58:40

Во-первых, странный путь http:// files.mail.ru/LHAR7D - это явно не MP3-файл, а ссылку на HTML-страницу. Нужен именно MP3-файл. Во-вторых, не надо ничего удалять, пока не убедитесь, что всё работает. А уже после этого и можно немного почистить код.

Ответить

ken15 ken15 28.05.2012 14:36:50

Михаил, а есть что-то типа flow player только для мелодий

Ответить

Admin Admin 28.05.2012 14:39:11

Не знаю, поищите в Google. Мало кому нужен здоровый плеер для видео, который проигрывает только музыку.

Ответить

Any Litvin Any Litvin 01.06.2012 17:25:10

<object type="application/x-shockwave-flash" data="http://flv-mp3.com/i/pic/ump3player_500x70.swf" height="250" width="500"><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=http://mysite.local/music/rihanna_feat._fiew.mp3&amp;swf=http://flv-mp3.com/i/pic/ump3player_500x70.swf&amp;w=&amp;h=0&amp;time_seconds=164&amp;autoplay=0&amp;q=&amp;skin=white&amp;volume=70&amp;comment=Any" /> </object> Плеер есть, а музыка не проигрывается. Где ошибка?

Ответить

Admin Admin 01.06.2012 17:27:43

Не надо использовать спецсимволы в названии файлов. rihanna_feat._fiew.mp3 - никаких _ и точек быть не должно.

Ответить

Any Litvin Any Litvin 01.06.2012 18:16:23

<object type="application/x-shockwave-flash" data="http://flv-mp3.com/i/pic/ump3player_500x70.swf" height="250" width="500"> <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=http://mysite.local/music/kalimba.mp3&amp;swf=http://flv-mp3.com/i/pic/ump3player_500x70.swf&amp;w=&amp;h=0&amp;time_seconds=164&amp;autoplay=0&amp;q=&amp;skin=white&amp;volume=70&amp;comment=Any" /> </object> Исправила, все равно не получилось...

Ответить

Admin Admin 01.06.2012 18:20:09

А сам файл изменили? Или только код?

Ответить

Any Litvin Any Litvin 01.06.2012 18:22:48

Да

Ответить

Any Litvin Any Litvin 01.06.2012 18:49:33

Получилось!Я открыла свой сайт в другом браузере до этого в Опере пробовала - не получалось, потом в Explorere открыла заработало... P.S Страницу в Опере обновляла

Ответить

Grombesst Grombesst 17.06.2012 13:27:55

Здравствуйте Михаил. А можно в аудиоплеер несколько песен вставить?

Ответить

Admin Admin 17.06.2012 13:30:22

В данный плеер, думаю, нет.

Ответить

YaroslavPPOR YaroslavPPOR 03.09.2012 19:28:04

Доброго время суток, Михаил, меня интересует как вставить видео из ВК (там мне нравиться плеер)? Если видео можно вставить при помощи копирования кода, то аудио там лежит в блоке <div> и имеет кучу свойств (не без JS). Копирование кода не приведет желаемого результата, т.к. почти каждый элемент находиться в теге <div> со своим class и это значит что тег обработки каждого класа может лежать в разных тегах (пример тега div в котором заложен аудио-файл не буду показывать т.к. он очень длинный)

Ответить

YaroslavPPOR YaroslavPPOR 03.09.2012 19:58:36

Смог найти ссылку в коде но проигрывать могу только в нашем плеере=( Попробую поискать ссылку на плеер.

Ответить

ashtel ashtel 03.11.2012 15:02:36

Добрый день, Михаил! Подскажите пожалуйста вставляю в файл motd.txt (cs 1.6) ссылку на mp3 вот в таком виде http://www.yapfiles.ru/static/play.swf?st=aMDA0OTAxNTAt29b9&allowscriptaccess=always как сделать чтобы файл автоматически проигрывался???

Ответить

Admin Admin 03.11.2012 15:06:57

Про автозапуск прочитайте предпоследний абзац в данной статье.

Ответить

ashtel ashtel 03.11.2012 16:56:58

не получается, по большому счету мне не нужен плеер, мне просто нужно вставить прямую ссылку в motd.txt чтоб mp3 проигрался по ссылке автоматически. Разместил mp3 на yapfiles.ru, в motd.txt прописал прямую ссылку на этот файл, но проигрываться никак не хочет. СПС и сорри за оффтоп

Ответить

Admin Admin 03.11.2012 17:22:15

Проигрывание mp3 без плеера не возможно, и вообще нужно вставлять не в текстовый файл, а на HTML-страницу.

Ответить

ashtel ashtel 03.11.2012 19:30:26

Вот содержание motd.txt, который подгружается <html> <head> <title>Cstrike MOTD</title> <body background="'http://img.ii4.ru/images/2012/11/03/284574_741697.jpg"> <bgsound src="http://www.yapfiles.ru/files/490150/29b9fee8798918455897614b2710dc02.mp3?token=MDA0OTAxNTAtMTM1MTk0NjYwOQ"> <font color=#EEEE00> <br><center><H1> "mouse.Team Server"</H1></center></font> <body bgcolor=#000000><font color=#008B00> <br><center><H1>***************</H1></center></font> <br><font size=4 color=#CD0000> <br><b>7 - Дл&#1103 организации CW обращатьс&#1103 в агент или steam </b> </font> <br><font size=5 color=#FF0000><b> <b></font> <br><font size=5 color=#00FF00><b>Желаем вам удачной игры на нашем сервере!!! <b></font> </pre> </body> </html> в bgsound прямая ссылка на mp3 файл

Ответить

Admin Admin 03.11.2012 19:46:46

bgsound не поддерживается ни одним браузером, за исключением IE и Opera.

Ответить

ashtel ashtel 03.11.2012 20:05:06

так это не в браузере, это в игре cs 1.6, задумывалось, что будет проигрываться. Извиняюсь, но подскажите пожста как правильно сие сделать???

Ответить

Admin Admin 03.11.2012 20:20:28

Причём тут игра и HTML-код? Ваш вопрос вообще некорректен.

Ответить

sasha0309 sasha0309 12.12.2012 13:43:58

Михаил, я нашёл где ещё можно найти плеер.На http://music.yandex.ru/. Там даже можно выбирать цвет плеера.

Ответить

robot59 robot59 11.01.2013 16:33:04

Михаил у меня есть вопрос там надо вставить прямую ссылку на mp3 файл как это сделать??

Ответить

Admin Admin 11.01.2013 20:49:04

Загрузить его к себе на сайт, а потом поместить туда ссылку, ведущую на загруженный файл.

Ответить

interesado interesado 16.01.2013 11:20:04

Блин и здесь у меня ничего не получилось, также как и с видео. Мой свйт на локальном компе и запускаю я его прям в браузере, без denwera может в этом проблема?

Ответить

Admin Admin 16.01.2013 20:37:04

Надо запускать через Denwer, просто так браузер не позволит Flash использовать.

Ответить

DrLivsy DrLivsy 11.03.2013 23:34:48

<object width="470" height="70" data="http://flv-mp3.com/i/pic/ump3player_500x70.swf" type="application/x-shockwave-flash"> <param value="transparent" name="wmode"> <param value="true" name="allowFullScreen"> <param value="always" name="allowScriptAccess> <param value="http://flv-mp3.com/i/pic/ump3player_500x70.swf" name="movie"> <param value="way=C:/WebServers/home/mysite.local/www/картинки/aleksandr.mp3&swf=http://flv-mp3.com/i/pic/ump3player_500x70.swf&w=470&h=70& time_seconds=0&autoplay=0&q=&skin=sky&volume=70&comment=Fairy Tail" name="FlashVars"> </object> и... не пошло

Ответить

Admin Admin 11.03.2013 23:49:10

Нельзя использовать никаких русских символов в указании путей к файлам.

Ответить

DrLivsy DrLivsy 12.03.2013 10:03:24

О, yes yes !!! Благодарю!

Ответить

sunflower2013 sunflower2013 31.05.2013 17:06:19

Как заставить работать плеер в Opera 12.02?

Ответить

Admin Admin 31.05.2013 19:36:26

Сейчас уже более новая Opera, но и в 12.02 данный плеер прекрасно работает.

Ответить

sunflower2013 sunflower2013 01.06.2013 17:05:32

У меня плеер работает в Explorer 10, но в Opera 12.02 отказывается проигрывать музыку. Это исправимо?

Ответить

Admin Admin 01.06.2013 19:49:33

Возможно, что-то с настройками конкретно у Вас в Opera.

Ответить

Алексей Сорокин Алексей Сорокин 25.06.2013 23:39:04

Здравствуйте. Скажите пожалуйста, а можно ли вставлять такие файлы через другие языки, кроме Html?

Ответить

Admin Admin 26.06.2013 03:48:48

На сайты нет.

Ответить

savoks savoks 03.07.2013 13:07:07

Подскажите, как сделать AutoStart, сразу после открытии страницы?

Ответить

Admin Admin 03.07.2013 14:51:16

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

Ответить

Programmer93 Programmer93 07.09.2013 20:41:30

Здравствуйте,посмотрите в чем ошибка <object type="application/x-shockwave-flash" data="http://flv-mp3.com/i/pic/ump3player_500x70.swf" height="70" 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=file://images/free.mp3&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=green&amp;volume=70&amp;comment=by Nurik" /></object>

Ответить

finbuh1c finbuh1c 10.04.2014 12:34:55

Михаил Такая проблема, есть гугл транслейт, как можно по ссылке выводить на сайте перевод, чтобы проигрывалось на моем сайте, а не открывалась новая страница? Ссылка на пример, который возвращает гугл http://translate.google.com/translate_tts?tl=en&q=%22word%22

Ответить

Лия Лия 26.06.2014 17:04:51

Михаил, здравствуйте! Спасибо за статью, все отлично заработало! Подскажите пожалуйста, а как сделать скачивание файла, т.е. так, чтобы по ссылке на аудио файл, браузер его не проигрывал автоматически, а предлагал сохранить? Заранее спасибо!

Ответить

WeezyFB WeezyFB 26.08.2014 15:10:54

Пример Выпадающего меню с аудио - http://siteacademy.ru/index.php/htmldev/38-html/musical-drop-down-menu-html-audio

Ответить

Edwardglv Edwardglv 25.01.2015 14:38:51

Неплохо было бы все разъяснить в этом коде, чтоб лучшее представление было что делаешь

Ответить

Marsik Marsik 17.09.2015 19:54:21

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

Ответить

Marsik Marsik 17.09.2015 20:34:41

Уже сделал - вставил ссылку из "Мой мир". Дропбокс-г***о. Всё работает.

Ответить

kafedg kafedg 04.09.2016 13:01:09

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

Ответить

Crashwar1984 Crashwar1984 21.04.2017 14:04:31

Михаил огромное спасибо. Реально все доходчиво описал. Успехов тебе

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.