Вставить звуковой файл на сайт

Обновлено: 02.07.2024

Для вставки аудио-плеера используется следующий код:

В браузере Google Chrome плеер будет выглядеть:

Атрибут	Значение	Описание
autoplay	autoplay	Указывает, что аудио должен начать играть, как только будет готов
controls	controls	Указывает, что элементы управления воспроизведением должны отображаться
loop	loop	Указывает, что аудио должно начаться снова, когда оно будет закончено
preload	auto metadata none	Определяет, должно ли аудио быть загруженным при загрузке страницы
src	url	Указывает адрес аудио для проигрывания

Другие возможности вставки аудио на сайт

*только для форматов: wav, mp3, aiff, wma

Вставка видео

<video width="320" height="240" controls="controls" poster="logo.jpg"> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Ваш браузер не поддерживает video. </video>

Результат в браузере:

Атрибут	Значение	Описание
audio	muted	Определяет по умолчанию состояние звука. В настоящий момент только "muted" разрешено
autoplay	autoplay	Если указан, видео начнет играть сразу как только оно будет готово
controls	controls	Если указан, кнопки управления будут показаны, такие как кнопка воспроизведения
height	пиксели	Указывает высоту видео плеера
loop	loop	Если указан, видео начнет проигрываться снова, как только закончится
poster	url	Указывает URL изображения, представляющего видео
preload	auto metadata none	Если указан, видео будет загружено при загрузке страницы, и готово к запуску. Игнорируется, если "autoplay" указан
src	url	Адрес URL видео для проигрывания
width	пиксели	Указывает ширину видео плеера

<a href="имя_файла.avi">Щелкни и смотри</a>  <a href="ocean.qt"> Видеоклип 1 Мб</a>

* для форматов mpeg, avi

Фавикон Favicon

Фавиконка отображается в адресной строке браузера перед URL страницы, также Фавикон можно заметить во вкладке браузера страницы. Поисковые системы передают Favicon вместе с результатами поиска.

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

Здесь вы можете скачать русские версии WebPageMaker, WordPress, Joomla, Adobe Muse, а также инструкции по установке WordPress и Joomla на хостинг и мануалы по установке тем (шаблонов) для этих CMS.

Всем желаю удачи и смелых воплощений идей на вашем сайте !

Автор и администратор данного проекта - SvetLana_TSV. Копирование материалов сайта разрешено только при наличии активной ссылки на данный проект.

Настройки позволяют сделать музыку непрерывной, играющей постоянно без остановки, для этого ставим галочку напротив "Непрерывно" или же мы можем указать нужное количество повторов аудиофайла. Например, вы хотите, чтобы он проигрался для посетителя всего один раз, тогда убираем галочку с "Непрерывно" и в строке "Число повторов" указываем 1 повтор.

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

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

Если вам нужен именно этот способ, то приступим к установке. Для этого в меню программы идем в раздел Вставка, где выбираем пункт Медиа → Аудио. Вам откроется окно "Открыть", в котором вы выбираете нужный звуковой файл на своем компьютере.

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

На месте установленного файла будет отображаться лишь прямоугольник с названием аудио. Но виден он лишь вам в программе, а посетитель на его месте увидит аудиоплеер. Например, у меня на странице "Контакты" он выглядит так:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Она выглядит вот так:

Комментарии ( 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) и остановился на том что нужно песню поставить.как мне быть?

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

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

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

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

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

Существует 3 метода встраивания звуковых файлов.

<a href="myfile.mp3"> текст ссылки </a>

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Второй способ заключается в использовании контейнера <embed>.

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

Еще для того что б этот контейнер отображался, в браузере должен быть установлен специальный плагин. В Internet Explorer он стоит по умолчанию, а вот что касается остальных браузеров, то не у всех он может быть. Тогда его придется установить.

Параметр src – обязательный, определяет имя проигрываемого файла. Остальные параметры можно не указывать. Их перечень приведен ниже.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

С параметрами разобрались.

Предлагаю вам самим попробовать применить различные параметры и посмотреть, как они работают (тут ничего сложного нет).

Третий способ – это указать звуковой файл фоновым звуком для страницы.

Синтаксис тут простой:

<bgsound

src=filename — чзвуковой файл

lоор=n — количество повторов (infinite — непрерывно)

volume — громкость (от 10000 до 0,0 — значение по умолчанию)

balance — баланс между левой и правой колонками, значение может изменяться от -10000 (максимум для левого канала) до 10000 (максимум для правого канала).

Читайте также: