Get Adobe Flash player
Главная » Flash Обучение » Flash Уроки Текстом » MP3-плеер c XML-плейлистом

Мы в твиттере

Как создать?

Подпишитесь сейчас и вы получите на email серию бесплатных видеоуроков по flash.

Ваш e-mail:

Ваше имя на русском:

Подписавшись, Вы получите 4 видео урока, которые научат вас создавать flash презентации, flash баннеры, flash кнопки буквально за несколько минут!

Курс по flash cs5

 

Adobe Flash CS4 и Actionscript 3.0. Полный курс видео уроков.

Внимание!

Вы можете изучить все секреты flash анимации всего за 3 недели! Перейти из разряда новичка в разряд опытного пользователя даже без посещения дорогих курсов и чтения толстенных талмудов.

110 видео уроков,

в превосходном качестве помогут пройти, Вам, терни flash анимации самым быстрым и легким путём!

+ActionScript 3.0

Подробнее!..

www.megastock.ru
Уведомление об ответственности

Текст перед: купим лист нержавеющий зеркальный :Текст после

MP3-плеер c XML-плейлистом

Aloran   24 апреля 2009    Раздел сайта: Flash Обучение » Flash Уроки Текстом

Добрый день.

Сегодня я расскажу, как сделать простенький MP3-плеер.

У нас должно получится нечто эдакое http://eso.nm.ru/Player.html

alt

Ну приступим...

Создаем новый файл АС3. И начинаем создавать графические элементы нашего плеера (я не буду тут указывать как это все делается вы должны это уже уметь, если не умеете, то это урок пока не для вас). Каждый  пункт это отдельный слой:

1) фоновое изображение ( у меня черный прямоугольник)

2) 3 динамических текстовых поля:

      а) set_txt - для отображения % загрузки

      б) time_txt - для отображения времени проигрывания трека

      в) name_txt - для отображения названия трека

3) кнопки (как делать кнопки я уже писал тут:

      а) Prev_btn - предыдущий трек

      б) Play_btn - играть трек

      в) Pause_ btn - пауза ( эта кнопка должна находится над или под предыдущей кнопкой)

      г) Stop_btn - Стоп

      д) Next_btn - следующий трек

4) регулеровка звука

      а) создаем 7 полосок размерами от 2х2 до 2х14 с растоянием между друг другом в 1 пиксель. должна получится "лесенка". Выделяем всю лесенку и делаем из нее Мувиклип volume_mc. Заходим в нутрь мувиклипа. Создаем новый слой идентичный нашей "лесенке" (проще скопировать кадр). Верхняя лесенка должна находится над  ничжней в тех же координатах. У меня нижняя серого цвета, а верхняя белого. Делаем новый слой. На нем рисуем прямоугольник 20х14. Он должен закрыть полностью наши лесенки. Превращаем его в Мувиклип volumefill_mc. Делаем этот слой маской (правая клавиша по названию слоя --> Mask). Делаем новый слой. Нам нужен снова прямоугольник 20х14, но он должен быть прозрачным (это будет зона срабатывания мыши). Выходим на основную сцену.

      б) делаем 2 кнопки offVolume_btn и onVolume_btn распологаем одну над другой.

5) рисуем полосу прогресса (у меня она длиной 200 это важно для кода). Превращаем ее в мувиклип progress_mc. Заходим в него. Выбираем полоску и превращаем ее в мувиклип status_mc (внутрь заходить не надо). Делаем новый слой. рисуем такуюже полоску и превращаем ее в мувиклип progressfill_mc. Делаем 3-й слой. и снова такую же полоску. Слой делаем маской. Возвращаемся на основную сцену.

* Все элементы делайте по своему вкусу. Главное помните что все имена элементов надо прописать в инстанс нейм иначе код не будет работать.

6) Делаем слой для скрипта и в первый кадр вводим:

var playlist:XML = new XML();                     //создаем объект для работы с нашим плэйлистом XML ...
var loader:URLLoader = new URLLoader();         //этим будем загружать наш XML
 
var setPosition:int = 0;                         //здесь будем хранить позицию воспроизведения при нажатии паузы и т.п.
var soundObj:Sound = new Sound();                 //наш основной объект для работы
var soundCha:SoundChannel = new SoundChannel(); //позволит управлять каналом воспроизведения
var soundTrans:SoundTransform = new SoundTransform(); //для звука и получания данных для аналийзера
var reqUrl:URLRequest = new URLRequest();         //для загрузки mp3 в объект Sound
this.progress_mc.status_mc.width = 0;             //устанавливаем показатель уровня загрузки в 0
this.progress_mc.progressfill_mc.x = -200;         //и показатель воспроизведения в позицию -200 что будет видется тоже как 0
var loaded:Number = 0;                             //для правильного просчитывания отображения места воспроизведения
var soundBytes:ByteArray = new ByteArray();     //для хранения данных о звуке
var arrayUrl:Array = new Array();                  //массив для адресов mp3
var array:Array = new Array();                  //для хранения преобразованных данных о звуке
var volumeP:Number = 1;                         //для хранения уровня громкости звука
var volumeS:Number = 1;                         //тоже
var track:int = 0;                                 //номер текущего трэка для воспроизведения
var offmark:Boolean = false;                     //для кнопки MUTE
 
 
//события и слушатели. основа
function initPlayMp3():void {
    Play_btn.addEventListener(MouseEvent.CLICK, startPlay);             //присвоим реакцию на клик мышки нашим элементам интерфейса
    Pause_btn.addEventListener(MouseEvent.CLICK, stopPlay);
    volume_mc.addEventListener(MouseEvent.CLICK, volumePlay);
    progress_mc.addEventListener(MouseEvent.CLICK, progressPlay);
    offVolume_btn.addEventListener(MouseEvent.CLICK, offvolumePlay);
    onVolume_btn.addEventListener(MouseEvent.CLICK, onvolumePlay);
    Next_btn.addEventListener(MouseEvent.CLICK, nextTrack);
    Prev_btn.addEventListener(MouseEvent.CLICK, prevTrack);
    Stop_btn.addEventListener(MouseEvent.CLICK, fullStop);
 
    loader.addEventListener(Event.COMPLETE, whenLoaded);         //событие вызовется когда XML фал будет загружен
    loader.load(new URLRequest("playlist.xml"));                 //а это адрес того что будем загружать
 
    volume_mc.buttonMode = true;                                //определим свойсто для нужных нам клипов что бы при наведении на них курсор менялся на руку
    progress_mc.buttonMode = true;
 
    offVolume_btn.visible = false;                                //скроем кнопки которые не нужны
    Pause_btn.visible = false;
}
 
//загрузка xml
function whenLoaded(event:Event):void {            //если загрузка XML прошла успешно то в наш массив с адресами запишем все ее содержимое
    playlist = XML(event.target.data);
    for(var i:int = 0; i< playlist.url.length(); i++) {
         arrayUrl[i] = playlist.url[i].text();
    }
    name_txt.text = "0" + "/" +arrayUrl.length + " Исполнитель - Название Песни";    //и обновим тектовое поле добавив туда информацию о колличестве трэков
}
 
//Прогресс загрузки
function LoadProgress(event:ProgressEvent):void{
    var loadedsound:Number;
    loadedsound = Math.round(100 * (event.bytesLoaded / event.bytesTotal));     // просчитываем уровень загрузки
    set_txt.text = "Загруженo: " + loadedsound + "%";                             // обновляем значение в тектовом поле
    progress_mc.status_mc.width = loadedsound*2;                                 // и  увеличиваем полоску загрузки в прогресс баре
}
 
//Следующий трек
function nextTrack(event:MouseEvent):void{             //Запускается когда нажата кнопка СЛЕДУЮЩИЙ ТРЕК
    Play_btn.visible = false;                         // определяем какие кнопки управления должны быть видимыми а какие нет
    Pause_btn.visible = true;
    if((track+1)<arrayUrl.length){                     // определяем на какой трек нам переключаться
         track++;
    } else {
         track = 0;
    }
    try {                                             // пытаемся выполнить стоп и закрытие канала, если канал уже закрыт (загрузка закончилась) то оное вызовет ошибку и выполнение перейдет к catch
         soundCha.stop();
         soundObj.close();
    } catch(e:Error){
         soundCha.stop();                             // просто остановим
    }
    PlaySound();                                    // и запустим воспроизведение нового трека
}
 
//Предыдущий трек
function prevTrack(event:MouseEvent):void{             //Запускается когда нажата кнопка Предыдущий ТРЕК
    Play_btn.visible = false;                         // определяем какие кнопки управления должны быть видимыми а какие нет
    Pause_btn.visible = true;
    if((track-1)>=0){                     // определяем на какой трек нам переключаться
         track--;
    } else {
         track = arrayUrl.length-1;
    }
    try {                                             // пытаемся выполнить стоп и закрытие канала, если канал уже закрыт (загрузка закончилась) то оное вызовет ошибку и выполнение перейдет к catch
         soundCha.stop();
         soundObj.close();
    } catch(e:Error){
         soundCha.stop();                             // просто остановим
    }
    PlaySound();                                    // и запустим воспроизведение нового трека
}
 
function fullTrack(event:Event):void{ // определяет новый трэк и переходит к нему
    Play_btn.visible = false;                         // определяем какие кнопки управления должны быть видимыми а какие нет
    Pause_btn.visible = true;
    if((track+1)<arrayUrl.length){
        track++;
    } else {
        track = 0;
    }
    soundCha.stop();
    PlaySound();
}
 
// полный стоп
function fullStop(event:MouseEvent):void{// останавливает воспроизведение и если звук открыт закрывает загрузку
    setPosition = 0;//позицию воспроизведения в ноль
    try {
        soundCha.stop();
        soundCha = soundObj.play(0);
        soundCha.stop();
        soundObj.close();
    } catch(e:Error){
        soundCha.stop();
        soundCha = soundObj.play(0);
        soundCha.stop();
    }
    Play_btn.visible = true;           
    Pause_btn.visible = false;
}
 
//чтение тэгов
function id3Handler(event:Event):void {
    name_txt.text=(track+1)+"/"+arrayUrl.length+"  "+soundObj.id3.artist + " - " + soundObj.id3.songName;
}
 
//кнопка ПУСК
function startPlay(event:MouseEvent):void{
    Play_btn.visible = false;           
    Pause_btn.visible = true;
    PlaySound(); // запускаем основную функцию воспроизведения звука
}
 
//Кнопка ПАУЗА
function stopPlay(event:MouseEvent):void{
    setPosition = soundCha.position; // запоминаем позицию воспроизведения
    volumeS = soundTrans.volume; // и уровень звука
    Play_btn.visible = true;
    Pause_btn.visible = false;
    soundCha.stop(); // останавливаем воспроизведение
}
 
//определение нового места проигрывания
function progressPlay(event:MouseEvent):void{// вызывается когда кликнули на полосе отображающей загрузку и воспроизведение
    volumeS = soundTrans.volume;
    soundCha.stop();
    soundCha = soundObj.play((soundObj.length*loaded) * event.currentTarget.mouseX/200); // определяем координату куда ткнули // и взависимости от этого помещаем точку воспроизведения в нужное нам место
    soundTrans.volume = volumeS;
    soundCha.soundTransform = soundTrans;
    soundCha.addEventListener(Event.SOUND_COMPLETE, fullTrack); // востанавливаем событие реагирующее на конец трэка
    Play_btn.visible = false;           
    Pause_btn.visible = true;
}
 
//установка уровня звука
function volumePlay(event:MouseEvent):void{
    offmark = false;
    volume_mc.volumefill_mc.width = event.currentTarget.mouseX; // определяем куда ткнули и изменяем размер маски
    soundTrans.volume = (event.currentTarget.mouseX*5)/100; // устанавливаем громкость звука
    volumeP = volumeS = soundTrans.volume;
    soundCha.soundTransform = soundTrans;
    offVolume_btn.visible = false;
    onVolume_btn.visible = true;
}
 
//включение звука
function offvolumePlay(event:MouseEvent):void{
    offmark = false;
    offVolume_btn.visible = false;
    onVolume_btn.visible = true;
    volume_mc.volumefill_mc.width = (volumeP*100)/5;
    soundTrans.volume = volumeP;
    soundCha.soundTransform = soundTrans;
}
 
//Выключение звука
function onvolumePlay(event:MouseEvent):void{
    offmark = true;
    volumeP = soundTrans.volume;
    offVolume_btn.visible = true;
    onVolume_btn.visible = false;
    volume_mc.volumefill_mc.width = 0;
    soundTrans.volume = 0;
    soundCha.soundTransform = soundTrans;
}
 
//основная ПУСК функция
function PlaySound():void{ // основная функция которая воспроизводит звук
    reqUrl.url = arrayUrl[track]; // получаем адрес трека
    var nextTitle:Sound = new Sound(reqUrl);// т.к. в один объект два звука не загрузить то мы создаем промежуточный объект загружаем в него а потом просто приравниваем основной к нему загружаем его
    soundObj = nextTitle;
 
    name_txt.text = (track+1)+"/"+arrayUrl.length+" Не удалось прочитать ID3 тэги"; // делаем стандартную строку (она станется если функция чтения тэгов ее не обновит)
    soundObj.addEventListener(ProgressEvent.PROGRESS, LoadProgress); // создаем слушатель прогреса загрузки
    soundObj.addEventListener(Event.ID3, id3Handler); // и получения тэгов
    addEventListener(Event.ENTER_FRAME, Progress); // и ENTER_FRAME для програсса воспроизведения
 
    soundCha = soundObj.play(setPosition); // запускаем звук в нужном нам канале с определенной позиции
 
    soundTrans.volume = volumeS; // устанавливаем кромкость
    soundCha.soundTransform = soundTrans; // и присваиваем ее каналу нужному
    soundCha.addEventListener(Event.SOUND_COMPLETE, fullTrack); // запустит функцию меняющую трэк при достижении конца трэка текущего
 
    if(offmark){// обработка уровня громкости если включено MUTE
        soundTrans.volume = 0;
        soundCha.soundTransform = soundTrans;
    } else {
     soundTrans.volume = volumeS;
     soundCha.soundTransform = soundTrans;
    }
}
 
//отображение прогреса воспроизведения
function Progress(event:Event):void {
    loaded = soundObj.bytesTotal/soundObj.bytesLoaded;// просчитываем какую часть мы загрузили это нужно для поправики в отображения прогресса
    progress_mc.progressfill_mc.x = Math.round(200*(soundCha.position/(soundObj.length*loaded)))-200;// двигаем полосу прокресса
    var allsec:int = Math.floor(soundCha.position/1000);// и считаем секунды воспроизведения
    var min:int = Math.floor(allsec/60);//
    var sec:int = allsec-(Math.floor(allsec/60)*60);//
    if(sec<10){
         time_txt.text = String(min)+".0"+String(sec);//формируем текстовую строку с итогами посдчетов
    } else {
         time_txt.text = String(min)+"."+String(sec);//формируем текстовую строку с итогами посдчетов
    }
}
 
initPlayMp3();

7) создаем XML-файл playlist.xml у меня только 2 композиции, но вы можете сделать и больше.

<?xml version="1.0" encoding="utf-8"?>
<playlist>
        <url>0.mp3</url>
        <url>1.mp3</url>
</playlist>

На этом все. Спасибо за внимание. Удачи
По материалам: http://demiart.ru/forum/index.php?showtopic=82565

Просмотров: 46680 | Комментарии (76) | flash уроки, mp3 player, actionscript 3.0
#61   Fly      25 сентября 2010 13:45   ICQ: --   



Регистрация: 21.07.2008
Публикаций: 65
Комментариев: 592
Со всеми вопросами на форум


--------------------
1) Админ всегда прав
2) Если админ не прав, смотри пункт 1

Мы в контакте - http://vkontakte.ru/club9573247
Не отвечаю на вопросы в личку касаемо Flash, у нас для этого есть форум
#62   Veamont      25 сентября 2010 13:59   ICQ: --   



Регистрация: 24.09.2010
Публикаций: 0
Комментариев: 3
Этот плеер с глюком там доделывать надо....
#63   Veamont      14 октября 2010 14:14   ICQ: --   



Регистрация: 24.09.2010
Публикаций: 0
Комментариев: 3
Подскажите, как сделать так, чтобы по окончании трека плеер АВТОМАТИЧЕСКИ переключался на СЛУЧАЙНУЮ песню из базы данных.

Плиз помогите... Оч надо.
#64   Wassily      22 ноября 2010 01:46   ICQ: --   



Регистрация: 22.11.2010
Публикаций: 0
Комментариев: 1
Добрый день! Спасибо, классный урок. Только у меня возникла проблема с чтением русских тегов id3. Вместо кириллицы - кракозябры. Как это можно исправить?
#65   DZHETIGAPA      6 февраля 2011 23:27   ICQ: 322191037   



Регистрация: 22.12.2010
Публикаций: 0
Комментариев: 2
Хороший урок:) можно тут добавить много чего своего...
#66   billabong      11 февраля 2011 22:50   ICQ: 444602777   



Регистрация: 10.02.2011
Публикаций: 0
Комментариев: 2
Пришлите мне нам мыло пример плз
max.gerasymenko@mail.ru
#67   Лёха      9 апреля 2011 21:13   ICQ: --   



Регистрация: 13.02.2011
Публикаций: 1
Комментариев: 9
прикольный урок. Будем узучать код mosking


--------------------
Don't trouble troubles until troubles trouble you.
#68   Лёха      10 апреля 2011 18:37   ICQ: --   



Регистрация: 13.02.2011
Публикаций: 1
Комментариев: 9
у меня вопрос.Кто-нибудь знает как осуществить автоматическое добавление треков в список воспроиведения?


--------------------
Don't trouble troubles until troubles trouble you.
#69   dmi5720      10 апреля 2011 22:30   ICQ: --   



Регистрация: 3.04.2011
Публикаций: 0
Комментариев: 4
все-таки нужен урок,тем более для меня то есть чайника helper
#70   romi4      14 апреля 2011 19:04   ICQ: 593659025   



Регистрация: 14.04.2011
Публикаций: 0
Комментариев: 1

Добрый вечер, спасибо за урок, вроде основное зароботало..но...полоса прогресса срабатываеть см на 7 левее.Знаком с флэш 2 дня.

и песня начинаеться с -1...)) 

#71   freeneutron      9 мая 2011 18:15   ICQ: --   



Регистрация: 9.05.2011
Публикаций: 0
Комментариев: 2
Спасибо, замечательный пример. Я скачал уже откомпилированные файлы с источника. Подставил вместо mp3-файла адрес радио-потока, получил интернет радио. Все замечательно, только в радио-потоке информация об исполнителе передается не через ID3, а как мне удалось выяснить из инглиш-форумов, через icy-metaint заголовки. На сколько я понял, эти заголовки вклиниваются в поток через некоторый интервал времени. И для того, что бы извлечь имя текущей композиции, надо сканировать бинарный код потока на наличие заголовка icy-metaint: хххх, где хххх - число байт, которое надо отсчитать от конца блока заголовка, чтобы получить байт содержащий длину х имени композиции, следующие х байт и будут именем композиции. Имя композиции хранится в формате: StreamTitle='Armin Van Buuren - A State Of Trance 355';. Я задался целью научить предлагаемый здесь плеер извлекать значение переменной StreamTitle. Правда с ActionScript я знаком очень поверхностно, потому прошу не судить за наивность дальнейших рассуждений: 1. Из документации о as3 следует, что метод extract() объекта Sound, позволяет читать байтовые строки из потока, значит extract() как-то (пока не знаю как) можно приспособить для извлечения icy-metaint и StreamTitle. Это способ получения StreamTitle номер раз. 2. Исследовав простым поиском исходники проекта thundersnow.thebitstream.com, обнаружил там свойство StreamTitle, которое используется как свойство встроенных объектов as3, то есть на подобие Event.ID3. Я не нашел объявления этого свойства, потому так решил. Хотя с другой стороны я не нашел StreamTitle на сайте help.adobe.com, что поставило меня в тупик. Если бы какой-то из объектов as3 действительно мог бы вытаскивать StreamTitle из потока, то не пришлось бы заморачиваться с Sound::extract(). Ну в общем, кто силен в as3, помогите мне, пожалуйста, разобраться с этой проблемой. Кстати говоря, это было бы довольно полезной фичей в этом мини проекте.
#72   Fly      11 мая 2011 10:31   ICQ: --   



Регистрация: 21.07.2008
Публикаций: 65
Комментариев: 592
Обратитесь на форум, тут редко кто бывает


--------------------
1) Админ всегда прав
2) Если админ не прав, смотри пункт 1

Мы в контакте - http://vkontakte.ru/club9573247
Не отвечаю на вопросы в личку касаемо Flash, у нас для этого есть форум
#73   freeneutron      13 мая 2011 08:33   ICQ: --   



Регистрация: 9.05.2011
Публикаций: 0
Комментариев: 2
Пришлось самому во всем разобраться. Используемый в этом примере объект Sound может качать файл или радиопоток с любого домена, но не дает проанализировать бинарный код. Метод Sound::extract() выдает только массив звуковых отсчетов. Фраймворк, о котором я говорил (thundersnow.thebitstream.com) качает файлы через сокеты, соответственно может вытаскивать из них любую информацию. Но сокет-подключение во флеше ограничено файлами политики (crossdomain.xml) на стороне сервера, и если файла политики нет (а у радиосерверов их нет), то и подключения не будет. В общем затея, получить данные из радио потока, оказалась не очень хорошей.
#74   djemna      13 июня 2011 19:40   ICQ: --   



Регистрация: 9.06.2011
Публикаций: 0
Комментариев: 6
Да видеоурок было бы не плохо))

Я вот просмотрел весь видеокурс. Но поял, что в нем всего 1% из 100% было показанно) Я про скрипт)

Еще надо учится и учится))
#75   Sluchayno      19 сентября 2011 23:31   ICQ: --   



Регистрация: 19.09.2011
Публикаций: 0
Комментариев: 1
Здраствуйте. Статья просто супер. Но возник один вопрос. Как этот скрипт приучить поонимать русские теги? (Исполнитель, название песни). И если в названии песни или исполнителя присутствует пробел, то оно просто обрубается (( Это можно как то исправить? 
#76   Fly      20 сентября 2011 01:47   ICQ: --   



Регистрация: 21.07.2008
Публикаций: 65
Комментариев: 592
XML сохранять в кириллице и в поля во flash встроить новые шрифты кириллические


--------------------
1) Админ всегда прав
2) Если админ не прав, смотри пункт 1

Мы в контакте - http://vkontakte.ru/club9573247
Не отвечаю на вопросы в личку касаемо Flash, у нас для этого есть форум

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии в данной новости.