Опубликован: 01.08.2012 | Уровень: для всех | Доступ: платный | ВУЗ: Томский политехнический университет
Практическая работа 5:

Мультимедиа

< Практическая работа 4 || Практическая работа 5: 123 || Лекция 18 >

Шаг 4

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

Будем рассматривать от простого к более сложному.

Функция добавления трека в очередь воспроизведения:

function addtoPL(name, path)
{
  localStorage[name] = path; /*добавляем в localStorage путь к аудио файлу*/
  window.parent.location.href=window.parent.location.href;
   /*поскольку iframe подгружает внешнюю html страницу, то после добавления
    трека в список, необходимо явно перезагрузить основную страницу*/
21.4.

Функция загрузки внешнего содержимого:

function loadAlbum(path)
{
  var iframe = document.getElementById('target');
  iframe.setAttribute('src', path);
  sessionStorage["album"] = path; /*чтобы при перезагрузке родителя, 
   текущая веб - страница альбома не исчезала, используем sessionStorage, 
     для сохранения состояния*/
21.5.

Функция предварительного прослушивания:

function testListen(path)
{
  var audio = document.createElement('audio'); /*создаем новый audio element*/
  var div = document.getElementById('tracks');
   /*получаем доступ к контейнеру с треками*/
  audio.src= path; /*задаем источник для воспроизведения*/
  audio.controls = false;
   /*отключаем элементы управления аудио, фактически элемент не будет отображаться*/
  div.appendChild(audio); /*добавляем созданный audio элемент контейнеру*/
  audio.addEventListener('timeupdate', function()
   /*обработчик событий, вызываемый в течении всего воспроизведения аудио, каждые 250 мс*/
  {
    if (audio.currentTime > 10) {audio.pause();}
     /*прерываем воспроизведение после 10 секунд прослушивания*/
  }, false);
  audio.play(); /*начало воспроизведения аудио*/
21.6.

Функция воспроизведения трека из пользовательского списка:

function playtrack(track)
{
  var b = false;
  for(var i in localStorage)
  {
  /*в данном цикле мы находм текущий трек и "запоминаем" следующий*/
    if (b) {localStorage['next'] = localStorage[i]; break; }
    if (i == track) { b=true; }
  }
  var audio = document.getElementById('audio'); /*получаем доступ к элементу audio*/
  audio.src = localStorage[track]; /*задаем источник воспроизведения*/
  audio.controls = true;
  audio.play(); /*начинаем воспроизведение*/
21.7.

Функция загрузки списка воспроизведения:

function load()
{
  if (sessionStorage["album"] != undefined)
   /*если документ открывается впервые, либо после долгого перерыва, то sessionStorage
    не будет содержать информацию о последнем открытом альбоме*/
  {
    loadAlbum(sessionStorage["album"]);
     /*открываем последний альбом, к которому обратился пользователь, таким образом
      после принудительного обновления главной страницы в функции adtoPL
       пользователю не придется делать это самостоятельно*/
  }
  var audio = document.getElementById('audio');
   /*получаем доступ к audio элементу*/
  audio.addEventListener('ended', function()
   /*добавляем обработчик события - окончания текущего воспроизвдения*/
  {
  playtrack('next');
   /*инициируем воспроизведение следующего трека из пользовательского списка*/
  }, false);
  /*переходим к загрузке пользовательского списка воспроизведения*/
  var list = document.getElementById('playlist');
   /*получаем доступ к списку воспроизведения*/
  for(var i in localStorage) /*добавляем треки, сохраненные пользователем*/
  {
    var element = document.createElement('li');
    element.setAttribute('class','PL');
    element.setAttribute('onclick',"playtrack('"+i+"')");
    element.innerText = i;
    if ( i != 'next')
    {
    list.appendChild(element);
    }
  }
21.8.

На этом выполнение задания окончено. Результат представлен на рис. 21.5

Результат выполнения шага 4

увеличить изображение
Рис. 21.5. Результат выполнения шага 4

Разумеется наш пример более чем схематичен. Для того, чтобы попытаться внедрить подобный сервис придется продумать еще множество мелочей.

Мы хотели лишь продемонстрировать базовые возможности по управлению элементами <audio> и <video>.

< Практическая работа 4 || Практическая работа 5: 123 || Лекция 18 >
Галина Башкирова
Галина Башкирова

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

Системный администратор информационно-коммуникационных» систем.
Мне нужно самой найти тему? или делать по высланным темам

 

Константин Моренко
Константин Моренко
Евгений Зиновьев
Евгений Зиновьев
Россия, Белгород, Белгородский государственный технологический университет им. В.Г. Шухова, 2005
Владимир Харитонов
Владимир Харитонов
Россия, Петрозаводск, Карельский государственный педагогический университет, 2002