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

Мультимедиа

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

Шаг 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>
21.2.

Код приведенный в листинге выше довольно прост, подобное мы уже не раз рассматривали в рамках курса. Поясним только встречающие имена 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;
}
21.3.

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

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

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

увеличить изображение
Рис. 21.3. Результат выполнения шагов 2 и 3
Результат шагов 2 и 3 с подгруженным содержимым

увеличить изображение
Рис. 21.4. Результат шагов 2 и 3 с подгруженным содержимым
< Практическая работа 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 () "

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

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

Наталья Беляева
Наталья Беляева
Россия, Москва, ГБОУ СОШ №1905, 2012