То, что мы получили на странице, является объектом MediaElement, в свою очередь, порождающим объекты HTMLAudioElement и HTMLVideoElement, интерфейс которых почти совпадает. Спецификацией для тегатворного медиаплеера предусмотрены следующие методы и события:
— canPlayType — показывает, может ли браузер обработать мультимедийный файл этого MIME-типа. Возвращает probably, если вероятность правильной обработки высока, maybe — если низка и пустую строчку в том случае, если такая возможность начисто отсутствует. С помощью этого метода можно проверять возможность воспроизведения различных аудиоформатов:
Var audio = document. createElement("audio"); if(audio. canPlayType("audio/mpeg"){ audio. src = "audio/sample. mp3";
}
Audio. addEventListener("canplaythrough", function () { alert(‘The file is loaded and ready to play!’);
}, false);
— load — загружает медиафайл по url, обозначенному в атрибуте src, при этом ранее загруженный файл будет замещен;
— pause — приостанавливает воспроизведение медиафайла;
— play — начинает или возобновляет воспроизведение медиафайла.
События попробуем изложить последовательно:
— loadstart — начало загрузки медиаданных;
— durationchange — возникает после того, как веб-браузер получит значение продолжительности загружаемого ролика;
— loadedmetadata — завершение загрузки метаданных;
— durationchange — возникает после того, как веб-браузер получит значение продолжительности загружаемого ролика. Возникает после события loadstart и перед событием loadedmetadata;
— loadeddata — объем загруженных мультимедийных данных достаточен для того, чтобы запустить воспроизведение;
— canplay — объем загруженных мультимедийных данных достаточен для того, чтобы успешно запустить воспроизведение;
— canplaythrough — возникает, когда мультимедийные данные начинают загружаться со скоростью, достаточной для воспроизведения, без приостановок на их подгрузку;
— progress — процесс загрузки медиаконтента;
— playing — возникает сразу после начала воспроизведения ролика. Воспроизведение может быть запущено либо самим посетителем, либо вызовом метода play;
— waiting — возникает, когда воспроизведение ролика приостанавливается для подгрузки очередной порции данных из мультимедийного файла;
— stalled — возникает через три секунды после остановки процесса подгрузки очередной порции данных из мультимедийного файла;
— load — возникает после завершения загрузки ролика;
— timeupdate — событие возникает в процессе воспроизведения контента (когда временная позиция изменяется);
— ended — возникает после завершения воспроизведения контента.
Следующие события возникают в результате внешних влияний
(через элементы управления или javascript):
— play. *уточнить, надо ли точку* — возникает после вызова метода play;
— pause — возникает при приостановке воспроизведения ролика либо посетителем, либо вызовом метода pause;
— seeking — возникает, когда посетитель перемещает регулятор текущей позиции воспроизведения ролика;
— seeked — возникает после того, как посетитель переместит регулятор текущей позиции воспроизведения файла в новое положение;
— volumechanged — возникает при изменении уровня громкости, а также отключении и включении звука;
— abort — возникает, когда посетитель прерывает загрузку мультимедийного файла с роликом;
— ratechange — возникает при изменении значения свойства playbackRate (см. ниже);
— readystatechange — возникает при изменении значения свойства readyState (см. ниже);
— emptied — возникает после вызова метода load, когда загруженный в данный момент контент уже выгружен, а новый контент, чей url был присвоен свойству src, еще не загружен.
Ну и:
— error — возникает при сбое в процессе загрузки ролика.
Все эти события нам пригодятся и для элемента <video>, речь о котором еще впереди.
Теперь рассмотрим свойства медиаконтейнера. Кроме дублирующих атрибуты (например, f ontrols или src), он должен обладать следующими полезными данными:
— currentTime — текущая позиция воспроизведения медиафайла в секундах;
— defaultPlaybackRate — скорость обычного воспроизведения файла. Представляет собой коэффициент для естественной скорости воспроизведения мультимедийного файла. То есть при значении defaultPlaybackRate= 4 трек будет проигрываться с учетверенной скоростью;
— duration — продолжительность проигрывания в секундах;
— ended — возвращает true, если проигрывание файла закончилось (только для чтения);
— paused — возвращает значение true, если воспроизведение файла приостановлено (только для чтения);
— playbackRate — текущая скорость воспроизведения файла. Представляет собой коэффициент для естественной скорости воспроизведения мультимедийного файла;
— readyState — возвращает строковое значение, обозначающее текущее состояние мультимедийного файла (только для чтения). Возможны следующие значения:
• uninitialized — файл еще не загружен;
• loading — файл загружается;
• loaded — файл полностью загружен, но, возможно, не готов к воспроизведению;
• i nteractive — пользователь может запустить воспроизведение файла (не гарантирует окончания загрузки);
• complete — файл загружен и готов к воспроизведению;
— seeking — возвращает true, если в данный момент посетитель выполняет «быструю прокрутку» (только для чтения);
— startTime — позиция трека (в секундах), с которой может быть начато его воспроизведение (только для чтения);
— volume — текущая громкость в виде значения от 0.0 — тишина до 1.0 — максимальная громкость (значение по умолчанию).
Давайте применим открывшиеся возможности на практике.
При перечислении команд управления плеера не случайно был упущен метод stop, его просто нет. От pause эта операция отличается тем, что позиция воспроизведения возвращается к нулевой точке. Такой команды действительно нет, но теперь мы можем легко ее задать программно:
If(cmd == ‘minus’) player. volume-=0.1;
If(cmd == ‘stop’){ player. pause(); player. currentTime = 0;
}
}
Попробуем что-нибудь посложнее.
Попытка называть полученный медиобъект плеером пока неудачна, хотя бы потому, что он может проигрывать только одну композицию. Исправим это недоразумение, пусть он проигрывает целый альбом!
Для начала сам плеер:
<audio controls="controls" id="plr">
Теперь инициализирующий JavaScript:
Var player ; //сам медиаобъект
Var track = 0; счетчик треков альбома
Var tracks = [‘Waitin For the Bus. mp3′,’Sheik. mp3′,’Master of Sparks. mp3’] массив треков альбома. В реальном приложении может быть получен посредством ajax/json-запроса
Window. onload=function(){
Player = document. getElementByld(‘plr’); player. addEventListener("ended", nextTrack, false); player. src = tracks[track];
}
Тут, перед тем как загрузить в плеер первый трек, мы связываем событие окончания проигрывания трека с функцией, поставляющей следующий аудиофайл. Она совсем простая:
Function nextTrack(){ track++:
Player. src = tracks[track]; player. play();
}
Теперь логично добавить в интерфейс плеера кнопки перехода на трек вперед и назад, а также неплохо бы обеспечить прямой выбор дорожек из списка воспроизведения, но с этими техническими деталями интерфейса вы теперь можете справиться сами. Вообще, функционала элемента, по-моему, достаточно, чтобы возвести на веб-странице полнофункциональный мультимедийный центр. Хотя желающим полноценно распоряжаться медиаконтентом этого мало. О том, чего именно им не хватает, — в следующей главе, а к работе с MediaElement мы еще вернемся в разделе, посвященном работе с видео.
Добавить комментарий