Опубликован: 07.11.2006 | Уровень: специалист | Доступ: платный
Лекция 15:

Аудио

< Лекция 14 || Лекция 15: 1234 || Лекция 16 >

Загрузка 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 дает пользователю возможность выбрать загрузку высококачественной версии звуковой дорожки, даже если он использует низкоскоростное соединение (если длительность загрузки не имеет значения).


  1. Перед изучением кода, управляющего кнопками и загрузкой функций, вкратце рассмотрим другие элементы на рабочем месте. Здесь присутствуют двенадцать различных кнопок, каждая со своим собственным именем инстанса, предназначеных для вызова соответствующих MP3-файлов.
  2. Справа внизу находится компонент ProgressBar с именем инстанса progressBar. Он будет предоставлять пользователю информацию о процессе загрузки звукового файла или потока. Рядом находится динамическое текстовое поле, информирующее пользователя о текущем состоянии звуковых файлов. Это поле имеет имя переменной loadingText и отображает три различных возможных состояния: поток, загрузка и воспроизведение.
  3. Здесь предстоит рассмотреть довольно много кода, однако он не представляет особой сложности. Посмотрим на первый фрагмент кода настройки в кадре 2 слоя actions/labels фильма audio.
    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";
          } 
        }
      }; 
    }

    Первая функция вам знакома, она реализует индикатор загрузки, однако в ней присутствуют некоторые особенности. Как и ранее, она используется для отслеживания входящей loadingTarget, которая, в данном случае, является MP3-файлом, загружаемым в звуковой объект. Следующий фрагмент выполняется в каждом кадре, проверяя, полностью ли загружен loadingTarget, и вопсроизводится ли аудиодорожка. Разберем эту часть кода последовательно.

    this.onEnterFrame = undefined;

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

    loadingTarget.start ();

    Она просто устанавливает звуковой объект на воспроизведение (игнорируется, если звуковой файл воспроизводится в потоковом режиме).

    playing = true;
    progressBar._visible = fales;

    Эти строки изменяют состояние флажка playing и делают компонент ProgressBar невидимым. Файл загружен! Этот блок кода заканчивается так.

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

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

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

    Обе функции в первых строках создают новый звуковой объект. Следующая строка mp3.stop(); останавливает воспроизведение звука. Зачем останавливать воспроизведение, которое на самом деле еще не началось? Это делается потому, что пользователь мог сначала нажать на другую кнопку, в случае чего возможно начало воспроизведения звука в звуковом объекте mp3. Эта команда будет останавливать воспроизведение предыдущего звука перед началом загрузки нового MP3-файла в звуковой объект.

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

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

    С их помощью функция loadStream устанавливает потоковое воспроизведение (true), а функция downloadMp3 устанавливает этот параметр на значение false. Легко и просто. Следующие несколько строк устанавливают несколько переменных, относящихся к предыдущей функции, перед непосредственным вызовом функции progress. Код для кнопок будет просто вызывать одну из этих двух функций, и все необходимые действия будут осуществляться с помощью этой функции.

  5. Давайте рассмотрим процесс, который происходит во Flash при нажатии одной из кнопок.
    1. Пользователь нажимает кнопку.
    2. Вызывается функция loadStream или downloadMp3, после чего ей передается соответствующее имя MP3-файла.
    3. Инициализируется объект Sound.
    4. Объект Sound вызывает MP3-файл и настраивает потоковое воспроизведение соответствующим образом.
    5. Устанавливается динамический текст, а также другие переменные.
    6. Вызывается функция progress, после чего ей передается имя звукового объекта.
    7. Во время загрузки файла MP3 функционирует индикатор загрузки.
    8. После полной загрузки MP3-файла индикатор загрузки исчезает.

      Теперь мы разобрали этот процесс, и обеспечить его работу посредством написания кода для кнопок довольно просто.

  6. Ниже приведена оставшаяся часть кода в кадре 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");
    };
    Пример 14.1.

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


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


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


< Лекция 14 || Лекция 15: 1234 || Лекция 16 >
Игорь Хан
Игорь Хан

у меня аналогичная ситуация. Однако, если взять пример из приложения (ball_motion_04_click for trial.fla) то след остается. при этом заметил, что в моем проекте в поле "One item in library" виден кружок, в то время как в приложенном примере такого кружка нет.

Вопрос знатокам, что не так?

Александр Коргапольцев
Александр Коргапольцев

объект созданый мной упорно не желает оставлять след(единственное что добился, так это то что шарик резво гоняется за курсором) функция duplicateMovieClip остаётся не активной, т.е. следа от объекта не остаётся, но если я тоже самый код вбиваю в учебный файл всё работает, не могу понять где я ошибаюсь и почему в документе созданном заново, не работает код начиная от функции duplicateMovieClip? 

Тамара Ионова
Тамара Ионова
Россия, Нижний Новгород, НГПУ, 2009
Магомед Алисултанов
Магомед Алисултанов
Россия, Волгоград, лицей 2