MP3-плеер во Flash




Главная > Уроки > Action script 3.0 > MP3-плеер во Flash

MP3-плеер во Flash

Автор/переводчик статьи: Команда сайта flashmaster.org.ua

Дата: 2014-01-03

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

Первый слой – это фон. Выбирать можно любой цвет, но для примера возьмем стандартный черный цвет, как при покупке одежды в Украине.

Второй слой – добавляем три графических объекта, которые будут отображать разные данных: название трека, время проигрывания трека и процент загрузки. Назовем их соответственно name_txt, time_txt и set_txt.

Третий слой – делаем пять основных кнопок: «Играть», «Стоп», «Пауза», «Предыдущий трек» и «Следующий трек» (Play_btn, Stop_btn, Pause_ btn, Stop_btn, Prev_btn, Next_btn).

На четвертом этапе регулируем звук. Сначала делаем семь полосок с промежутком между друг другом в один пиксель. Размеры линий должны быть от 2 на 2 до 2 на 14, то есть, мы получаем такую себе «лесенку». Теперь преобразуем ее в мувиклип. В нем же, копируем слой и рисуем еще один черный прямоугольник (20 на 14), который должен закрыть всю «лесенку». Этот слой делаем маской, а потом делаем еще один новый слой и проделываем тоже самое, но прямоугольник должен быть не черным, а прозрачным.

Здесь же делаем две кнопки: offVolume_btn и onVolume_btn.

Пятый слой – полоса прогресса. Ее нужно нарисовать длинною в 200. Сделав из нее мувиклип, заходим и из полоски делаем сново мувиклип, а потом создаем новый слой и делаем еще один мувиклип с полоски. Так делаем и третий слой, но его уже нужно сделать маской.

Теперь на главной сцене делаем еще один слой и здесь вводим код:

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();

Просмотров: 1329


Понравился материал? Поделись с друзьями!





Подписаться на рассылку.

При перепечатки материалов ссылка на наш сайт обязательна!


 1