Главная » 2014»Июль»13 » Как встроить плеер или ссылку в подпись. Как вставить аудио на сайт
06:39
Как встроить плеер или ссылку в подпись. Как вставить аудио на сайт
Михаил Русаков
HTML - HTML Основы
Как вставить аудио на сайт
В этой статье я расскажу, как вставить аудио на сайт. Вопрос этот весьма частый, и я хорошо посмотрел, какие сайты пытаются ответить на него. К сожалению, не нашёл нормальной инструкции, понятной не только специалисту, но и новичку. Я решил этот пробел заполнить, и рассказать о том, как добавить аудио на сайт.
Первым делом, Вы должны понять, что HTML (4-я версия) не имеет встроенных возможностей вставки аудио, поэтому нам потребуется Flash-плеер. На мой взгляд, самый лучший плеер можно собрать здесь: http://flv-mp3.com/ru/. При сборке можно указать путь к Вашему аудио-файлу, указать размеры и внешний вид плеера. Далее Вам дадут готовый код, который Вы сразу можете вставлять на свой сайт внутри тега body, и аудио сможет начать проигрываться.
Пример работы плеера:
Вот примерно такой код Вы должны будете вставить к себе на сайт:
Самые важные параметры находятся в "FlashVars". В частности, в way находится путь к аудио-файлу, который нужно проиграть. Другие параметры, такие как w (ширина плеера), h (высота плеера), autoplay (автозапуск) и другие параметры Вы можете менять. Хотя если Вы собирали плеер, то ничего менять не потребуется, разве что way. Кстати, в way можно указывать не только абсолютный путь, но и относительный.
Вот таким несложным способом вставляется аудио на сайт. Вам лишь остаётся просто скопировать приведённый код, заменить way и вставить к себе на сайт.
Если Вы хотите узнать больше по HTML, то посмотрите мой бесплатный курс с примером создания сайта на HTML: http://srs.myrusakov.ru/html
Создано 24.10.2011 10:17:55
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru/)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov. Если Вы хотите дать оценку мне и моей работе, то напишите её на стене моего аккаунта.
Другие статьи:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Кнопка:
<a href='http://myrusakov.ru/' target='_blank'><img src='http://myrusakov.ru/images/button.gif' border='0' width='88' height='31' alt='Как создать свой сайт' /></a>Она выглядит вот так:
Текстовая ссылка:
<a href='http://myrusakov.ru/' target='_blank'>Как создать свой сайт</a>Она выглядит вот так:
Как создать свой сайт
BB-код ссылки для форумов (например, можете поставить её в подписи):
[URL='http://myrusakov.ru/']Как создать свой сайт[/URL]
Комментарии (49):
Никита Усов
24.10.2011 19:26:45
Круто! Спасибо! Давно искал как это сделать.
Ответить
Анатолий
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&swf=i:\WEB\example1\ump3player\ump3player_500x70.swf&w=470&h=70&time_seconds=222&autoplay=0&q=&skin=sky&volume=70&comment=111" /></object>
Ответить
Maks
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&swf=http://flv-mp3.com/i/pic/ump3player_500x70.swf&w=&h=0&time_seconds=0&autoplay=1&q=1&skin=black&volume=70&comment=Help" /></object>...после того как я поубирал лишние слэши и устоновил на страницу Html код то увидил там плеер ...который к сожелению не проигрывает музыку ...скажите в чем ошибка?
Ответить
Анна
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&swf=http://flv-mp3.com/i/pic/ump3player_500x70.swf&w=&h=0&time_seconds=164&autoplay=0&q=&skin=white&volume=70&comment=Any" /> </object> Плеер есть, а музыка не проигрывается. Где ошибка?
Ответить
Анна
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&swf=http://flv-mp3.com/i/pic/ump3player_500x70.swf&w=&h=0&time_seconds=164&autoplay=0&q=&skin=white&volume=70&comment=Any" /> </object> Исправила, все равно не получилось...
Ответить
Анна
01.06.2012 18:49:33
Получилось!Я открыла свой сайт в другом браузере до этого в Опере пробовала - не получалось, потом в Explorere открыла заработало... P.S Страницу в Опере обновляла
Ответить
Артём
17.06.2012 13:27:55
Здравствуйте Михаил. А можно в аудиоплеер несколько песен вставить?
Ответить
Ярослав
03.09.2012 19:28:04
Доброго время суток, Михаил, меня интересует как вставить видео из ВК (там мне нравиться плеер)? Если видео можно вставить при помощи копирования кода, то аудио там лежит в блоке <div> и имеет кучу свойств (не без JS). Копирование кода не приведет желаемого результата, т.к. почти каждый элемент находиться в теге <div> со своим class и это значит что тег обработки каждого класа может лежать в разных тегах (пример тега div в котором заложен аудио-файл не буду показывать т.к. он очень длинный)
Ответить
Саша
12.12.2012 13:43:58
Михаил, я нашёл где ещё можно найти плеер.На http://music.yandex.ru/. Там даже можно выбирать цвет плеера.
Ответить
костя
11.01.2013 16:33:04
Михаил у меня есть вопрос там надо вставить прямую ссылку на mp3 файл как это сделать??
Ответить
Жека
16.01.2013 11:20:04
Блин и здесь у меня ничего не получилось, также как и с видео. Мой свйт на локальном компе и запускаю я его прям в браузере, без denwera может в этом проблема?
