Томский политехнический университет
Опубликован: 01.08.2012 | Доступ: свободный | Студентов: 17345 / 1605 | Оценка: 3.91 / 4.09 | Длительность: 12:32:00
Практическая работа 5:

Мультимедиа

< Практическая работа 4 || Практическая работа 5: 123 || Лекция 18 >
Аннотация: В рамках данного практического задания нами будет рассмотрен пример создания плэйлиста воспроизведения в рамках HTML - страницы

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

Задание

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

Ход работы

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

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

Макет HTML - документа для выполнения задания

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

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

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

  1. Создать страницы альбомов.
  2. Создать главную страницу.
  3. Стилизовать страницы.
  4. Создать 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>
21.1.

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

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

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

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

Рис. 21.2. Результат выполнения шага 1
< Практическая работа 4 || Практическая работа 5: 123 || Лекция 18 >
Эмиль Галеев
Эмиль Галеев

По каким то причинам не сохраняется текст. И не выдает сообщение об ошибке если текста нет. Проверил все внимательно проблем в написании нет. Вопрос почему он не сохраняет?

Алексей Вычегжанин
Алексей Вычегжанин

http://www.intuit.ru/studies/courses/3734/976/lecture/27486?page=3

Заполнил html, js и css-файлы согласно рекомендациям. После запуска главной страницы в панели разработчика браузера, во вкл. Console, выдает сообщение об ошибке:

"script.js:85 Uncaught TypeError: Cannot read property 'addEventListener' of null"

, ссылаясь на строку js-файла (функция load()):

" audio.addEventListener('ended', function () "

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

Функция добавления записей в плейлист не работает. Соответственно сам плей-лист и полоса прокрутки не открываются.

Алексей Скрипий
Алексей Скрипий
Россия
Ирина Сотникова
Ирина Сотникова
Россия