Современные информационные технологии. Лабораторное занятие №3. Мультимедиа события On-release: лоадер звука

Вам нужно создать простой лоадер звука: I) со сценарием запуска без интерфейса; II) со сценарием запуска и дефолтным интерфейсом; III) с упаковкой лоадера во внешний компонент.

Для этого:
I) сценарий запуска без интерфейса:

1) Вам нужно загрузить любой исходный музыкальный файл (например, в формате mp3) на любую площадку - проще всего в https://sites.google.com (карта сайта - управление страницами - приложения)

2) Описать сценарий запуска аудио в Javascript и указать в нем источник звука:

function playAudio(){
var myAudio = new Audio;
myAudio.src = "https://sites.google.com/site/konoplevmedia/trackmove.mp3";
myAudio.play();

}

3) Указать в коде, что этот сценарий будет работать как js, то есть заключить в тег:

<script type="text/javascript"></script> 

4) Вывести ссылку-кнопку, по нажатию на которую будет запускаться звук. В примере это слово "звук", у вас должна быть картинка.

<a href="#" id="myLink" onclick="playAudio();">Звук</a>

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

<script type="text/javascript">
jQuery(function(){
playAudio();
});

</script> 

6) Встроить скрипт в HTML-виджет в вашем блоге в Blogger и разместить его на любой странице или в сайдбаре. Ссылку на эту страницу оставить в комментарии к данному посту.

 II) сценарий запуска с дефолтным интерфейсом:

Для этого используйте теги HTML5.

1. Вам потребуется сценарий воспроизведения аудио в Javascript:

document.addEventListener('play', function(e) {
  var audios = document.getElementsByTagName('audio');
  for(var i = 0; i < audios.length; i++) {
    if(audios[i] != e.target) {
      audios[i].pause();
    }
  }
}, true);

2. Оформите этот сценарий, указав в коде, что это js

3. Затем через HTML5-тег "audio" создайте дефолтный интерфейс лоадера:

<audio id="audio1" preload="metadata" controls>

4. Укажите источник звука:


<source src="https://sites.google.com/site/konoplevmedia/trackmove.mp3"></source></audio>

5. Встройте скрипт в HTML-виджет в вашем блоге в Blogger и разместите его на любой странице или в сайдбаре. Ссылку на эту страницу оставьте в комментарии к данному посту.



 III) упаковка лоадера во внешний компонент:

Установите скрипт лоадера внутрь тулбара, чтобы запускать трек можно было при его открытии.

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