Воспроизведение мультимедиа

Программирование плеера

При задании для параметра uiMode значения value="none", элементы управления плеера Media Player не выводятся. Выводится только экран. Это может быть подходящей настройкой, когда плеер запускается автоматически или если пользователь знает, что элементы управления доступны для запуска и остановки воспроизведения в "контекстном меню", выводимом при щелчке правой кнопкой мыши в окне плеера. Однако обычно стандартные элементы управления скрыты, потому что они будут запрограммированы самостоятельно.

Хотя это не учебник по программированию страниц Web, достаточно просто задать свои собственные управляющие кнопки для Media Player. Это сделано для показанного ниже плеера.

Рис. 9.7. Программирование Media Player

<object id="Player" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
width="70" height="70">
  <param name="URL" value="Never Be Hungry.wav"/>
  <param name="autoStart" value="false"/>
  <param name="uiMode" value="none"/>
</object>

<input type="button" value="Start" style="font-size:8pt"
  onclick="Player.controls.play()"/>
<input type="button" value="Stop" style="font-size:8pt"
  onclick="Player.controls.stop()"/>

Прежде всего, необходимо задать для Player значение id, чтобы на него можно было ссылаться в сценарии. Здесь id="Player" присваивается тегу <object>. Параметру uiMode задается значение value="none", чтобы подавить вывод элементов управления, автозапуск autoStart выключается, а свойства стиля width и height задают размер экрана визуализации.

При удалении панели управления необходимо создать собственные кнопки "Start" и "Stop" для управления плеером. Эти кнопки создаются с помощью элементов управления <input type="button"/>. (Создание кнопок рассматривается далее).

Чтобы сделать кнопки реагирующими на щелчок мыши, кнопкам добавляется обработчики событий onclick. Эти обработчики событий кодируются с помощью операторов JavaScript для управления плеером. Для кнопки "Start" оператор Player.controls.play() вызывает метод play() плеера Player, чтобы начать воспроизведение, для кнопки "Stop" оператор Player.controls.stop() вызывает метод stop() плеера Player, чтобы остановить воспроизведение. Вот, собственно, и все.

Фактически не требуется даже вообще выводить плеер Player. Для воспроизведения аудио можно скрыть его полностью и включать и выключать звук с помощью запрограммированных кнопок. Задайте в коде для тега <object> значения width и height как 0px и создайте кнопки управления.

Рис. 9.8. Кнопки скрытого Media Player

<object id="Player2" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
width="0" height="0">
  <param name="URL" value="Never Be Hungry.wav"/>
  <param name="autoStart" value="false"/>
</object>

<input type="button" value="Start" 
  onclick="Player2.controls.play()"/>
<input type="button" value="Stop" 
  onclick="Player2.controls.stop()"/>

Так как Media Player невидим, то не имеет значения, где на странице записывается тег <object>.

Если посмотреть внимательно, то можно заметить небольшую точку в нижнем левом углу кнопки "Start". Это Media Player, редуцированный до одной точки, при задании его ширины и высоты равными 0 пикселей. Если желательно полностью исключить точку, включите таблицу стилей для Player с width:0px и height:0px.

Воспроизведение нескольких звуков

После небольшой модификации сценария можно воспроизводить несколько звуков с помощью одного и того же Media Player. В следующем примере проигрываются голоса четырех различных животных при щелчке на четырех отдельных тегах <img/>. Тег <object> скрывает Media Player и не задает никаких тегов <param>. Поэтому никакой файл для воспроизведения не задается; только невидимый плеер встроен в страницу.

Рис. 9.9. Воспроизведение нескольких звуковых файлов через один Media Player

<object id="Player" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
    width="0" height="0">
</object>

<img src="Bullfrog.gif" alt="Picture of bullfrog"
  onclick="Player.URL='Bullfrog.wav'; Player.controls.play()"/>
<img src="Goat.gif" alt="Picture of goat"
  onclick="Player.URL='Goat.wav'; Player.controls.play()"/>
<img src="Lion.gif" alt="Picture of lion"
  onclick="Player.URL='Lion.wav'; Player.controls.play()"/>
<img src="Rooster.gif" alt="Picture of rooster"
  onclick="Player.URL='Rooster.wav'; Player.controls.play()"/>

В обработчиках событий требуется пара операторов JavaScript. Первый оператор присваивает звуковой файл свойству URL плеера: Player.URL='filename.wav'; второй оператор запускает его воспроизведение: Player.controls.play(). Не нужно кодировать сценарий stop(), так как звуки будут очень короткими.

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

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

Фоновые звуки

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

<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
width="0" height="0">
  <param name="URL" value="BkgndSound.wav"/>
  <param name="autoStart" value="true"/>
</object>

Здесь, так как Player невидим, не имеет значения, где на странице кодируется этот тег <object>. Как только страница заканчивает загружаться, начинается загрузка и воспроизведение звука. Когда происходит переход к другой странице, то воспроизведение аудио останавливается.

Исключенный тег embed

Media Player можно встраивать в страницу Web с помощью тега <embed/>, общий формат которого показан ниже.

<embed src="url" autostart="true|false"/>

Атрибут src является адресом URL файла. Свойство autostart указывает, должен ли файл немедленно начинать воспроизведение, когда открывается страница.