Скрипт MP3 флеш плеера радио shoutcast icecast player AS3

Сегодня, в рамках изучения базовых понятий технологии Adobe Flash и языка ActionScript 3 (AS3), мы с Вами, напишем простой музыкальный плеер MP3 файлов.
Получившийся плеер можно будет использовать и для воспроизведения некоторых сетевых радио потоков, работающих на технологии Shoutcast и Icecast (для формата вещания audio/mpeg).

Для создания флеш приложения (в нашем случае – плеера), нам понадобится программа Abobe Flash Professional CS5 (или более поздние версии). Abobe Flash Professional – официальное и наиболее популярное средство разработки приложений на базе технологии Flash. Загрузить пробную версию Flash Professional можно на официальном сайте Adobe. Купить полноценную версию можно онлайн у наших партнеров.

  1. После запуска Flash Professional создаём пустой новый документ ActionScript 3.0 (быстрые клавиши для создания нового документа Ctrl+N):
  2. Открываем вкладку Библиотека. Здесь перечислены все используемые в приложении элементы, символы: кнопки, видео ролики, графика, растровые изображения, музыкальные файлы и так далее. Наша задача добавить (импортировать) в библиотеку иконки управления включения/выключения музыки (play/stop) и фон плеера.
    Чтобы импортировать в библиотеку изображения нужно открыть верхнее феню Файл, затем выбрать Импорт, затем Импортировать в библиотеку… Выберите нужные три графических файла (фон плеера, кнопка пуск и кнопка стоп). Если при попытки импортировать иконки, Вы не видите графических файлов, проверьте чтобы в выпадающем меню Тип файлов , было указано Все форматы изображения.

    Если импорт произведен корректно, во вкладке Библиотека , Вы увидите список растровых изображений и автоматически созданных символов Символ 1, Символ 2 и так далее. Символы можно удалить из библиотеки, в этом примере мы их использовать не будем. Главное для нас это png изображения. Процесс импорта можно упростить если, открыв вкладку библиотеки, просто перетащить три изображения в окно программы.
  3. Мышкой перетаскиваем из библиотеки изображение player256.png на Монтажный кадр 1. Стараемся разместить его аккуратно в левом верхнем углу Монтажного стола. Монтажный стол это собственно белый холст нашего будущего шедевра. Прежде чем двигаться дальше, отредактируем ширину и высоту Монтажного стола, а значит и самого плеера под размер фонового рисунка player256.png. Кликаем правой кнопкой мыши на белом, свободном пространстве Монтажного стола и выбираем в меню Свойства документа… Указываем размеры 256 на 256. Если фон сместился за пределы Монтажного стола, выделаем фон мышкой, заходим во вкладку Выровнять и выравниваем фон во верхнему краю и по левому краю.
  4. Создаём кнопки управления. Вначале перенесём иконку stop32.png в то место плеера , где Вы планируете клавиши управления. Перенеся иконку , Вы можете отрегулировать её положение на холсте стрелками клавиатуры вверх – вниз, вправо – влево. Самое время конвертировать иконку в клавишу стоп. Кликаем правой кнопкой мышки на иконке stop32.png и выбираем в меню пункт Преобразовать в символ… Указываем имя bt2. Тип Кнопка. Это ещё не всё. Переходим во вкладку Свойства и Назначаем имя экземпляру. Имя экземпляра должно отличаться. Укажем bt_stop.
    Теперь настало время кнопки play. Поверх новоиспеченной кнопки stop (или bt2) размешаем иконку play32.png из библиотеки. Повторяем те же действия: правый клик мышкой, пункт Преобразовать в символ… Название кнопки bt1. Тип Кнопка. Также без лишних проволочек, переходим во вкладку Свойства. Назначаем имя экземпляру bt_play.
  5. Подготовительный этап завершен и теперь мы переходим к основному. А именно к написанию собственно ActionScript’a посредством которого наш плеер превратится в полноценное приложение. Для начала перейдем на вкладку Временная шкала и кликнем по слою Слой 1 чтобы выделить Монтажный кадр. После этой активации слоя переходим во вкладку Действия. Если, по каким-то причинам, Вы не можете начать писать AS3 , выберите слева в древообразном меню Монтажный кадр 1:
    Всё в порядке? Пишем скрипт mp3 плеера:

bt_play.addEventListener(MouseEvent.CLICK, PlayStopSound);
/* При левом щелчке мыши на клавишу play, активируется функция fl_PlayStopSound. addEventListener отвечает за то, чтобы приложение следило за событиями, MouseEvent.CLICK говорит приложению, что событие, за которым оно следит, это левый щелчек мыши. */
bt_stop.addEventListener(MouseEvent.CLICK, PlayStopSound);
/* При левом щелчке мыши на клавишу stop, активируется функция fl_PlayStopSound. */
var SChannel:SoundChannel;
/* SoundChannel штатный класс AS3 , контролирующий звук внутри приложения. SChannel переменная к которой привязан класс. Тип переменной в ActionScript3 указывается через двоеточие. */
var PlayStart:Boolean = false;
/* PlayStart переменная, которая следит запущено воспроизведение файла или нет. По-умолчанию - нет, PlayStart ложно - false. */
/* ниже расположена сама функция PlayStopSound */
function PlayStopSound(evt:MouseEvent):void
{
/* void добавляют в тех случаях, когда функция не возвращает никакого значения, просто выполняет работу, а MouseEvent , как было сказано выше, указывает на клики мыши */
if(PlayStart===false)
{
/* если переменная, следящая за процессом воспроизведения, равна false начинаем воспроизведение */
bt_play.visible = false;
/* скрываем кнопку воспроизведения, кнопку play */
var s:Sound = new Sound(new URLRequest("http://weblomaster.ru/sound/track01.mp3"));
SChannel = s.play();
/* начинаем воспроизведения файла. Файл предварительно должен быть закачен на Ваш сервер. Вы точно должны знать URL адрес размещения файла или mp3-потока. */
/* на последнем этапе, меняем значение переменной PlayStart с false на true */
PlayStart = true;
}
else
{
/* в противном случае, останавливаем воспроизведение и делаем кнопку play видимой */
SChannel.stop();
bt_play.visible = true;
/* на последнем этапе, меняем значение переменной PlayStart с true снова на false */
PlayStart = false;
}
}

Вы можете скачать исходник .fla файл и сам плеер .swf одним архивом. Не забывайте посещать наш сайт , все обновления будут выкладываться здесь.

Опубликовано 10.10.2014 в 17:33 · Автор Вебдизайнеру, сисадмину, вебмастеру · Ссылка
Рубрики: ActionScript 3 (AS3), Flash · Теги: , , , , , , , ,