Полезное:
Как сделать разговор полезным и приятным
Как сделать объемную звезду своими руками
Как сделать то, что делать не хочется?
Как сделать погремушку
Как сделать так чтобы женщины сами знакомились с вами
Как сделать идею коммерческой
Как сделать хорошую растяжку ног?
Как сделать наш разум здоровым?
Как сделать, чтобы люди обманывали меньше
Вопрос 4. Как сделать так, чтобы вас уважали и ценили?
Как сделать лучше себе и другим людям
Как сделать свидание интересным?
Категории:
АрхитектураАстрономияБиологияГеографияГеологияИнформатикаИскусствоИсторияКулинарияКультураМаркетингМатематикаМедицинаМенеджментОхрана трудаПравоПроизводствоПсихологияРелигияСоциологияСпортТехникаФизикаФилософияХимияЭкологияЭкономикаЭлектроника
Ход работы. Рассмотрим подробно создание очереди воспроизведения аудио файлов, аналогичная задача для видео файлов остается на самостоятельное рассмотрение
Рассмотрим подробно создание очереди воспроизведения аудио файлов, аналогичная задача для видео файлов остается на самостоятельное рассмотрение.
Прежде всего определимся со структурой 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>Date: 2015-07-22; view: 581; Нарушение авторских прав; Помощь в написании работы --> СЮДА... |