Мультимедиа

Некоторые советы и секреты

Работа с графическими элементами HTML5 довольно проста, но знание некоторых подробностей может помочь в работе с ними в приложениях для Магазина Windows.

Элементы Img

var myImage = document.getElementById('image');
myImage.onerror = function () { onImageError(this);}
function onImageError(source) {	
source.src = "placeholder.png";
source.onerror = "";	
}	
 

Элементы SVG

<!-- В HTML-->
<iframe id="Mysvg" src="myFolder/mySVGFile.svg" />

// В JavaScript
var svg = document.getElementById("Mysvg").contentDocument.documentElement;
 

<!-- В HTML-->
<img id="svg" src="somesvg.svg" style="display: none;" />
<canvas id="canvas" style="display: none;" />
// В JavaScript	
var c = document.getElementById("canvas").getContext("2d");	
c.drawImage(document.getElementById("svg"),0,0);	
var imageURLToUse = document.getElementById("canvas").toDataURL();

Элементы Canvas

Все упомянутые здесь имена фукнций – это методы объекта контекста canvas:

 var img = new Image();
img.onload = function () { myContext.drawImage(myImg, 0, 0); }
myImg.src = "myImageFile.png";

var img = new Image();
img.onload = function () { myContext.drawImage(myImg, 0, 0); }
myImg.src = "myImageFile.png";
function arcEllipse(ctx, x, y, radiusX, radiusY, startAngle, endAngle, anticlockwise) {
//Используем меньший радиус как базу и растягиваем другой	

var radius = Math.min(radiusX, radiusY);	
var scaleX = radiusX / radius;	
var scaleY = radiusY / radius;	
ctx.save();
ctx.scale(scaleX, scaleY);

//Обратите внимание на то, что центральная точка должна учитывать масштабирование	
ctx.arc(x / scaleX, y / scaleY, radius, startAngle, endAngle, anticlockwise);
ctx.restore();	
}	
 

Вот пример покадровой манипуляции с видео, техника, которая отлично освещена в блоге команды разработки Windows, в сообщение "Прямая манипуляция пикселями в canvas"Кроме того, обратитесь к материалу http://beej.us/blog/data/html5s-canvas-2-pixel/ (http://blogs.windows.com/windows/archive/b/developers/archive/2011/02/15/canvas-direct-pixel-manipulation.aspx). В упражнении к этой лекции VideoEdit, файл default.html содержит в теле элементы video и canvas:

<video id="video1" src="ModelRocket1.mp4" muted style="display: none"></video>
<canvas id="canvas1" width="640" height="480"></canvas>

В коде (js/default.js), мы вызываем функцию startVideo из обработчика активации. Эта функция запускает воспроизведение видео и использует requestAnimationFrame для выполнения пиксельной манипуляции для каждого видеокадра:

function startVideo() {	
video1 = document.getElementById("video1");	
canvas1 = document.getElementById("canvas1");
ctx = canvas1.getContext("2d");	

video1.play();
requestAnimationFrame(renderVideo);
}

function renderVideo() {
//Копируем кадр из видео в canvas 
ctx.drawImage(video1, 0, 0, canvas1.width, canvas1.height);

//Получаем кадр в виде пиксельных данных
var imgData = ctx.getImageData(0, 0, canvas1.width, canvas1.height);
var pixels = imgData.data;

//Обходим пиксели, обрабатывая их так, как нам нужно 
var r, g, b;

for (var i = 0; i < pixels.length; i += 4) {
r = pixels[i + colorOffset.red];	
g = pixels[i + colorOffset.green];	
b = pixels[i + colorOffset.blue];	

// Здесь создается негативное изображение	
pixels[i + colorOffset.red] = 255 - r;	
pixels[i + colorOffset.green] = 255 - g;
pixels[i + colorOffset.blue] = 255 - b;	
}	

//Копируем измененные пиксели в canvas
ctx.putImageData(imgData, 0, 0);
//Запрашиваем следующий кадр
requestAnimationFrame(renderVideo);
}
 

Страница в этом примере содержит скрытый видеоэлемент (style="display: none"), в котором запускается воспроизведение при загрузке страницы (video1.play()). В цикле requestAnimationFrame, текущий кадр из видео копируется в canvas (drawImage) и пиксели кадра копируются (getImageData) в буфер imgData. Затем мы обходим этот буфер и инвертируем цветовую информацию, создавая, таким образом, фотографический негатив изображения (альтернативная формула для перевода изображения в цветовой режим оттенков серого показана в комментариях и опущена выше). Затем мы копируем полученные пиксели обратно в canvas (putImageData), таким образом, когда мы возвращаемся, негатив изображения выводится на экран.

Повторюсь, подобные операции интенсивно используют процессор и обычно не подлежат ускорению с помощью GPU, то есть, могут выполняться не очень хорошо на маломощных устройствах (однако, не забудьте запустить Release build (построении Выпуска) программы за пределами отладчика для оценки производительности). Гораздо лучше будет написать DLL для реализации видеоэффектов, там, где это возможно, как обсуждается в разделе "Применение видеоэффектов" ниже. Тем не менее, об этой технике полезно знать. Что на самом деле происходит, так это то, что вместо рисования каждого кадра с помощью вызовов API, мы просто используем видео в качестве источника данных. Мы можем, если захотим, украсить canvas любым другим способом, прежде чем возвращаться из функции ) на сайте разработчиков Mozilla, которыйди намически делает фоновые пиксели зеленого цвета в видеокадре прозрачными, в итоге, элемент img, расположенный под видео, становится видимым сквозь видео, выступая в роли фона. Тот же подход можно использовать для наложения двух видео, в итоге, то видео, которое будет расположено ниже, станет фоном вместо статического изображения. Опять же, помните о производительности маломощных устройств; вы можете решить предоставить параметр, посредством которого пользователь сможет отключить подобные дополнительные эффекты.

Проигрывание видео и отложенная загрузка

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

<video src="media/ModelRocket1.mp4" controls loop autoplay></video> 

Как обычно, мы не будем повторять то, что можно найти среди спецификаций W3C по тегам . Спецификации позволяют узнать о свойствах, методах и событиях этих элементов. Обратите особое внимание на сводные данные по событиям в разделе 4.8.10.15 (http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#event-definitions), и то, что большинство свойств и методов и для того и для другого можно найти в разделе о медиа-элементах, 4.8.10 (http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#media-elements). Обратите внимание на элемент ), больше мы не будем на нем здесь останавливаться.

Так же полезно понимать, что video и audio тесно связаны, так как они являются частью оной и той же спецификации. На самом деле, если вы просто хотите проиграть звуковую дорожку видеоклипа, вы можете использовать объект Audio в JavaScript:

 //Проигрывание лишь звуковой дорожки видеоклипа	
var movieAudio = new Audio("http://www.kraigbrockschmidt.com/downloads/media/ModelRocket1.mp4");

movieAudio.load();	
movieAudio.play();	

Для любого видео-элемента вы можете задать ширину и высоту для управления размером области воспроизведений (вплоть до 100% для полноэкранного воспроизведения). Это важно, когда ваше приложение переключается между режимами просмотра и вы, вероятно, имеете CSS-стили видеоэлемента в различных медиа-запросах. Кроме того, если у вас есть элемент управления для полноэкранного воспроизведения, просто сделайте размеры видео такими же, как размер окна просмота (и после вызова ), если приложение находится в прикрепленном режиме). В дополнение, когда вы создаете видеоэлемент с атрибутом controls, у него автоматически появится элемент управления для перевода в полноэкранный режим, в правом углу, который делает именно то, что нужно для приложений Магазина Windows:

Коротко говоря, вам не нужно делать чего-то особенного для того, чтобы это работало. Когда видео отображается в полноэкранном режиме, похожая кнопка (или клавиша Esc) позволяет вернуться к обычному режиму просмотра приложения.

Примечание. Если вам интересно, элементы audio и video не предоставляют каких-либо псевдо-селекторов CSS для стилизации панели инструментов. Как сказала дошкольная учительница моего сына (в отношении раздачи фруктового мороженного, но такой подход работает и здесь), "Вы получаете то, что получаете, вы не столкнетесь с истерикой и вы счастливы". Если вы хотите сделать что-то особенное с этими элементами управления, вам нужно выключить элементы по умолчанию и предоставить собственные элементы управления, которые будут соответствующим образом вызывать методы элемента.

Реализуя собственные элементы управления, убедитесь в том, что установили тайм-аут для их скрытия (либо скрывайте их, либо изменяйте их z-index), когда они не используются. Это особенно важно, если у вас есть кнопка для перевода видео в полноэкранный режим, как та, что имеется во встроенном наборе элементов, с помощью которой вы изменяете размер элемента в соответствии с разрешением экрана. Когда вы выполняете это, Windows автоматически обнаруживает, что видео выводится в полноэкранном режиме и выполняет некоторую оптимизацию производительности, но это не делается, если какие-то еще элементы находятся поверх видео. Хорошая идея – отключать любую выполняемую анимацию и отключать ненужные фоновые процессы, наподобие рабочих веб-процессов.

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

mediaControl = Windows.Media.MediaControl;	
mediaControl.addEventListener("soundlevelchanged", soundLevelChanged, false);
mediaControl.addEventListener("playpausetogglepressed", playpause, false);
mediaControl.addEventListener("playpressed", play, false);	
mediaControl.addEventListener("stoppressed", stop, false);	
mediaControl.addEventListener("pausepressed", pause, false);
 

Я так же упоминал, что вы можете отложить загрузку видео до того момента, как оно понадобится, и вместо него показать изображение для предварительного просмотра. Это можно реализовать с помощью атрибута poster, значением которого является изображение, которое нужно использовать:

<video id="video1" poster="media/rocket.png" width="640" height="480"></video>

var video1 = document.getElementById("video1");	
var clickListener = video1.addEventListener("click", function () {	
video1.src = "http://www.kraigbrockschmidt.com/downloads/media/ModelRocket1.mp4";

video1.load();	

// Удалим прослушиватель для предотвращения пересечения с элементами управления видео
 video1.removeEventListener("click", clickListener);

video1.addEventListener("click", function () {
video1.controls = true;	
video1.play();	
});	
});	
 

В данном случае я не использую preload="true" и не задаю src, в итоге ничего не загружается до прикосновения к видео. Когда происходит прикосновение, прослушиватель удаляется, включаются собственные элементы управления видео и начинается воспроизведение. Это, конечно, обходной метод, чаще вы будете исопользовать preload="true" controls src="..." непосредственно в видеоэлементе, в то время, как атрибут poster будет обрабатывать изображения предварительного просмотра.

Отключение скринсейверов и экрана блокировки при воспроизведении

При воспроизведении видео, особенно – полноэкранном, важно отключить любые автоматические тайм-ауты, которые могут очистить экран или заблокировать устройство. Это можно выполнить с помощью объекта ). Прежде чем начинать воспроизведение, создайте экземпляр этого объекта и вызовите его метод requestActive.

var displayRequest = new Windows.System.Display.DisplayRequest();
displayRequest.requestActive();
 

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

Расширения API видеоэлемента

Помимо стандартов HTML5 для элементов video, в Windows 8 к нему добавлены некоторые доополнительные свойства и методы, как показано в следующей табилце и описано на странице "Видеоэлемент" (http://msdn.microsoft.com/library/windows/apps/hh465962.aspx). Кроме того, взгляните на пример "Воспроизведение мультимедиа в HTML" (http://code.msdn.microsoft.com/windowsapps/Media-Playback-Sample-3bdbe7c9), где вы можете найти примеры их использования.

Атрибут source и пользовательские кодеки

Элементы видео (и аудио) могут использовать атрибут HTML5 ), это не большая проблема для приложений Магазина Windows. Однакое, использование source все еще полезно, так как этот атрибут позволяет идентифицировать конкретный кодек для источника медиаданных:

<video controls loop autoplay>
<source src="video1.vp8" type="video/webm" />
</video>
 

Это важно, когда вы хотите предоставить пользовательский кодек для приложения посредством Windows.Media.MediaExtensionManager, что описано в разделе "Пользовательские кодеры/декодеры и обработчики схем" ниже в этой лекции, так как кодек идентифицирует расширение для загрузки и применения при декодировании. Я показал здесь в качестве примера WebM, так как он не доступен напрямую приложениям для Магазина Windows (хотя присутствует в Internen Explorer). Когда исполняется хост-процесс, приложение для Магазина Windows, содержащее вышеописанный элемемент video, будет выполнять поиск подходящего декодера для заданного параметра type.

Применение видеоэффектов

Вышеприведенная таблица показывает, что у видеоэлемента есть методы msInsertVideoEffect и msInsertAudioEffect. WinRT предоставляет встроенный эффект стабилизации видео, который легко применить к элементу. Это показано в Сценарии 3 примера "Мультимедийные расширения" (), где одно и то же видео проигрывается с использованием эффекта и без него, у стабилизированного видео отключен звук:

vidStab.msClearEffects(); 
vidStab.muted = true; 
vidStab.msInsertVideoEffect(Windows.Media.VideoEffects.videoStabilization, true, null);
 

Пользовательские эффекты, как показано в Сценарии 4 примера, применяются в виде отдельных динамически связываемых библиотек (DLL), обычно написанных на C++ для лучшей производительности, и включенных в пакет приложения, так как приложения для Магазина Windows могут устанавливать DLL только для собственного использования, а не для общесистемного доступа. В примере вы найдете проекты DLL для перевода изображения в оттенки серого, инверсии и применения геометрических эффектов, где у последних есть три параметра – для эффекта "рыбьего глаза" (fisheye), сжатия (pinch) и деформации (warp). В файле js/customEffect.js вы можете видеть, как применяются эти эфекты, в первом параметре msInsertVideoEffect, который является строкой и идентифицирует эффект, экспортируемый DLL (смотрите, например, файл InvertTransform.idl в проекте InvertTransform):

vid.msInsertVideoEffect("GrayscaleTransform.GrayscaleEffect", true, null);

vid.msInsertVideoEffect("InvertTransform.InvertEffect", true, null);
 

Второй параметр msInsertVideoEffect, кстати, показывает, нужно ли применять эффект, обычно он имеет значение true. Третий параметр называется конфигурация (config), он содержит дополнительные сведения, которые передаются в эффект. В случае с геометрическими эффектами в примере, этот параметр задает конкретный вариант эффекта:

var effect = new Windows.Foundation.Collections.PropertySet();	
effect["effect"] = effectName;	
vid.msClearEffects();	
vid.msInsertVideoEffect("PolarTransform.PolarEffect", true, effect);
 

Здесь effectName может принимать значения "Fisheye", "Pinch", или "Warp".

Аудиоэффекты, не показанные в примере, применяются так же, с помощью msInsertAudioEffect (с теми же параметрами). Обратите внимание на то, что каждый элемент может иметь не более двух эффектов в потоке. Элемент video может иметь два видеоэффекта и два аудиоэффекта, элемент audio может иметь два аудиоэффекта. Если вы попытаетесь добавить больше, метод выдаст исключение. Поэтому полезно вызывать msClearEffects перед добавлением эффектов.

Подробности об эффектах и других расширениях мультимедиа вы можете найти в материале "Применение расширений мультимедиа" (http://msdn.microsoft.com/library/windows/apps/hh700365.aspx).

Обзор мультимедиа-серверов

Во многих домашних хозяйствах, и в моем тоже, имеется один или большее количество мультимедиа-серверов, доступных в локальной сети, с которых приложения могут воспроизводить мультимедийные данные. Добраться до этих серверов можно с помощью еще одного свойства ). Как и в слудчае с другими известными папками, это просто объект StorageFolder, посредством которого можно перечислять дополнительные папки и файлы или применять запросы к ним. В данном случае, если вы вызываете его метод getFoldersAsync, вы получаете список доступных серверов, каждый из которых представлен собственным объектом StorageFolder. Здесь вы можете использовать файловые запросы, как было описанов в лекции 2, для поиска мультимедийных да нных интересующих вас типов, или использовать критерии поиска, заданные пользователем. Вот пример, посвященный этому: "Клиент мультимедиа-сервера" (http://code.msdn.microsoft.com/windowsapps/Media-Server-sample-fffbe490).

Воспроизведение и микширование звука

Как и в случае с видеоданными, элемент audio предоставляет собственные возможности по воспроизведению, в том числе – элементы управления, циклическое воспроизведение и автовоспроизведение:

<audio src="media/SpringyBoing.mp3" controls loop autoplay></audio> 

Опять же, как описано выше, одни и те же спецификации W3C применимы и к элементу video, и к элементу audio. Уже известный код для проигрывания лишь звуковой дорожки видеофайла, мы можем использовать для проигрывания аудиофайла:

var sound = new Audio("media/SpringyBoing.mp3");
sound1.msAudioCategory = "SoundEffect";	
sound1.load(); //Для предварительной загрузки данных	
sound1.play(); //В любое время позже	
 

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

Как и в случае с видео, для приложения, выполняющего воспроизведение звука, важно соответствующим образом реагировать на события, исходящие из объекта ), в особенности на события playpressed, pausepressed, stoppressed, и playpausetogglepressed. Это позволяет пользователю управлять воспроизведением с помощью аппаратных кнопок, которые можно использовать при воспроизведении музыки, например. Однако, вы можете не применять обработку этих событий, например, при воспроизведении игровых звуков.

Говоря о воспроизведении звука, интересно рассмотреть вопрос о смешивании нескольких звуков, что обычно нужно в играх. Важно понимать, что каждый элемент И, конечно, я играю на гитаре и пою главную партию в этой живой записи, вместе с моим другом Тедом Катлером. Песня "Who is Sylvia?" написана другим моим другом, Дж. Дональдом Уолтерсом, на стихи Шекспира.

var sound1 = new Audio("media/SpringyBoing.mp3");
sound1.load(); //Для предварительной загрузки данных

//Фоновая музыка	
var sound2 = new Audio();	
sound2.msAudioCategory = "ForegroundOnlyMedia"; //Установим перед установкой src	
sound2.src = "http://www.kraigbrockschmidt.com/mp3/WhoIsSylvia_PortlandOR_5-06.mp3";

sound2.loop = true;	
sound2.volume = 0.5; //50%;	
sound2.play();	

document.getElementById("btnSound").addEventListener("click", function () {
//Сбрасываем позицию, если уже воспроизводим	
sound1.currentTime = 0;	
sound1.play();	
});	
 

Загрузив звук, воспроизводимый при касании, мы знаем, что можем воспроизвести его в любое время. При запуске воспроизведения, полезно сбросить currentTime в значение 0, таким образом, звук всегда будет воспроизводиться сначала.

Вопросы о микшировании, особенно в играх, касаются управления различными звуками без знания наперед времени, когда они будут смешиваться. Вам может быть нужно, например, наложить друг на друга воспроизведение одного и того же звука, с различным временем начала, но объявлять три аудиоэлемента с одним и тем же источником непрактично. Представленная техника касается использования "ротации каналов" ("rotating channels"), как описано здесь: http://ajaxian.com/archives/html5-audio-tutorial-rotating-channels. В итоге получается следующее:

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

Подсказка. Нужны звуки для приложения? Загляните на http://www.freesound.org/.

Расширения API аудиоэлемента

Как и в случае с элементом video, и для элемента audio доступны некоторы расширения, в частности те, что можно использовать для управления эффектами (msInsertAudioEffect), DRM (msSetMediaProtectionManager), для воспроизведения на целевых объектах (msPlayToSource, и так далее.), msRealtime, и msAudioTracks, как перечислено раньше в разделе о расшираниях API для видеоэлемента. На самом деле, каждое расширение API для аудио существует и для видео, но два из них имеют особую важность для элементов audio: msAudioDeviceType позволяет приложению определить, на какое выходное устройство осуществляется отправка звука: "Console" (по умолчанию) и "Communications". Это способ, благодаря которому приложение знает, что оно участвует в сеансе связи (наподобие чата), что не связано с воспроизведением мультимедийных аудиоклипов.

msAudioCategory идентифицирует тип проигрываемой аудиозаписи (смотрите таблицу в следующем разделе). Это очень важно для идентификации того, следует ли продолжать воспроизведение музыки в фоновом режиме (тем самым предотвращая перевод приложения в приостановленный режим), как описано далее. Обратите внимание на то, что следует всегда устанавливать это свойство перед установкой src, и на то, что установка режима "Communications" так же устанавливает тип устройства на "Communications" и приводит к установке msRealtime в true.

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

Управление воспроизведением и фоновое аудио

Для того, чтобы рассмотреть различные виды воспроизведения аудио, обратимся к примеру "Средство управления воспроизведением msAudioCategory" (http://code.msdn.microsoft.com/windowsapps/Playback-Manager-e6526e67). Я не привожу здесь скриншот, так как пример лишь работает с аудио, и там особенно нечего показывать! ВВместо этого позвольте мне изложить особенности поведения различных его сценариев следующей таблице, а так же – некоторые категории, которые не представлены в примере, но могут быть использованы в ваших приложениях. В каждом сценарии вам сначала нужно выбрать аудиофайл с помощью средства выбора файлов:

Когда речь идет об отдельном звуковом потоке, между некоторыми из этих категорий нет особой разницы. Действительно, как показано в таблице, звуки разных категорий по-разному воздействуют на другие звуковые потоки, проигрываемые одновременно с ними. Для этой цели в Windows SDK сделан необычный ход: предоставлен второй пример, идентичный вышеописанному, "Дополнительный пример для средства управления воспроизведением" (http://code.msdn.microsoft.com/windowsapps/Playback-Manager2-55c5b86d). Это позволяет вам запустить данные приложения одновременно (одно – в прикрепленном режиме, другое в заполняющем, или одно, либо оба, в фоновом режиме) и воспроизводить аудио различных категорий, наблюдая их взаимодействие.

Как комбинируются различные аудиопотоки, рассматривается в документе "Воспроизведение аудио в приложениях для Windows 8" (http://msdn.microsoft.com/library/windows/hardware/hh770517.aspx). Однко, самое важное, это чтобы вы присваивали каждому аудиопотоку наиболее соответствующую ему категорию. Эти категории помогают средству управления воспроизведением правильно микшировать звуковые потоки, основываясь на ожиданиях пользователя. Речь идет и о нескольких потоках в одном приложении, и о потоках аудио, поступающих от разных приложений (с ограничением количества приложений, которые могут одновременно воспроизводить аудио в фоновом режиме). Например, пользователи ожидают, что будильник, важная форма оповещения, временно приглушит другие аудиопотоки. Похожим образом, пользователи ожидают, что аудиопоток от приложения переднего плана имеет преимущество перед потоком той же категории, воспроизводимым в фоновом режиме. Как разработчик, поэтому, избегайте развлечений с категориями. Просто на значайте наиболее подходящие категории вашим аудиопотокам и позвольте средству управления воспроизведением делать свою работу с аудио, которое поступает из всех источников и создает последовательный опыт взаимодействия пользователя и системы в целом.

Установка категории для любого элемента audio, заключается в простом задании его атрибута msAudioCategory. Каждый сценарий в примере выполняет это одинаково, устанавливая категорию перед установкой атрибута src (здесь показан код из js/backgroundcapablemedia.js):

audtag = document.createElement('audio'); 
audtag.setAttribute("msAudioCategory", "BackgroundCapableMedia");
 audtag.setAttribute("src", fileLocation);
 

Конечно, вы можете сделать то же самое в разметке. Вот примеры:

<audio id="audio1" src="song.mp3" msAudioCategory="BackgroundCapableMedia"></audio>
<audio id="audio2" src="voip.mp3" msAudioCategory="Communications"></audio>
<audio id="audio3" src="lecture.mp3" msAudioCategory="Other"></audio>
 

Однако, в случае с BackgroundCapableMedia and Communcations недостаточно лишь установить категорию: вам так же нужно задать расширение фоновой задачи в манифесте. Это просто сделать на закладке Объявления (Declarations) редактора манифеста:

Во-первых, выберите Фоновые задачи (Background tasks) из выпадающего списка Доступные объявления (Available declarations). Затем установите флаг Аудио (Audio) в группе Поддерживаемые типы задач (Supported task types) и укажите начальную страницу (Start page) в разделе параметров приложения (App settings). Начальная страница не особенно важна для фонового аудио (так приложение никогда не будет запущено извне для этой цели), но это нужно для соответствия правилам заполнения манифеста.

В XML-файле манифеста эти объявления выглядят следующим образом, взгляните на них:

<Application Id="App" StartPage="default.html">
<!-- ... -->
<Extensions>
<Extension Category="windows.backgroundTasks" StartPage="default.html">
<BackgroundTasks>
<Task Type="audio" />
</BackgroundTasks>
</Extension>
</Extensions>
</Application>
 

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

Как это сделать, показано в примере о средстве управления воспроизведением. Вот код (часть опущена) из файла js/communication.js:

mediaControl = Windows.Media.MediaControl;

mediaControl.addEventListener("soundlevelchanged", soundLevelChanged, false);
mediaControl.addEventListener("playpausetogglepressed", playpause, false);	
mediaControl.addEventListener("playpressed", play, false);	
mediaControl.addEventListener("stoppressed", stop, false);	
mediaControl.addEventListener("pausepressed", pause, false);	


// переменная audtag это глобальный аудиоэлемент для страницы
function playpause() {	
if (!audtag.paused) {
audtag.pause();	
} else {	
audtag.play();	
}	
}	
function play() {
audtag.play();
}

function stop() {
// Здесь ничего не делается
}

function pause() {
audtag.pause();
}
function soundLevelChanged() {	
//Перехватываем уведомление SoundLevel и определяем его состояние.
//Если звук выключен, приостанавливаем воспроизведение.	
var soundLevel = Windows.Media.MediaControl.soundLevel;	
//Здесь ничего не делается, параметры приведены для показа содержимого перечисления 
switch (soundLevel) {
case Windows.Media.SoundLevel.muted:
break;
case Windows.Media.SoundLevel.low:
break;
case Windows.Media.SoundLevel.full:
break;
}
appMuted();
}
function appMuted() {	
if (audtag) {	
if (!audtag.paused) {
audtag.pause();	
}	
}	
}	
 

С технической точки зрения, обработчик для события soundLevelChanged здесь не требуется, но другие четыре нужны. Подобная минимальная реализация – это часть упражнения к этой лекции AudioPlayback, код которого так же использует флаг MediaControl.isPlaying для настройки кнопки проигрывание / пауза в пользовательском интерфейсе проигрывателя аудио (смотрите в следующем разделе).

Вот некоторые дополнительные замечания, касающиеся фонового аудио:

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

Пользовательский интерфейс управления воспроизведением

Как было упомянуто в предыдущем разделе, приложениям, которые воспроизводят фоновое аудио, нужно предоставлять обработчики событий объекта MediaControl. Благодаря этому пользовали могут управлять воспроизведением с помощью аппаратных кнопок (они встроены во многие устройства, в том числе – клавиатуры, пульты дистанционного управления) без необходимости переключаться на приложение. Это особенно важно, так как фоновое аудио продолжает воспроиизводиться не только тогда, когда пользователь переключается к другому приложению, но и тогда, когда пенеходит на Начальный экран, и на рабочий стол, или блокирует устройство.

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

На изображениях вы можете видеть имя приложения, по умолчанию отображаемое в интерфейсе, взятое из свойства Отображаемое имя (Display Name), из манифеста. Хотя это и применимо, в идеале аудиоприложению следует передавать подробные метаданные записи в ), который показывает, как получать сведения об альбоме для аудиозаписи, мы вернемся к этому позже.

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

Вы можете заметить в вышеприведенных изображенийх, что кнопки перехода на следующую и предыдущую запись заблокированы. Это потому, что приложение не имеет прослушивателей для событий nexttrackpressed и previoustrackpressed объекта MediaControl. Мы увидим, как пользоваться ими, в следующем разделе. Есть, так же, и другие события, такие, как channeldownpressed, channeluppressed, fastforwardpressed, rewindpressed, recordpressed, и stoppressed, хотя они и не представлены в интерфейсе.

Последовательное воспроизведение аудиозаписей

Приложения, которые воспроизводят аудиозаписи (такие, как музыку, аудиокниги или записи лекций) часто имеют некоторый список записей для последовательного воспроизведения, в особенности, когда приложение исполняется в фоновом режиме. В данном случае важно быстро начинать воспроизведение следующей записи, так как в противном случае Windows приостановит приложение через 10 секунд после завершения воспроизведения текущей записи. Для этой цели прослушивают событие ended элемента audio и устанавливают audio.src на следующую запись. В данном случае хорошая оптимизация заключается в использовании второго объекта Audio и установка его атрибута src после того, как первая запись начнет воспроизводиться. Таким образом, вторая запись будет предварительно загружена и готова к немедленому воспроизведению, таким образом, устраняя потенциальные задержки между записями при воспроизведении. Это реализовано в упражнении к этой лекции AudioPlayback, где я разделил одну песню на четыре сегмента для непрерывного воспроизведения. Я так же покажу здесь, как обрабатывать событии кнопок "Предыдущая запись" и "Следующая запись", вместе с установкой номера сегмента в качестве названия записи:

var mediaControl = Windows.Media.MediaControl;	
var playlist = ["media/segment1.mp3", "media/segment2.mp3", "media/segment3.mp3",
"media/segment4.mp3"];	
var curSong = 0;	
var audio1 = null;	
var preload = null;	

document.getElementById("btnSegments").addEventListener("click", playSegments);
audio1 = document.getElementById("audioSegments");
preload = document.createElement("audio");

function playSegments() {	
//Всегда сбрасывайте прослушиватели событий объектов 
WinRT для предотвращения дублирования и утечек памяти
mediaControl.removeEventListener("nexttrackpressed", nextHandler);	
mediaControl.removeEventListener("previoustrackpressed", prevHandler);	
	
curSong = 0;	

//Приостановим другую музыку 
document.getElementById("musicPlayback").pause();

//Set up media control listeners setMediaControl(audio1);

//Покажем элемент (изначально скрытый) и начнем воспроизведение
audio1.style.display = "";
audio1.volume = 0.5; //50%;
playCurrent();

//Предварительная загрузка следующая запись и готовность к переключению 
var preload = document.createElement("audio"); preload.setAttribute("preload", "auto");
preload.src = playlist[1];

//Переключаемся на следующую запись, как только очередная окончится или 
будет нажат кнопка "Следующая запись"
audio1.addEventListener("ended", nextHandler);	
mediaControl.addEventListener("nexttrackpressed", nextHandler);	
}	
}	
function nextHandler () {
curSong++;

//Активируем кнопку "Предыдущая запись", если у нас есть
 хотя бы одна предыдущая запись	
if (curSong > 0) {	
mediaControl.addEventListener("previoustrackpressed", prevHandler);
}	

if (curSong < playlist.length) {
//playlist[curSong] уже должен быть загружен
playCurrent();

//Установка следующей заранее загруженной композиции
var nextTrack = curSong + 1;

if (nextTrack < playlist.length) {
preload.src = playlist[nextTrack];
} else {
preload.src = null;
mediaControl.removeEventListener("nexttrackpressed", nextHandler);
}
}
}

function prevHandler() {	
//Если уже проигрываем последнюю запись, 
снова добавим обработчик кнопки "Следующая запись"
if (curSong == playlist.length - 1) {	
mediaControl.addEventListener("nexttrackpressed", nextHandler);	
}	

curSong--;

if (curSong == 0) {
mediaControl.removeEventListener("previoustrackpressed", prevHandler);
}

playCurrent();
preload.src = playlist[curSong + 1]; //Это должно работать всегда
}

function playCurrent() {	
audio1.src = playlist[curSong];	
audio1.play();	
mediaControl.trackName = "Segment " + (curSong + 1);
}	
 

При последовательном проигрывании записей, как здесь, из приложения, написанного на JavaScript и HTML, вы можете отметить небольшие паузы между записями, особенно, если первая запись напрямую переходит во вторую. Это существующие ограничения платформы, где существуют уровни между HTML-элементом audio и низкоуровневым API XAudio2, которое, в конечном счете, выполняет реальную работу. В какой-то мере вы можете смягчить этот эффект, например, вы можете организовать плавный переход одной записи в другую, или наложить третью запись на конец первой и начало второй. Так же вы можете использовать отрицательное значение смещения по времени для начала воспроизведения второй записи немного раньше, чем будет окончена первая. Но если вам нужен по-настоящему бесшовный переход между записями, вам нужно обойти элемент audio и использовать API XAudio2 из WinRT-компонента для непосредственного воспроизведения музыки. О том, как это сделать, идет речь в сообщении блога для разработчиков приложений для Windows 8: "Создание собственных компонентов среды выполнения Windows для разработки эффективных приложений" (http://blogs.msdn.com/b/windowsappdev_ru/archive/2012/08/13/windows-metro.aspx).