Как сделать фоновый звук в html
Обновлено: 04.07.2024
Иногда возникает необходимость подключить фоновую музыку к HTML странице или же создать проигрыватель со списком воспроизведения. Конечно исключительно с помощью HTML это сделать можно, однако эффективнее будет подключить на сайт флеш-проигрыватель. В данной статье мы постараемся максимально раскрыть связь звуковых файлов с HTML и рассмотрим различные способы, как интегрировать музыку в HTML-код.
Фоновая музыка
Прежде чем устанавливать на сайт(особенно на главную его страницу) фоновую музыку, следует подумать, не будет ли она раздражать посетителей, ведь у каждого из нас свои предпочтения к музыке. Также стоит учитывать, что многие пользователи могут зайти на ваш сайт, слушая свою музыку, им будет не очень приятно слушать одновременно два музыкальных трека. Также у посетителей должен быть установлен веб-плеер (Quick Time, VLC media player), иначе ничего они не услышат. Существует два способа задать фоновую музыку, однако мы рассмотрим только один, т.к второй работает не во всех браузерах и задается в контейнере head, что не всегда удобно. Пример вставки фоновой музыки:
Раскрывая все возможности HTML языка, в тринадцатой несчастливой главе, вынужден Вам рассказать о теге который позволяет внедрять в страницу сайта фоновую музыку. Другими словами когда пользователь зайдёт на Ваш сайт он услышит звучание музыки указанной с помощью вышеупомянутого тега, ну естественно если у него подключены колонки или наушники.
Итак, тег первое, что необходимо сказать об этом теге то, что он не входит в официальную спецификацию HTML, а является инициативой компании Microsoft для браузера Internet Explorer , так что большинство других браузеров игнорируют данный тег.
Для того чтобы вставить аудио файл в какую либо страницу сайта, в качестве фоновой музыки, нужно в теге с помощью атрибута src указать путь к аудио файлу
- закрывающий тег необязателен.
Ну и собственно вставить эту конструкцию в html документ, обычно тег располагают в "голове" документа между тегами .
На web-страницу можно интегрировать фоновую музыку. Когда пользователь будет попадать на эту страницу, будет проигрываться мелодия, конечно, если у пользователя есть колонки или наушники.
Положите этот файл в тот же каталог, где лежат ваши html-страницы. Теперь в код любой страницы (в теги body)добавьте следующий тег:
Теперь при просмотре этой страницы всегда будет присутствовать фоновая музыка. Рассмотрим параметры тега :
-
src - адрес звукового файла
Стоит ли задавать странице фоновую музыку решать вам, но хотелось бы привести несколько доводов, почему от этого лучше воздержаться:
Чаще всего у пользователя уже играет его любимая композиция или, наоборот, он сидит в тишине (может вокруг все спят) и вдруг начинает "петь" страница. Причем отключить фоновый звук пользователь не может. Что он сделает? Немедленно покинет вашу страницу и больше не вернется.
Качественный звуковой файл вы добавить не сможете (он слишком большого объема), а файлы в форматах wav, au и midi качеством не отличаются. Зачем же заставлять пользователя слушать не очень хорошую музыку, когда у него под рукой, скорее всего, есть выбор музыки отличного качества.
Наконец, каким бы маленьким не был звуковой файл, он съедает время на загрузку и часть трафика, а полезной информации не несет. Так стоит ли? Прежде, чем размещать фоновую мелодию подумайте об этом.
Подключаемые модули позволяют управлять проигрыванием звуковых файлов.
А по статистике лишь 5% людей станут устанавливать себе дополнительные модули, остальные 95% просто уйдут со страницы.
Для примера всего вышеизложенного создадим html-страницу со следующим кодом:
Вы наверное встречали сайты при открытии которых автоматически начинает играть фоновая музыка.Наверное и вы захотите использовать ее в какой-нибудь странице на сайте.Да,выглядит это эффектно,но уже через секунду начинаешь понимать что это лишнее.Такой вариант оформления страницы применяется редко и то в случае крайней необходимости,так как большинство пользователей ее игнорирует, а многих она вообще раздражает.
Музыка начинает звучать сразу после открытия страницы,у многих проигрывателей нет даже кнопки ее отключить,а еще чаще проигрывателя вообще не видно.К тому же для фоновой музыки нет универсального проигрывателя для всех браузеров.В России больше всего используются четыре браузера - Opera,Mozilla Firefox,Internet Explorer,Google.
Проигрыватель который будет играть фоновую музыку например в Opera,будет молчать например в Mozilla Firefox,или в других браузерах и наоборот.Даже если вы напишите код проигрывателя для всех браузеров,все равно не факт что он будет проигрываться у всех пользователей,зашедших на вашу страницу с фоновой музыкой.Браузеры могут не иметь у себя необходимых плагинов,может быть отключен JavaScript,если проигрыватель у вас написан с его помощью,да и вообще браузер не настроен на это.
Так что советую вообще не использовать этот вариант оформления вашей страницы,потому что если код с проигрывателем, и по каким-то причинам он не загрузится,то на странице будет пустое место,что портит дизайн вашего сайта.Но среди вебмастеров наверняка найдется тот,который все равно захочет чтобы у него проигрывалась фоновая музыка.
src - адрес звукового файла loop - число повторов мелодии (если равно -1, то повторяется бесконечно) balance - стереобаланс (значения от -10000 до 10000) volume - громкость, максимальное значение = 0 (возможные значения от -10000 до 0)
balance - стереобаланс (значения от -10000 до 10000)
volume - громкость, максимальное значение = 0 (возможные значения от -10000 до 0)
loop - число повторов мелодии (если равно -1, то повторяется бесконечно)
Можно вставить фоновую музыку на ваш сайт HTML с помощью контейнера audio,для всех браузеров кроме Internet Explorer.При вводе в код проигрывателя элемента управления controls, в проигрывателе будут видны кнопки управления "Play", "Пауза",без controls кнопки не будут отображаться.
Код этого проигрывателя.
Если ввести в код autoplay fmt" rows="5" cols="60">
можете вставить свой текст.
Попробуйте вариант проигрывания, когда посетитель вашего сайта нажимает на ссылку.В этом случае музыка должна быть в формате "WAV" и "Midi".Напишите обычную ссылку в HTML,замените вместо имя свой файл.
Этот вариант работает в IE с кнопками управления ,в других браузерах проигрыватель невидим,но музыка играет и если у вас Google,Opera,Mozilla, то лучше зту ссылку не включать ,и если вы захотите выключить музыку то вам придется покинуть страницу ,или придется уменьшить громкость.
А это еще один вариант проигрывания музыки на сайте.Он работает в Internet Explorer и Google Chrome.Здесь есть панель управления,кнопка включения/выключения. Если у вас не установлены плагины в Mozilla Firefox музыка проигрываться не будет.Если в Opera у вас вместо проигрывателя написано что нет плагина,щелкните по надписи, в открывшемся окошке нажмите кнопку "Открыть содержимое",затем еще раз в другом окне "Открыть" и вы сможете прослушать музыку.
Наконец-то настал тот день, когда я могу поведать миру о звуке.
Итак, звук. Звуки они бывают разными. Это может быть и фоновое звуковое сопровождение. Например, вы загрузили какую-то страничку в надежде спокойно отдохнуть и насладиться чудесными видами моря с обнаженными красотками на берегу в то время, как строгий шеф отвернулся к окну, а вместе с шумом прибоя и толпой голых теток в ваш офис врывается рок-группа с металлистами, барабанщиками и бубенцами. А кнопки, чтобы отключить эту вот кокофонию нету. Думаю, шеф забудет зачем выглядывал в окно, думаю, он для начала подпрыгнет от неожиданности, потом возьмет себя в руки и мееееедленной походкой подойдет к вам, чтобы убедиться лишний раз в вашей профпригодности.
А еще можно сделать анимацию со звуком. Вот только представьте, сидит собачка, смотрит на вас, машет хвостиком и гавкает, гавкает! Весело, правда? Можно сделать, чтобы она брехала сама по себе, а можно только при нажатии на эту собачку или на кнопку с надписью "голос!".
А еще можно установить аудио в режиме реального времени. Вот зашел посетитель на ваш сайт и вдруг вспомнил, что он не слышал прогноза погоды, и он, конечно удрал бы сразу к радиоприемнику! Потому как некоторые без прогноза погоды на улицу не выйдут! Но только не в этот раз! Потому как у вас - вот, пожалста! Есть кнопка, а на ней надпись "Чудик, жми сюды, узнаешь нужен ли тебе сегодня зонтик". И разве куда этот посетитель уйдет? Да он ваще останется жить на вашем сайте! Зачем ему куда-то уходить, когда у вас все есть?
Ну, а про разные выкрутасы по установке внешних проигрывателей и загрузке всяких там музыкальных файлов я вообще молчу, потому как говорить об этом можно бесконечно! А ведь мне еще нужно объяснить как все это нужно устанавливать. Так что прекращаю болтать глупости, так что даже и не просите!
Да! Еще забыла. Вы же можете записать свой голос! Спеть песенку, записать ее и поместить на собственный сайт. Тогда уж точно вас никто не упрекнет в плагиате, потому что все, что вы вякнете - это ваше личное. И никто не сможет это у вас отнять. Даже копирайтик можете поставить. Чтоб не стащили ненароком.
Если я что и забыла, то обязательно добавлю в процессе урока. Звуки можно считывать, оцифровывать или создавать прямо на компьютере. Сложно это или просто? Все зависит от того, что вы собираетесь делать. Если просто квакнуть в микрофон - это одно, а если сыграть симфонию - согласитесь, это немного другое.
Форматы звуковых файлов
Создание звуковых файлов небольших размеров
Если вы такой неугомонный, и решили все-таки поместить музыку на свой сайт, то должны знать, что многие звуковые файлы имеют громадные размеры. Поэтому вам придется выбирать не только формат файла, но и коэффициент его сжатия. И добиться того, чтобы музыка была похожа на музыку, а не на хрипение, сопенье или там шипение, и загружалась быстро.
Вообще, на качество звучания влияют две величины - частота дискретизации и глубина звука.
Частота дискретизации влияет на диапазон оцифрованного звука и определяет высокие и низкие тона. Измеряется в килогерцах. Файлы, записанные с применением более высо-кой частоты, имеют больший размер. Наиболее часто используют следующие частоты: 8 кГц, 11 кГц, 22,05 кГц, 44,1 кГц и 48 кГц. Некоторые звуки воспроизводятся хорошо и при низкой частоте дискретизации. Например, речь, которая не зависит от диапазона воспроизводимых частот.
Как правило, при первом оцифровывании звука его следует записывать при 16-разрядном разрешении и частоте 44,1 кГц. Ну, а далее, в процессе обработки с помощью программ редактирования звука, разрешение дискретизации можно уменьшить до 8 битов, а частоту - до 22, 05 кГц. А можно и вообще свести к нулю и дать возможность посетителям отдохнуть в тишине. Ведь еще неизвестно, где они (эти слушатели) находятся, может быть на работе? И неизвестно, какой у них начальник.
Невредные советы
Существуют разные программы для преобразования файлов между различными форматами. Примером может служить программа Premiere. И вот какие могут быть советы:
Вы спросите, откуда я это все знаю? Да из учебников! Не сама же я все это придумала! Тем более, мне вообще медведь на ухо наступил. И я ни в жизнь не различу "до" и "ре", если мне этого никто не укажет. Ну, а теперь расскажу, наконец, как же нам впихнуть наши звуки на html-страничку.
Как вставить звук на html-страничку
Если Вы дочитали до этого места, то, значит, вас уже ничто не остановит. И мне не останется ничего другого, как раскрыть эту тайну. Чтобы ваши вопли слушал весь мир. Надеюсь, он не оглохнет.
Знаете, вы будете смеяться, но звук в страничку вставляется точно также как и картинка. Только картинка имеет разрешение .jpg или .jpg, а звуковой файл - разрешение тех форматов, которые я указала выше в таблице.
Вот я скачала файл Vernisaj.wav с музыкой "Ах, вернисаж" и поместила его в отдельную папку со звуками sound и напишу следующую строчку:
То сразу заиграет музыка. Красивая, между прочим!
А помните, я вам говорила про собачку, на которую можно нажать и она начнет гавкать? И вот перед вами ну очень свирепый пес, который открывает и закрывает пасть.
Посмотреть на эту собаку - так покажется, что она просто икает. И чтобы заставить ее гавкать я купила диск "1100 новейших профессиональных сэмплов" и отыскала там подходящий лай под файлом Dog.wav, сохранила его в своей папочке sound и написала следующую строчку:
А если вы боитесь тыкать в незнакомую собаку, вы можете управлять ею командой. Напишем эту команду на другой кнопочке, которую я нарисую и назову golos.jpg. Тогда код у нас будет такой:
И вот вам результат! Ваша Жучка будет подавать голос, если только вы ее об этом попросите. А в остальное время будет молчать как рыба об лед!
В предыдущих случаях мы заставляли звук включаться по команде. Но ведь можно сделать так, чтобы музыка была фоном! Чтобы посетитель, хочет или не хочет этого слушал то, что мы ему хочем напеть на ушко. И это тоже можно сделать очень просто! Правда, действовать он будет только в Explorer, да и то начиная только со 2 версии. Остальные - отдыхают!
Для простоты понимания я возьму тот же файл Vernisaj.wav и размещу его следующим образом:
В этом случае музыка проиграла один раз и остановилась! Но если вам этого мало, если вы думаете, что посетителю хочется еще раз послушать эту музыку, вы можете дать ему эту возможность! Вы даже решите, что пусть эта музыка играет подряд 3 раза! И тогда перепишете слегка код:
И будьте уверены, он будет прослушает эту музыку три раза!
Но если вам и этого мало, и вы захотите довести беднягу до белого каления, то можете смело написать строчку:
И будьте уверены! Эта музыка будет его преследовать днем и ночью. Только умоляю вас, не говорите ему, кто вас этому научил. А еще есть два интересных атрибута volume и balance. Первый отвечает за уровень воспроизведения звука, а второй - за стереобаланс. Volume может принимать значения от -10000 до 0. То есть его нельзя сделать громче, чем он есть, но вот приглушить - запросто! Balance - возможные значения от -10000 до 10000. Если мы выберем крайнее значение, то это приведет к тому, что будет звучать только один динамик.
Так что если мы напишем:
То услышим этот файл ровно 10 раз при максимальном звучании и нормальном стерео-балансе. Ну, а как же наивные посетители Netscape? Что ли они не хотят глохнуть? Дадим же им эту возможность! Напишем следущее:
Этим самым EMBED мы встроили в нашу страничку аудиоплейер. Этот элемент был введен впервые компанией Netscape, и с тех пор он поддерживается большинством браузеров, в том числе и Explorer. И вот, когда наша страничка будет загружаться, браузер, наткнувшись на EMBED подумает-подумает, да и загрузит панель проигрывателя с разными кнопками. А потом и звук запустит. И что радует, можно установить свои размеры (ширина и высота) этого проигрывателя с помощью атрибутов Width (Ширина) и Height (Высота), хочешь в пикселах, а не хочешь - в процентах.
Также есть атрибут autostart, который может принимать значения либо false (звук тогда включает пользователь), либо true, когда музыка начинает проигрываться сразу при открытии странички.
Ну, и последний атрибут - hidden. Если он имеет значение false, то панель выводится на экран, в противном же случае true - панель не видна, а значит попытки пользователя вырубить вашу музыку - тщетны. И у него только два пути - либо уйти со странички по-добру, по-здорову, либо попытаться найти создателя этого творения. И поговорить с ним "по душам".
А вот и примерчик:
Ну вот, самое простецкое я вам рассказала. Я не собираюсь превращать этот урок в музыкальный салон. Во-первых, я не чувствую себя докой в этом деле, а во-вторых, нужно и другими уроками заняться. А в-третьих, боюсь увлечься этим делом и свихнуться. Всякое бывает. Поэтому я просто дам вам ссылки и вы, если уверены в своей психике, можете сами во всем разобраться.
Читайте также: