Аудио

В этой лекции о Flatpack Records мы рассмотрим новую возможность Macromedia Flash MX, позволяющую динамически загружать MP3-файлы. В предыдущих версиях Flash при необходимости проигрывать MP3 внутри SWF приходилось использовать один из двух методов:

Для добавления звука на веб-сайт Flash MX этого больше не требует. Flash может вызывать внешние MP3-файлы с сервера и загружать их в главный фильм по запросу. Мы используем эту новую возможность на сайте Flatpack Records. Пользователи заходят на сайты своих любимых групп, чтобы прослушать новые песни любимых артистов, и нам хочется верить, что сайт Flatpack Records не является исключением.

Как правило, для прослушивания внешнего аудиоматериала на сайте, созданном не во Flash MX, нужно использовать надстройки, такие как RealOne Player или QuickTime, которые также должны быть установлены на пользовательских компьютерах.

На сайте Flatpack Records мы не хотим озадачиваться дополнительными надстройками, так как для просмотра сайта у пользователя уже должен быть установлен Flash Player 6. С его помощью можно прослушивать музыку на нашем сайте. Все пользователи, не имеющие Flash Player 6, должны быть предупреждены об этом перед входом на сайт Flatpack, и им должна быть предложена ссылка на сайт, с которого можно загрузить данный проигрыватель.

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

Flash MX предоставляет два метода загрузки MP3: потоковый и не потоковый. Мы подробно расскажем о каждом из методов.

Непотоковое аудио

При непотоковом воспроизведении во Flash целиком загружается MP3-файл, а потом уже начинается воспроизведение. Этот способ лучше использовать, если необходимо высокое качество звука и недопустимо прерывание воспроизведения. Но в данном случае перед тем, как можно будет прослушивать файл (в случае с обычным модемным соединением), должно будет пройти немало времени. Пользователь будет вынужден ждать, пока файл загрузится полностью. По этой причине непотоковое воспроизведение обычно применяется к файлам небольшого размера, таким как озвучивание нажатия клавиш, но не к относительно большим файлам с музыкой.

Непотоковое воспроизведение полезно использовать для звуков событий, которые в фильме повторяются, так как их необходимо загружать на компьютер пользователя лишь один раз и сохранять локально до тех пор, пока Flash не вызовет их снова.

Потоковое аудио

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

Недостатком этого способа является то, что звуковой файл должен воспроизводиться с определенной частотой передачи битов, в зависимости от скорости соединения пользователя. Если посетитель сайта использует для подключения модем 56k, ему нужно будет выбрать MP3-файл со скоростью передачи битов примерно 24 kbps. Более высокая скорость передачи битов будет "подвешивать" модемное соединение, что может привести к прерыванию потокового воспроизведения из-за ожидания загрузки данных для воспроизведения. Ситуация аналогична ситуации с потоковым воспроизведением видеоданных во Flash.

Для наглядности ниже приведены скорости передачи битов для воспроизведения MP3-файлов в соотношении с различными скоростями соединения.

Это идеализированные значения скорости передачи битов, а соединения, особенно модемные, весьма далеки от идеала. Теоретически можно получить скорость передачи битов в 40kbps на модеме 56k, но немногие пользователи смогут поддерживать такую скорость в течение воспроизведения четырехминутной песни. В случае с ADSL-соединением можно получить более высокую скорость передачи битов (около 250 kbps), однако, так как 160kbps виртуально обеспечивает CD-качество воспроизведения, не имеет смысла использовать более высокую скорость. Даже скорость 96kbps по качеству воспроизведения приближена к CD, а скорость в 64kbps обеспечивает качество, сравнимое с качеством звука на FM-радио.

Помните также, что при потоковой загрузке звук удаляется после воспроизведения, и для повторного проигрывания требуется новая загрузка. Здесь невозможно сделать replay или reused.

Кодирование MP3 с использованием iTunes (только Mac)

Существует набор приложений для кодирования MP3-файлов, а также бесчисленное множество кодировщиков в интернете для пользователей PC - попробуйте поискать по строке поиска "MP3 encoders" на http://download.com. В качестве альтернативы можно зайти на http://tucows.blueyonder.co.uk/mmeddia/cdrip95.html. К радости пользователей Mac, одним из лучших является продукт, им хорошо знакомый - iTunes (доступен для загрузки с www.apple.com/itunes).

Использовать iTunes довольно легко, и работа с этой программой не требует длительного изучения, однако мы вкратце рассмотрим основы преобразования звуковой дорожки в MP3-файл для веб-сайта. Вы можете преобразовать в MP3 файлы формата AIFF, WAV или звуковую дорожку на CD. В данном упражнении мы будем использовать файл AIFF, однако принцип аналогичен и для других файловых форматов.

Откройте iTunes и выберите Edit > Preferences: Щелкните на ярлыке Importing в верхней части диалогового окна Preferences и выберите Custom из ниспадающего списка Configuration. После этого нажмите OK.

В основном мы будем работать с опциями Bit Rate и Sample Rate. Установите скорость передачи битов согласно параметрам соединения, выбор которых вы планируете предоставить на сайте. Например, на сайте Flatpack Records есть 3 различных параметра потокового воспроизведения MP3 для выбора пользователем в зависимости от скорости их соединений: 56k, ISDN или ADSL. Поэтому, если бы я сейчас создавал MP3-файл, который воспроизводился бы в потоковом режиме после выбора пользователем параметра 56k, я установил бы скорость передачи битов на значение 24kbps.

Очень важно правильно установить частоту воспроизведения, так как в процессе тестирования выяснилось, что Flash "не любит" частоты воспроизведения, превышающие 22,050 кГц. Когда я впервые попробовал использовать рассматриваемый подход, я использовал несколько файлов AIFF с частотой 44,100 кГц, которые затем преобразовал в программе iTunes. Так как я не изменял настройку частоты сэмплирования, оставив ее на значении по умолчанию Auto, я создал MP3 с частотой сэмплирования, также равной 44,100 кГц. Это не вызывает сложностей до тех пор, пока Flash не попытается динамически загрузить файлы и проиграть их, во время чего вы получите "интересный" эффект: Flash будет проигрывать звуковую дорожку с удвоенной скоростью, что совсем нежелательно. Чтобы предотвратить это, необходимо установить частоту на значение 22,050 кГц.

Как правило, нужно оставлять параметр Stereo Mode на значении Joint Stereo. Это улучшает качество звука без увеличения размера файла, в особенности при низкой скорости передачи битов. Joint Stereo позволяет одному каналу обрабатывать информацию, которая была изначально идентична в обоих каналах, в то время как другой канал передает исходную информацию. Научное обоснование в данном контексте не имеет особой важности, и будет вполне достаточно сказать, что с данными настройками все будет работать немного лучше.

Вернитесь к iTunes и выберите Advanced > Convert to MP3: Появится окно, предлагающее выбрать объект для преобразования. Выберите нужный файл WAV или AIFF (либо звуковую дорожку на CD) на вашем компьютере и начните преобразование выбранного файла в формат MP3.

Преобразованная звуковая дорожка будет теперь расположена в музыкальной библиотеке iTunes Music Library. Для подготовки MP3 к использованию во Flash, нужно перетащить звуковую дорожку из приложения iTunes в соответствующую папку в месте расположения файлов вашего веб-сайта. Файл будет находиться там до тех пор, пока вы не вызовете его из Flash.

Загрузка MP3-файлов в Flash

Файлы MP3 загружаются в SWF с использованием нового метода loadSound. В качестве примера ниже приведен сценарий для загрузки MP3-файла с именем friends_on_tv_56.mp3 в папке с именем audio.

mySoundObject = new Sound();
mySoundObject.loadSound("audio/friends_on_tv_56.mp3", true);

Объект Sound (в данном случае с именем mySoundObject ) выступает в роли контейнера аудиофайла MP3. MP3-файл с этого момента будет управляться ссылкой на имя mySoundObject. Последний параметр команды определяет, является ли воспроизведение звука потоковым. В данном случае эта опция установлена на значение true, поэтому при наличии достаточной скорости подключения, файл начнет воспроизводиться сразу после начала загрузки.

Посмотрим, как этот метод используется на практике применительно к сайту Flatpack Records. Чтобы вникнуть в суть рассматриваемого в данном параграфе материала, откройте файл flatpackrecords.swf и поэкспериментируйте с областью с аудиоданными.

MP3 на Flatpack

В области звуковых данных в главном flatpackrecords.fla в фильме audio есть кадр с именем mp3.

Эта область содержит три звуковых дорожки группы Banthafodder с четырьмя различными параметрами загрузки для каждого файла. Я выбрал эти параметры для подгонки под три наиболее распространенных типа соединений, с помощью которых пользователи будут подключаться к сайту. Четвертый параметр 160kbps download дает пользователю возможность выбрать загрузку высококачественной версии звуковой дорожки, даже если он использует низкоскоростное соединение (если длительность загрузки не имеет значения).

progressBar._visible = false; 
//
function progress(loadingTarget) { 
  progressBar._visible = true; 
  progressBar.setLoadTarget(loadingTarget); 
  this.onEnterFrame = function() {
    if ((progressBar.getPercentComplete() == 100) 
       (playing == false)) {
      this.onEnterFrame = undefined;
      loadingTarget.start();
      playing = true;
      progressBar._visible = false;
      if (loadingtext == "downloading") {
        loadingtext = "playing";
      } 
    }
  }; 
}

this.onEnterFrame = undefined;

loadingTarget.start ();

playing = true;
progressBar._visible = fales;

if (loadingtext == "downeloading")  {
  loadingtext = "playing";
}

function loadStream(fileName) { 
  mp3 = new Sound(); 
  mp3.stop();
  mp3.loadSound("audio/" + fileName, true);
  stream = true; 
  loadingtext = "streaming";
  progress (mp3);
}
function downloadMp3(fileName) {
  mp3 = new Sound();
  mp3.stop();
  mp3.loadSound("audio" + fileName, false);
  stream = false;
  playing = false;
  loadingtext = "downloading";
  progress (mp3); 
}

mySoundObject.loadSound ("path/mp3 filename", "streaming flag") ;

Ниже приведена оставшаяся часть кода в кадре 2 для слоя actions/labels фильма audio, которая устанавливает функции потокового воспроизведения/загрузки для каждой из кнопок.

friends56k.onRelease = function() {
  loadStream("friends_on_tv_56.mp3")
};
friendsISDN.onRelease = function() {
  loadStream("friends_on_tv_isdn.mp3");
};
friendsADSL.onRelease = function() {
  loadStream("friends_on_tv_adsl.mp3");
};
friendsDownload.onRelease = function() { 
  downloadMp3("friends_on_tv_adsl.mp3");
};
gender56k.onRelease = function() {
  loadStream("gender_fiasco_56.mp3");
};
genderISDN.onRelease = function() {
  loadStream("gender_fiasco_isdn.mp3");
};
genderADSL.onRelease = function() {
  loadStream("gender_fiasco_adsl.mp3");
};
genderDownload.onRelease = function() {
  downloadMp3("gender_fiasco_adsl.mp3");
};
yrRecord56k.onRelease = function() { 
  loadStream("your_record_56.mp3");
};
yrRecordlSDN.onRelease = function() {
  loadStream("your_record_isdn.mp3");
};
yrRecordADSL.onRelease = function() { 
  loadStream("your_record_adsl.mp3");
};
yrRecordDownload.onRelease = function() { 
  downloadMp3("your_record_adsl.mp3");
};

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

Если пользователь выбирает кнопку загрузки 160 kbps, текст сменяется на "downloading".

По окончании загрузки файла начинается его воспроизведение, и текст опять меняется для отражения этого процесса.

Управление файлами

Так как мы предоставили пользователю возможность выбора между тремя параметрами соединения, нам необходимы три MP3-файла для каждой звуковой дорожки, закодированных на соответствующих скоростях передачи битов для удовлетворения соответствующему выбору пользователя. Эти файлы необходимо назвать соответствующим образом и поместить их на сервере в папке, которая будет легко доступна для ActionScript. Вы можете посмотреть на организацию файлов Flatpack на компакт-диске, где отражена структура, которую необходимо использовать на сервере. Открыв компакт-диск в Windows Explorer или в окне Finder, вы увидите, что все файлы MP3 названы в логическом порядке и находятся в своей собственной папке Audio.

Управление данной структурой является очень важным аспектом, так как с ее помощью реализуется управление самим сайтом. Если другим разработчикам необходимо будет обновлять файлы по прошествии некоторого времени, как, собственно говоря, обычно и бывает на сайте музыкальных коллективов, они могут легко и быстро идентифицировать имя и расположение файлов и выяснить, к каким кнопкам они относятся в главном интерфейсе. Посмотрев работу этого сайта в режиме online, вы увидите, что даже файлы для потокового воспроизведения со скоростью 56k имеют достаточно приличное качество, и ничем не отличаются от потокового воспроизведения файлов Real Media на такой же скорости. MP3-технология также имеет преимущество при потоковом воспроизведении по более широкополосным каналам. Линия ADSL может легко воспроизводить в потоковом режиме файл MP3 с качеством компакт-диска.

Если вы никогда не загружали MP3-файл из интернета, то имейте в виду, что, как правило, он загружается прямо на ваш жесткий диск. Стандартные файлы для загрузки обычно преобразованы в ZIP-архивы (для PC) или в SIT (для Macintosh), что, как правило, вызывает открытие браузером менеджера загрузки или предоставления возможности сохранения. При работе с сайтом Flatpack Records этого не происходит, так как MP3-файл загружается перед началом воспроизведения. Может, это звучит несколько банально, но помните про авторские права на файлы в сети. Использование Flash Player 6 для воспроизведения музыки позволяет пользователю проигрывать или осуществлять предварительное прослушивание файла без непосредственного владения правами на него и создавать копии материала с качеством компакт-диска.

Если вы хотите разрешить пользователю загрузку файла (на жесткий диск), используйте для этого getURL c целевой ссылкой _blank на файл MP3, ZIP или SIT.

Фоновая тема

Последняя часть звуковой составляющей Flatpack Records содержит две различные звуковые дорожки для фонового воспроизведения на выбор пользователя. При загрузке MP3 аудиоданные воспроизводились, загружая MP3 в звуковые объекты, которые содержались в отдельных фильмах. При использовании этого метода звук исчезает, когда пользователь покидает определенный раздел сайта. Это идеально для раздела, в котором загружаются MP3, так как пользователю нужно будет прекращать воспроизведение проигрываемого аудио при выборе другой звуковой дорожки, однако в случае с фоновой темой звук должен проигрываться постоянно, независимо от того, в какой части сайта находится пользователь.

Для определения звукового объекта в предыдущих звуковых разделах использовалась следующая команда.

mp3 = new Sound();

Если заменить эту строку на _root.mp3 = new Sound();, звуковой объект будет создан в корневой временной шкале и, следовательно, проигрываться постоянно, даже при покидании пользователем временной шкалы с текущим фильмом. Посмотрим, как это работает на практике.

_root.backing.stop(); 
marker._visible = false;
function progress(loadingTarget) { 
  progressBar._visible = true; 
  progressBar.setLoadTarget(loadingTarget); 
  this.onEnterFrame = function() {
    if ((progressBar.getPercentComplete() == 100)) {
      this.onEnterFrame = undefined;
      loadingTarget.start(0, 999);
      progressBar._visible = false;
      marker._visible = true;
      marker. onEnterFrame = function() {
        this._x = waveholder._x+(waveholder._width*
        К(_root.backing.position)/(_root.backing.duration));
      };
      _root.soundcontrol._visible = true; 
      _root. soundPlay = true;
    }
  }; 
}

function playBackingTrack(imageFile, audioFile) {
  _root.backing.stop();
  _root.backing = new Sound();
  loadMovie("images/"+imageFile, waveholder);
  _root.backing.loadSound("audio/"+audioFile, false);
  progress(_root.backing); 
}

darkTheme.onRelease = function() {
  playBackingTrack("bm_img1.jpg", "bm1.mp3");
};
lightTheme.onRelease = function() {
  playBackingTrack("bm_img2.jpg", "bm2.mp3");
};

marker._visible = true;
marker.onEnterFrame = function() {
  this._x = waveholder._x+(waveholder._width*
  К(_root.backing.position)/(_root.backing.duration));
};

Головка воспроизведения соотносится с шириной изображения звуковых волн так же, как _root.backing .position относится к _root.backing.duration. В представлении с помощью псевдокода это выглядит так.

playhead._x / waveformwidth = position / duration.

Для получения позиции головки воспроизведения playhead._x нам нужно умножить обе стороны этого уравнения на waveformwidth следующим образом.

playhead._x = waveformwidth * (position / duration)

Непосредственно в ActionScript использован код, указанный ниже. Обратите внимание, что мы добавили позицию _x фильма waveholder в начале уравнения.

this._x = waveholder._x+(waveholder._width*
К(_root.backing.position)/(_root.backing.duration));

function playBackingTrack(imageFile, audioFile) {
  _root.backing.stop();
  _root.backing = new Sound();
  loadMovie("images/"+imageFile, waveholder);
  _root.backing.loadSound("audio/"+audioFile, false);
  progress(_root.backing); 
}

darkTheme.onRelease = function() {
  playBackingTrack("bm_img1.jpg", "bm1.mp3");
};
lightTheme.onRelease - function() {
  playBackingTrack("bm_img2.jpg", "bm2.mp3");
};