Мультимедиа

Разбить на страницы

Показывать лекцию целиком

Целью данного занятия является формирование базовых навыков работы с элементами <audio> и <video>.

Задание

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

Ход работы

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

Прежде всего определимся со структурой HTML - документа:

(рис 21.1) Макет HTML - документа для выполнения задания

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

Таким образом, для выполнения задания, необходимо сделать следующее:

Создать страницы альбомов.

Создать главную страницу.

Стилизовать страницы.

Создать JavaScript функции для: добавления трека в очередь воспроизведения, предварительного прослушивания трека, перехода между альбомами и воспроизведения трека из очереди.

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

Рассмотрим по шагам выполнение задания.

Шаг 1

Фрагмент одной такой страницы представлен на листинге 21.1 .

<body>
  <div id="tracks">
   
   <form id="albumtracks">
    <fieldset>
    <legend id="albumname">The Genius Hits The Road</legend>
    <img id="poster" src="audio\Ray Charles\The Genius Hits The Road\AlbumArtSmall.jpg"/>
    <table>
     <tr>
     <td>01-Alabamy Bound</td>
     <td><a class="addtoPLlink" onclick="addtoPL('Ray Charles-Alabamy Bound','
audio/Ray Charles/The Genius Hits The Road/01-Alabamy Bound.mp3');
">Add to playlist</a></td>
     <td><a class="listenlink" onclick="testListen
('audio/Ray Charles/The Genius Hits The Road/01-Alabamy Bound.mp3');
">Listen</a></td>
     </tr>
     
     <tr>
      <td>02-Georgia On My Mind</td>
      <td><a class="addtoPLlink" onclick="addtoPL('Ray Charles-Georgia On My Mind', 
'audio/Ray Charles/The Genius Hits The Road/02-Georgia On My Mind.mp3');
">Add to playlist</a></td>
      <td><a class="listenlink" onclick="testListen
('audio/Ray Charles/The Genius Hits The Road/02-Georgia On My Mind.mp3');
">Listen</a></td>
     </tr>
     
     <tr>
      <td>03-Basin Street Blues</td>
      <td><a class="addtoPLlink" onclick="addtoPL('Ray Charles-Basin Street Blues',
'audio/Ray Charles/The Genius Hits The Road/03-Basin Street Blues.mp3');
">Add to playlist</a></td>
      <td><a class="listenlink" onclick="testListen
('audio/Ray Charles/The Genius Hits The Road/03-Basin Street Blues.mp3');
">Listen</a></td>
     </tr>
     
     <tr>
      <td>04-Mississippi Mud</td>
      <td><a class="addtoPLlink" onclick="addtoPL('Ray Charles-Mississippi Mud',
'audio/Ray Charles/The Genius Hits The Road/04-Mississippi Mud.mp3');
">Add to playlist</a></td>
      <td><a class="listenlink" onclick="testListen
('audio/Ray Charles/The Genius Hits The Road/04-Mississippi Mud.mp3');
">Listen</a></td>
     </tr>
     .........................................
</body>

Обратите внимание, что сразу же заданы все атрибуты для дальнейшей стилизации, а также вызова JavaScript, а именно:

addtoPL() –функция для добавления указанного трека в пользовательскую очередь воспроизведения;

testListen() – функция для предварительного прослушивания трека (в течении 10 секунд, например).

Примерно так будет выглядеть одна из страниц альбомов:

(рис 21.2) Результат выполнения шага 1

Шаг 2

Создадим HTML - документ для нашей главной страницы:

<body onload="load();">
    <div id="header">
      <h1>Audio example</h1>
    </div>
    
    <div id="albums">
      <form id="albumform">
        <fieldset>
          <legend class="singer">Ray Charles</legend>
          <ul class="albumname">
            <li><a class="albumlink" onclick="loadAlbum('RC_hitstheroad.html');
">The Genius Hits The Road</a></li>
            <li><a class="albumlink" onclick="loadAlbum('RC_smile.html');>Have 
A Smile With Me</a></li>
          </ul>
        </fieldset>
      </form>
    </div>
    
    <div id="tracks">
      <iframe id="target" src=""></iframe>
      
    </div>

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

load() – загрузка списка воспроизведения;

loadAlbum() – загрузка внешнего HTML - документа (альбома).

Шаг 3

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

#albums
{
  float:left;
}

#tracks
{
  float:left;
}

#audioPanel
{
  clear:left;
}

#albumform
{
  width:350px;
}

audio
{
  width:100%
}

a.albumlink:hover
{
  cursor:pointer;
  font-style:italic;
  font-weight:bolder;
}

#playlistpanel
{
  border:3px double black;
}

#target
{
  width:800px;
  height:600px;
  border:0px;
}

a.listenlink
{
  margin:10px;
}

a.addtoPLlink:hover, a.listenlink:hover
{
  cursor:pointer;
  font-style:italic;
  font-weight:bolder;
}

#albumtracks
{
  width:500px;
}

li.PL:hover
{
background-color:Blue;
cursor:pointer;
color:White;
}

body 
{
  background-color:#F7F7F7;
}

h1
{
  text-align:center;
}

Все указанные выше селекторы и атрибуты стилей были рассмотрены нами в рамках лекций и предыдущих практических занятий, поэтому не будем подробно останавливаться на их детальном разъяснении.

Результат шагов 2 - 3 можно увидеть на рисунках рис 21.3 - рис 21.4.

(рис 21.3) Результат выполнения шагов 2 и 3

(рис 21.4) Результат шагов 2 и 3 с подгруженным содержимым

Шаг 4

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

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

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

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

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

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

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

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(); /*начало воспроизведения аудио*/

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

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(); /*начинаем воспроизведение*/

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

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.5

(рис 21.5) Результат выполнения шага 4

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

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

Страницы:

Целью данного занятия является формирование базовых навыков работы с элементами <audio> и <video>.

Задание

Ход работы

Прежде всего определимся со структурой HTML - документа:

(рис 21.1) Макет HTML - документа для выполнения задания

Таким образом, для выполнения задания, необходимо сделать следующее:

Создать страницы альбомов.

Создать главную страницу.

Стилизовать страницы.

Рассмотрим по шагам выполнение задания.

Шаг 1

Фрагмент одной такой страницы представлен на листинге 21.1 .

<body>
  <div id="tracks">
   
   <form id="albumtracks">
    <fieldset>
    <legend id="albumname">The Genius Hits The Road</legend>
    <img id="poster" src="audio\Ray Charles\The Genius Hits The Road\AlbumArtSmall.jpg"/>
    <table>
     <tr>
     <td>01-Alabamy Bound</td>
     <td><a class="addtoPLlink" onclick="addtoPL('Ray Charles-Alabamy Bound','
audio/Ray Charles/The Genius Hits The Road/01-Alabamy Bound.mp3');
">Add to playlist</a></td>
     <td><a class="listenlink" onclick="testListen
('audio/Ray Charles/The Genius Hits The Road/01-Alabamy Bound.mp3');
">Listen</a></td>
     </tr>
     
     <tr>
      <td>02-Georgia On My Mind</td>
      <td><a class="addtoPLlink" onclick="addtoPL('Ray Charles-Georgia On My Mind', 
'audio/Ray Charles/The Genius Hits The Road/02-Georgia On My Mind.mp3');
">Add to playlist</a></td>
      <td><a class="listenlink" onclick="testListen
('audio/Ray Charles/The Genius Hits The Road/02-Georgia On My Mind.mp3');
">Listen</a></td>
     </tr>
     
     <tr>
      <td>03-Basin Street Blues</td>
      <td><a class="addtoPLlink" onclick="addtoPL('Ray Charles-Basin Street Blues',
'audio/Ray Charles/The Genius Hits The Road/03-Basin Street Blues.mp3');
">Add to playlist</a></td>
      <td><a class="listenlink" onclick="testListen
('audio/Ray Charles/The Genius Hits The Road/03-Basin Street Blues.mp3');
">Listen</a></td>
     </tr>
     
     <tr>
      <td>04-Mississippi Mud</td>
      <td><a class="addtoPLlink" onclick="addtoPL('Ray Charles-Mississippi Mud',
'audio/Ray Charles/The Genius Hits The Road/04-Mississippi Mud.mp3');
">Add to playlist</a></td>
      <td><a class="listenlink" onclick="testListen
('audio/Ray Charles/The Genius Hits The Road/04-Mississippi Mud.mp3');
">Listen</a></td>
     </tr>
     .........................................
</body>

addtoPL() –функция для добавления указанного трека в пользовательскую очередь воспроизведения;

testListen() – функция для предварительного прослушивания трека (в течении 10 секунд, например).

Примерно так будет выглядеть одна из страниц альбомов:

(рис 21.2) Результат выполнения шага 1

Шаг 2

Создадим HTML - документ для нашей главной страницы:

<body onload="load();">
    <div id="header">
      <h1>Audio example</h1>
    </div>
    
    <div id="albums">
      <form id="albumform">
        <fieldset>
          <legend class="singer">Ray Charles</legend>
          <ul class="albumname">
            <li><a class="albumlink" onclick="loadAlbum('RC_hitstheroad.html');
">The Genius Hits The Road</a></li>
            <li><a class="albumlink" onclick="loadAlbum('RC_smile.html');>Have 
A Smile With Me</a></li>
          </ul>
        </fieldset>
      </form>
    </div>
    
    <div id="tracks">
      <iframe id="target" src=""></iframe>
      
    </div>

load() – загрузка списка воспроизведения;

loadAlbum() – загрузка внешнего HTML - документа (альбома).

Шаг 3

#albums
{
  float:left;
}

#tracks
{
  float:left;
}

#audioPanel
{
  clear:left;
}

#albumform
{
  width:350px;
}

audio
{
  width:100%
}

a.albumlink:hover
{
  cursor:pointer;
  font-style:italic;
  font-weight:bolder;
}

#playlistpanel
{
  border:3px double black;
}

#target
{
  width:800px;
  height:600px;
  border:0px;
}

a.listenlink
{
  margin:10px;
}

a.addtoPLlink:hover, a.listenlink:hover
{
  cursor:pointer;
  font-style:italic;
  font-weight:bolder;
}

#albumtracks
{
  width:500px;
}

li.PL:hover
{
background-color:Blue;
cursor:pointer;
color:White;
}

body 
{
  background-color:#F7F7F7;
}

h1
{
  text-align:center;
}

Результат шагов 2 - 3 можно увидеть на рисунках рис 21.3 - рис 21.4.

(рис 21.3) Результат выполнения шагов 2 и 3

(рис 21.4) Результат шагов 2 и 3 с подгруженным содержимым

Шаг 4

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

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

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

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

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

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

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(); /*начало воспроизведения аудио*/

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

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(); /*начинаем воспроизведение*/

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

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.5

(рис 21.5) Результат выполнения шага 4

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

Занятие пройдено

Предыдущее занятие Занятие пройдено Следующее занятие

Вернуться к учебному плану

Задание

Ход работы

Шаг 1

Шаг 2

Шаг 3

Шаг 4

Задание

Ход работы

Шаг 1

Шаг 2

Шаг 3

Шаг 4

Купить дополнительную попытку

Вы действительно хотите купить ещё одну попытку для прохождения тестирования?

Успешно!

Напишите нам, если у вас есть вопросы

Уважаемые пользователи ИНТУИТ!

Уважаемые пользователи ИНТУИТ!

Добро пожаловать на обновлённый сайт НОУ «ИНТУИТ»!