Звук на web-странице

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

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

Основное правило при создании сайта - все операции должны производиться только в ответ на действия пользователя. Например, вы заходите на сайт и перед контентом выпрыгивает какая-то непонятная и ненужная реклама, какой-то игры, к примеру, которая не закрывается. Первая реакция - сразу же покинуть данный сайт и найти что-нибудь поприличнее. А должно быть так: есть ссылка, например, «посмотреть рекламу», нажимаешь на нее и появляется то, что ты пожелал видеть. Нажимаешь «Закрыть» и она закрывается. Вот это правильно!

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

Из оцифрованного звука на web-страницах удобнее использовать формат mp3. Звуковые данные в таком файле упакованы с учётом особенностей восприятия человеческим ухом. Также достаточно популярен формат Real Audio. Эти файлы имеют расширение ra или ram.
Другим видом звуковых файлов являются midi-файлы. В эти файлы записывается подобие нотных партитур музыкальных инструментов, а звук воспроизводят музыкальные синтезаторы, входящие в состав звуковой карты. Файлы такого звука занимают мало места, но звучание их очень искусcтвенное. Файлы midi имеют расширение mid или rmi.

Фоновый звук в браузере Internet Explorer

Если ввести этот код между тегами head, то Вы получите только фоновую музыку (фоновый звук) для браузерa Internet Explorer:

<bgsound src="/mp3/kutschin.mp3" loop="1" volume="-10" balance="0">

Настройки:

1. bgsound – определяет фоновый HTML звук, музыку на сайте;
2. src="url звукового файла" – определяет url звукового файла в формате Wav или Mp3;
3. loop="1" – определяет количество проигрываний;
4. volume="-10" – регулирует громкость звука. В данном случае обозначенная величина будет вычтена из текущего уровня громкости, установленного на компьютере пользователя;
5. balance="0" – регулирует баланс звучания.

Создание аудио плеера с помощью программы Web Audio Plus

На мой взгляд - это один из лучших способов введения звука на страницу сайта. Получается вот такой код:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="//download.macromedia.com/pub/shockwave/cabs/flash/swflash.
cab#version=6,0,29,0"
width="150" height="55">
<param name="movie" value="/mp3/AudioPlayer.swf">
<param name="quality" value="high">
<embed src="/mp3/AudioPlayer.swf" quality="high"
pluginspage="//www.macromedia.com/go/getflashplayer" 
type="application/x-shockwave-flash"width="150" height="55"></embed>
</object>

А плеерок имеет следующий вид (коты в комплект не входят):

Такой код для вставки аудио на сайт создаётся с помощью небольшой, но замечательной «ультра-супер» программки, которая называется Web Audio Plus:

Окно программы Web Audio Plus

Порядок работы с программой

1. Запускаем программу и выбираем источник звука. Программа предлагает два варианта: Record sound - запись аудио с микрофона и Load from file - загрузка готового mp3 или wav-файла. Допустим, мы выбрали второй вариант. Нажимаем next.

2. Нажимаем кнопку Open, выбираем желаемый музыкальный файл в папке компьютера. В окошке, расположенном ниже, выбираем качество звучания. Нажимаем next.

3. В верхнем окне выбираем внешний вид плеера, в нижних двух окнах - цвет кнопок, а также цвет фона. Слева в окне появляется окно предосмотра, где мы видим результат. Жмём next.

4. Если поставить галочку в чекбоксе «Autoplay audio», воспроизведение будет начинаться автоматически. В окошках ниже выставляем размеры плеерка. Нажимаем Copy HTML text, код плеера копируется в буфер обмена. Сохраняем код в блокноте на рабочий стол.

5. Жмем кнопку Make, происходит генерация файла «svf» и сохранение в указанной папке. Путь для сохранения файла «AudioPlayer.swf» по умолчанию также на рабочем столе. Нажав кнопку «Run player», проверяем результат. Плеер должен работать. Закрываем программу.

Итак, на рабочем столе имеем два файла: «AudioPlayer.swf» и, например, «player.txt». Опробуем плеер, кликнув на «AudioPlayer.swf». Если плеер не работает, проверьте установку «Adobe Flash Player» на компьютере. Последнюю версию можно загрузить на официальном сайте //get.adobe.com/ru/flashplayer/

Плеерок в таком первозданном виде будет прекрасно работать у Вас на компьютере.  Далее, чтобы он работал на сайте, необходимо вставить код плеера из файла «player.txt» в вашу страницу сайта и закачать в определённое место на сервер файл «AudioPlayer.swf» и подправить пути к файлу плеера в коде (в двух местах). Эти места выделены маркером (смотри выше код). Всё!

Прослушивание радио-онлайн

Для любителей слушать радио есть прекрасная возможность делать это в онлайн-режиме.

Cписок онлайн радио - TOP 50:
//www.guzei.com/online_radio/
Слушаем успешно радио!

Можно установить ссылки на любимые радиостанции.

Вот к примеру, ссылка на онлайн вещание радиостанции Русское радио:
//guzei.com/online_radio/listen.php

Если установить Radio W Toolbar (я установил в «Mozilla»), то получите дополнительную возможность слушать любую из заявленных станций из панели инструментов браузера. А также сможете играть в игры, смотреть ТВ и многое другое.

Удачи Вам! Слушайте хорошую музыку и будьте здоровы!
С уважением, Леонид Музыка.