Меню Рубрики

Установка звук на сайте

Урок 14. Как вставить аудио или музыку на сайт в html


1. Как вставить аудио (музыку) на сайт в html
2. Как установить фоновую музыку в html

Как вставить аудио (музыку) на сайт в html

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

1. На хостинге, где и располагается Ваш сайт, в корневом каталоге (папке, где индексный файл), соpдайте папку audio. В неё в дальнейшем будете помещать все аудио файлы.

2. Далее нужно скачать файлы плеера .

3. Теперь выберите нужные файлы, лучше в формате mp3. Создайте папку audio в корне сайта и закачайте их.

4. Остаётся только вставить код подключения плеера. Он подойдёт для любого сайта В нужном месте следует только указать путь к файлу плеера и аудио файлу, соответственно заменив слова ваш_домен и название_аудио_файла:

И всё готово! Можете посмотреть и работу примера.

Как установить фоновую музыку в html

Использую возможности HTML и браузера, можно также вставить на страницу фоновую музыку. Вам понадобится аудио файл нужного формата: WAV, AU, MIDI или MP3. Можете в качестве примера использовать любой файл с указанным расширением.

Первый способ — это тег embed. Элемент embed используется для загрузки и отображения объектов (например, видеофайлов, флэш-роликов, некоторых звуковых файлов и т.д.), которые исходно браузер не понимает.

Синтаксис довольно-таки прост:

Закрывающий тег не требуется.

Теперь смотрим пример записи с атрибутами, а ниже с их расшифровкой:

Атрибуты тега embed для проигрывания аудио в html
width — ширина панели в пикселях (или процентах)
height — высота панели в пикселях (или процентах)
align — расположение панели относительно текста, возможные значения left, right, center
hidden — позволяет скрыть панель, значения аттрибута: true — панель скрыта, false — панель видима (значение по умолчанию)
autostart — значение true — проигрыватель стартует автоматически при загрузке страницы, false — ждет нажатия на кнопку воспроизведение
loop — цикл, true — трэк проигрываться по кругу, а при значении false — только один раз

Если значением будет число, то Mozilla Firefox проиграет мелодию указанное количество раз, для Explorer’а числовое значение равносильно значению true.

Второй способ. Очень старый, но тоже практичный) Добавьте мелодию в ту же папку (директорию), где лежит Ваш файл, а в body пропишите следующий код:

В результате после загрузки страницы будет звучать указанная Вами в теге bgsound мелодия. Теперь рассмотрим лучше атрибуты тега :

src — путь к Вашему аудиофайлу
loop — сколько раз мелодию повторить ( если -1, то повторяется бесконечно)
balance — значение стереобаланса (от -10000 до 10000)
volume — громкость проигрывания мелодии, где 0 максимум, а -10000 минимум.

Однако не будет возможности как-либо контролировать проигрыватель — при каждом обновлении страницы трек будет проигрываться заново.

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

Вставка аудио и музыки в HTML5 — тег audio


audio — парный тег, определяющий фоновый звук, музыку или другой аудио поток на сайте.

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

Атрибуты тега audio

autoplay— файл проигрывается сразу при загрузке страницы (аналогично фоновой музыке bgsound)
controls — отобразить панель управления плеера в браузере
loop — проигрывает файл заново после его окончания
preload — загрузка аудио файла произойдёт вместе с загрузкой страницы
src — путь к аудио файлу (mp3 или ogg)

Пример кода с тегом audio

Теперь смотрим работу тега audio в Вашем браузере:

Спасибо за внимание! В следующем уроке рассмотрим вставку видео!)

источник

High Star

Уроки веб-мастеру

Как самому с нуля сделать сайт? Здесь даны основы сайтостроения, которых еще никто не отменял. Как пользоваться такими программами, как PhotoShop, ImageReady и другими. Полезные советы вебмастерам.

Звук на сайте

Кокофония голых теток

Наконец-то настал тот день, когда я могу поведать миру о звуке.

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

Читайте также:  Установка радиостанции в крузер

А еще можно сделать анимацию со звуком. Вот только представьте, сидит собачка, смотрит на вас, машет хвостиком и гавкает, гавкает! Весело, правда? Можно сделать, чтобы она брехала сама по себе, а можно только при нажатии на эту собачку или на кнопку с надписью «голос!».

А еще можно установить аудио в режиме реального времени. Вот зашел посетитель на ваш сайт и вдруг вспомнил, что он не слышал прогноза погоды, и он, конечно удрал бы сразу к радиоприемнику! Потому как некоторые без прогноза погоды на улицу не выйдут! Но только не в этот раз! Потому как у вас — вот, пожалста! Есть кнопка, а на ней надпись «Чудик, жми сюды, узнаешь нужен ли тебе сегодня зонтик». И разве куда этот посетитель уйдет? Да он ваще останется жить на вашем сайте! Зачем ему куда-то уходить, когда у вас все есть?

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

Да! Еще забыла. Вы же можете записать свой голос! Спеть песенку, записать ее и поместить на собственный сайт. Тогда уж точно вас никто не упрекнет в плагиате, потому что все, что вы вякнете — это ваше личное. И никто не сможет это у вас отнять. Даже копирайтик можете поставить. Чтоб не стащили ненароком.

Если я что и забыла, то обязательно добавлю в процессе урока. Звуки можно считывать, оцифровывать или создавать прямо на компьютере. Сложно это или просто? Все зависит от того, что вы собираетесь делать. Если просто квакнуть в микрофон — это одно, а если сыграть симфонию — согласитесь, это немного другое.

Хочу предупредить особо — быть предельно осторожным с авторскими и другими правами. Если вам захочется поместить музыку с компакт-диска русская музыка и растиражировать его на своем сайте, то вряд ли автору этой музыки может понравиться такое ваше стремление нести культуру в массы. На сайте www.copyright.ru вы можете почитать подробно о законах, охраняющих авторские права и о том, сколько дадут за их неиспользование.

Форматы звуковых файлов

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

  • .au
    — раньше он был единственным форматом, предназначенным для Web, а потому является старьем. По качеству воспроизведения звука уступает другим форматом. Так что не зацикливайтесь на нем, а читайте другие форматы!
  • .aiff — применяется для компьютеров Macintosh и SGI. Расшифровывается как Audio Interchange File Format (формат обмена звуковыми файлами). В этом формате можно хранить не только сами звуковые файлы, но и информацию об используемых частотах и разрешении дискретизации. Кроме того, существует стандарт MACE, который является встроенным форматом сжатия файлов в формате AIFF.
  • .wav — является звуковым форматом для платформы Windows. Так же, как и AIFF, в этом формате можно хранить звуковые файлы вместе со всеми частотами и разрешениями дискретизации звука. Короче, WAV эквивалентен AIFF по качеству и коэффициента сжатия. И их выбор зависит только от платформы, на которой создается звуковой файл
  • .mpeg — очень популярный формат (уровень 3 или mp3). Позволяет получать высокое качество звука при отоносительно небольшом размере файла! Вот несколько кодеров и проигрывателей этого формата в сети интернет:
    • Катализатор звука — www.hingtech.com
    • Сайт ресурсов программного обеспечения MP3 — www.mp3.com
    • Кодер MP3 Macintosh — www.sound.com
    • Кодер MP3 Windows —
      • www.musicmatch.com
      • www.xingtcch.com
      • www.audioactive.com
  • RealAudio — этот формат был первым примером использования потоков при воспроизведении звуковых файлов. Потоковые звуковые файлы поступают порциями, поэтому нет необходимости закачивать весь файл полностью. Но качество от этого, конечно — «так себе». Годится для записи речи, но никак не для музыки. Для прослушивания необходимо установить проигрыватель RealAudio. Создавать файлы в этом формате можно с помощью кодера, который загружается с сайта www.real.com

Создание звуковых файлов небольших размеров

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

Читайте также:  Установка времени отправки смс

Вообще, на качество звучания влияют две величины — частота дискретизации и глубина звука.

Частота дискретизации влияет на диапазон оцифрованного звука и определяет высокие и низкие тона. Измеряется в килогерцах. Файлы, записанные с применением более высо-кой частоты, имеют больший размер. Наиболее часто используют следующие частоты: 8 кГц, 11 кГц, 22,05 кГц, 44,1 кГц и 48 кГц. Некоторые звуки воспроизводятся хорошо и при низкой частоте дискретизации. Например, речь, которая не зависит от диапазона воспроизводимых частот.

Разрешение дискретизации (или, проще говоря, глубина звука) определяет диапазон звука в отношении его верхних и нижних тонов. Чем больше разрешение — тем больше размер файла. Прямо как и в изображении! При редактировании можно выбирать разрешение дискретизации. Поскольку при невысокой частоте появляется шум, то для каждого элемента необходимо определить минимальное разрешение, которое можно установить, не доводя слушателей до белого каления. Существуют следующие значения разрешения дискретизации: 8-разрядный моно; 8-разрядный стерео; 16-разрядный моно и 16-разрядный стерео.

Как правило, при первом оцифровывании звука его следует записывать при 16-разрядном разрешении и частоте 44,1 кГц. Ну, а далее, в процессе обработки с помощью программ редактирования звука, разрешение дискретизации можно уменьшить до 8 битов, а частоту — до 22, 05 кГц. А можно и вообще свести к нулю и дать возможность посетителям отдохнуть в тишине. Ведь еще неизвестно, где они (эти слушатели) находятся, может быть на работе? И неизвестно, какой у них начальник.

Невредные советы

Существуют разные программы для преобразования файлов между различными форматами. Примером может служить программа Premiere. И вот какие могут быть советы:

  1. Оцифровывать звук следует при стандартных параметрах (44 кГц и 16 битов). При необходимости можно уменьшеть размер файла до 22 или 11 кГц. Как правило, при более низких частотах дискретизации «обрезаются» высокие тона, и звук становится глухим. Для речи или звуков, для которых высокие частоты не имеют особого значе-ния, снижение частоты дискретизации приводит к созданию файлов небольшого размера при приемлимом качестве звучания.
  2. Снижение в два раза частоты дискретизации уменьшает файл вдвое. Кроме того, переход звучания от стерео- к монозвучанию также уменьшает файл вдвое.
  3. Если размер 16-разрядного звукового файла слишком велик, можно применить алгоритм сглаживания. В результате уменьшается размер дискретизации до 8 битов. Однако, применение сглаживания приводит к появлению шума, который особенно заметен в паузах.
  4. Из-за этого шума не рекомендуется применять сглаживание звуковых файлов, содержащих речь. Однако для тяжелого рока или техно это будет вполне оправдано. Там и без того грохота хватает. Если не сглаживать не получается, но очень хочется, можно пойти по другому пути — повторно отцифровать 16-разрядный файл путем их воспроизведения при 16 битах и 44,1 кГц и записи с помощью цифрового преобразователя при 8 битах. Во многих случаях этот способ дает более качественное звучание.
  5. В наименовании звуковых файлов не должны содержаться пробелы. Длина файлов не должна быть более 8 символов, а расширение и того меньше — не более трех символов. В противном случае пользователи платформ с Windows останутся глухи к вашим потугам.
  6. Редактирование звука (перевод со стерео на моно, фильтрацию, нормализацию, ограничение уровня звука, а также уменьшение разрешения дискретизации) необходимо проводить до преобразование его в 8-битный. При редактировании 8-разрядного звука появляется «электронный шум», поэтому редактирование лучше проводить в фай-ле с более высоким разрешением дискретизации еще до его уменьшения.

Вы спросите, откуда я это все знаю? Да из учебников! Не сама же я все это придумала! Тем более, мне вообще медведь на ухо наступил. И я ни в жизнь не различу «до» и «ре», если мне этого никто не укажет. Ну, а теперь расскажу, наконец, как же нам впихнуть наши звуки на html-страничку.

Как вставить звук на html-страничку

Если Вы дочитали до этого места, то, значит, вас уже ничто не остановит. И мне не останется ничего другого, как раскрыть эту тайну. Чтобы ваши вопли слушал весь мир. Надеюсь, он не оглохнет.

Знаете, вы будете смеяться, но звук в страничку вставляется точно также как и картинка. Только картинка имеет разрешение .jpg или .gif, а звуковой файл — разрешение тех форматов, которые я указала выше в таблице.

Вот я скачала файл Vernisaj.wav с музыкой «Ах, вернисаж» и поместила его в отдельную папку со звуками sound и напишу следующую строчку:

То сразу заиграет музыка. Красивая, между прочим!

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

Читайте также:  Установка пищалок хендай солярис


Просто собака

Посмотреть на эту собаку — так покажется, что она просто икает. И чтобы заставить ее гавкать я купила диск «1100 новейших профессиональных сэмплов» и отыскала там подходящий лай под файлом Dog.wav, сохранила его в своей папочке sound и написала следующую строчку:

А если вы боитесь тыкать в незнакомую собаку, вы можете управлять ею командой. Напишем эту команду на другой кнопочке, которую я нарисую и назову golos.jpg. Тогда код у нас будет такой:

И вот вам результат! Ваша Жучка будет подавать голос, если только вы ее об этом попросите. А в остальное время будет молчать как рыба об лед!


В предыдущих случаях мы заставляли звук включаться по команде. Но ведь можно сделать так, чтобы музыка была фоном! Чтобы посетитель, хочет или не хочет этого слушал то, что мы ему хочем напеть на ушко. И это тоже можно сделать очень просто! Правда, действовать он будет только в Explorer, да и то начиная только со 2 версии. Остальные — отдыхают!

Для простоты понимания я возьму тот же файл Vernisaj.wav и размещу его следующим образом:

И будьте уверены, он будет прослушает эту музыку три раза!

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

И будьте уверены! Эта музыка будет его преследовать днем и ночью. Только умоляю вас, не говорите ему, кто вас этому научил. А еще есть два интересных атрибута volume и balance. Первый отвечает за уровень воспроизведения звука, а второй — за стереобаланс. Volume может принимать значения от -10000 до 0. То есть его нельзя сделать громче, чем он есть, но вот приглушить — запросто! Balance — возможные значения от -10000 до 10000. Если мы выберем крайнее значение, то это приведет к тому, что будет звучать только один динамик.

То услышим этот файл ровно 10 раз при максимальном звучании и нормальном стерео-балансе. Ну, а как же наивные посетители Netscape? Что ли они не хотят глохнуть? Дадим же им эту возможность! Напишем следущее:

Этим самым EMBED мы встроили в нашу страничку аудиоплейер. Этот элемент был введен впервые компанией Netscape, и с тех пор он поддерживается большинством браузеров, в том числе и Explorer. И вот, когда наша страничка будет загружаться, браузер, наткнувшись на EMBED подумает-подумает, да и загрузит панель проигрывателя с разными кнопками. А потом и звук запустит. И что радует, можно установить свои размеры (ширина и высота) этого проигрывателя с помощью атрибутов Width (Ширина) и Height (Высота), хочешь в пикселах, а не хочешь — в процентах.

Также есть атрибут autostart, который может принимать значения либо false (звук тогда включает пользователь), либо true, когда музыка начинает проигрываться сразу при открытии странички.

Ну, и последний атрибут — hidden. Если он имеет значение false, то панель выводится на экран, в противном же случае true — панель не видна, а значит попытки пользователя вырубить вашу музыку — тщетны. И у него только два пути — либо уйти со странички по-добру, по-здорову, либо попытаться найти создателя этого творения. И поговорить с ним «по душам».

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

  • QuickTime
    Технология QuickTime позволяет скрывать клипы от просмотра или выводить на экран элементы управления. Файлы, совместимые со стандартами MIDI, идеально подходят для потокового звука. Спецификации по звуковым файлам QuickTime можно найти на сайте www.apple.com
  • Macromedia Director/Streaving Audio
    Приложение Director является самым старым инструментом, предназначенным для создания мультимедиа-эффектов. Подключаемый модуль для Web-браузеров, Shockwave позволяет просматривать на Web-страницах содержимое файлов Director. Подключаемый модуль Shockwave поддерживает потоковую передачу звуковых файлов. Для создания потокового звукового файла необходимо научиться работать с Director, а также запрограммировать необходимые действия, воспользовавшись запатентованным языком программирования Lingo. Более подробная информация относительно Director, Shockowave и Lingo находится на сайте компании www.macromedia.com
  • RealAudio
    Технология RealAudio является самой старой и наиболее широко известной технологией внедрения звуковых файлов в Web. В этом случае используется три компонента:

  • Проигрыватель RealAudio воспроизводит файлы в формате RealAudio
  • Кодер RealAudio кодирует файлы в формате RealAudio
  • Сервер RealAudio передает файлы в формате RealAudio

источник