Как вставить аудио на сайт
В этой статье я расскажу, как вставить аудио на сайт. Вопрос этот весьма частый, и я хорошо посмотрел, какие сайты пытаются ответить на него. К сожалению, не нашёл нормальной инструкции, понятной не только специалисту, но и новичку. Я решил этот пробел заполнить, и рассказать о том, как добавить аудио на сайт.
Первым делом, Вы должны понять, что 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
-
Создано 24.10.2011 10:17:55
-
Михаил Русаков
Комментарии (57):
Круто! Спасибо! Давно искал как это сделать.
Ответить
Здравствуйте, Михаил. Не могу понять почему не отображается проигрыватель в опере? В 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>
Ответить
Путь неправильно написан. Где file:///? А ещё лучше пишите относительный путь.
Ответить
Спасибо, заработало. p.s. Оперативно отвечаете. :-bd
Ответить
зравствуйте, скажите Прямая ссылка на mp3-файл это что? у меня есть песня на рабочем столе мне что сделать с ней?
Ответить
Скопируйте эту песню на сайт и укажите к ней относительную ссылку.
Ответить
дело в том что я только пишу сайт (на dreamweaver) и остановился на том что нужно песню поставить.как мне быть?
Ответить
Вся статья и мой комментарий. А в вообще: http://myrusakov.ru/html-dreamweaver.html Я лишний раз убедился в своём мнении, что dreamweaver - это не просто плохо, но и жутко вредно.
Ответить
я может быть задам глупый вопрос (Вы извините но я просто новичок в этом деле) а можно песню к примеру вконтакте скинуть и указать ссылку из контакта?
Ответить
Если Вы доберётесь до ссылки на mp3-файл, то да, можно. Если просто на какую-то страницу с плеером, то нет.
Ответить
Здравствуйте Михаил...как вы и говорили плеер можна собрать на 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 код то увидил там плеер ...который к сожелению не проигрывает музыку ...скажите в чем ошибка?
Ответить
Во-первых, странный путь http:// files.mail.ru/LHAR7D - это явно не MP3-файл, а ссылку на HTML-страницу. Нужен именно MP3-файл. Во-вторых, не надо ничего удалять, пока не убедитесь, что всё работает. А уже после этого и можно немного почистить код.
Ответить
Михаил, а есть что-то типа flow player только для мелодий
Ответить
Не знаю, поищите в Google. Мало кому нужен здоровый плеер для видео, который проигрывает только музыку.
Ответить
<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> Плеер есть, а музыка не проигрывается. Где ошибка?
Ответить
Не надо использовать спецсимволы в названии файлов. rihanna_feat._fiew.mp3 - никаких _ и точек быть не должно.
Ответить
<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> Исправила, все равно не получилось...
Ответить
А сам файл изменили? Или только код?
Ответить
Да
Ответить
Получилось!Я открыла свой сайт в другом браузере до этого в Опере пробовала - не получалось, потом в Explorere открыла заработало... P.S Страницу в Опере обновляла
Ответить
Здравствуйте Михаил. А можно в аудиоплеер несколько песен вставить?
Ответить
В данный плеер, думаю, нет.
Ответить
Доброго время суток, Михаил, меня интересует как вставить видео из ВК (там мне нравиться плеер)? Если видео можно вставить при помощи копирования кода, то аудио там лежит в блоке <div> и имеет кучу свойств (не без JS). Копирование кода не приведет желаемого результата, т.к. почти каждый элемент находиться в теге <div> со своим class и это значит что тег обработки каждого класа может лежать в разных тегах (пример тега div в котором заложен аудио-файл не буду показывать т.к. он очень длинный)
Ответить
Смог найти ссылку в коде но проигрывать могу только в нашем плеере=( Попробую поискать ссылку на плеер.
Ответить
Добрый день, Михаил! Подскажите пожалуйста вставляю в файл motd.txt (cs 1.6) ссылку на mp3 вот в таком виде http://www.yapfiles.ru/static/play.swf?st=aMDA0OTAxNTAt29b9&allowscriptaccess=always как сделать чтобы файл автоматически проигрывался???
Ответить
Про автозапуск прочитайте предпоследний абзац в данной статье.
Ответить
не получается, по большому счету мне не нужен плеер, мне просто нужно вставить прямую ссылку в motd.txt чтоб mp3 проигрался по ссылке автоматически. Разместил mp3 на yapfiles.ru, в motd.txt прописал прямую ссылку на этот файл, но проигрываться никак не хочет. СПС и сорри за оффтоп
Ответить
Проигрывание mp3 без плеера не возможно, и вообще нужно вставлять не в текстовый файл, а на HTML-страницу.
Ответить
Вот содержание 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 - Для организации CW обращаться в агент или 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 файл
Ответить
bgsound не поддерживается ни одним браузером, за исключением IE и Opera.
Ответить
так это не в браузере, это в игре cs 1.6, задумывалось, что будет проигрываться. Извиняюсь, но подскажите пожста как правильно сие сделать???
Ответить
Причём тут игра и HTML-код? Ваш вопрос вообще некорректен.
Ответить
Михаил, я нашёл где ещё можно найти плеер.На http://music.yandex.ru/. Там даже можно выбирать цвет плеера.
Ответить
Михаил у меня есть вопрос там надо вставить прямую ссылку на mp3 файл как это сделать??
Ответить
Загрузить его к себе на сайт, а потом поместить туда ссылку, ведущую на загруженный файл.
Ответить
Блин и здесь у меня ничего не получилось, также как и с видео. Мой свйт на локальном компе и запускаю я его прям в браузере, без denwera может в этом проблема?
Ответить
Надо запускать через Denwer, просто так браузер не позволит Flash использовать.
Ответить
<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> и... не пошло
Ответить
Нельзя использовать никаких русских символов в указании путей к файлам.
Ответить
О, yes yes !!! Благодарю!
Ответить
Как заставить работать плеер в Opera 12.02?
Ответить
Сейчас уже более новая Opera, но и в 12.02 данный плеер прекрасно работает.
Ответить
У меня плеер работает в Explorer 10, но в Opera 12.02 отказывается проигрывать музыку. Это исправимо?
Ответить
Возможно, что-то с настройками конкретно у Вас в Opera.
Ответить
Здравствуйте. Скажите пожалуйста, а можно ли вставлять такие файлы через другие языки, кроме Html?
Ответить
На сайты нет.
Ответить
Подскажите, как сделать AutoStart, сразу после открытии страницы?
Ответить
Это зависит от возможностей плеера. Не факт, что данный плеер поддерживает такую возможность. Можете почитать документацию у них на сайте, возможно, это и можно сделать. Там же будет написано, как это делается.
Ответить
Здравствуйте,посмотрите в чем ошибка <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&swf=http://flv-mp3.com/i/pic/ump3player_500x70.swf&w=470&h=70&time_seconds=0&autoplay=0&q=&skin=green&volume=70&comment=by Nurik" /></object>
Ответить
Михаил Такая проблема, есть гугл транслейт, как можно по ссылке выводить на сайте перевод, чтобы проигрывалось на моем сайте, а не открывалась новая страница? Ссылка на пример, который возвращает гугл http://translate.google.com/translate_tts?tl=en&q=%22word%22
Ответить
Михаил, здравствуйте! Спасибо за статью, все отлично заработало! Подскажите пожалуйста, а как сделать скачивание файла, т.е. так, чтобы по ссылке на аудио файл, браузер его не проигрывал автоматически, а предлагал сохранить? Заранее спасибо!
Ответить
Пример Выпадающего меню с аудио - http://siteacademy.ru/index.php/htmldev/38-html/musical-drop-down-menu-html-audio
Ответить
Неплохо было бы все разъяснить в этом коде, чтоб лучшее представление было что делаешь
Ответить
Здравствуйте, я всё сделал, как вы написали, но при сборке плеера нужна была прямая ссылка, поэтому я скачал дропбокс закинул туда аудиофайл, получил ссылку - вставил куда надо, получил код. И ни хрена не работает. Я сравнил ваш пример кода плеера и свой разница только в адресе аудиофайла. Ваш код работает, а мой нет. Что делать?
Ответить
Уже сделал - вставил ссылку из "Мой мир". Дропбокс-г***о. Всё работает.
Ответить
Здравствуйте, подскажите, а можно ли найти готовый плеер, чтобы при переходе на другие страницы сайта музыка продолжала воспроизводиться с момента, на котором она остановилась на предыдущей странице?
Ответить
Михаил огромное спасибо. Реально все доходчиво описал. Успехов тебе
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.