MP3-плеер c XML-плейлистом
24 апреля 2009 Добрый день.
Сегодня я расскажу, как сделать простенький MP3-плеер.
У нас должно получится нечто эдакое https://eso.nm.ru/Player.html
Ну приступим...
Создаем новый файл АС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>
На этом все. Спасибо за внимание. Удачи
По материалам: https://demiart.ru/forum/index.php?showtopic=82565
Регистрация: 14.09.2009
Публикаций: 20
Комментариев: 151
"Если хотите урок, я сделаю, пишите...".
"Да, да, конечно делай!"
"Сделал"
"Будет очень хорошо с видео уроком и конечно с вашим комментарием!!!"
....
"Сделал..."
"Будет вообще офигенно, если вы еще составите пару-тройку схем и шпаргалок для лучшего запоминания"...
И так будет вечно, и ни одного спасибо от людей, которые такое пишут..
--------------------
Написал программу? Проверь на ошибки. Исправил ошибки? Проверь еще раз. Нет ошибок? Ты плохой программист!
https://prograph.ru/ - видео уроки по программированию в разных средах, а также справочники, программы и новости.
https://vkapi.easyflash.org/ - Как научиться создавать свои собственные flash-приложения, использующие ВКонтакте API и взаимодействие с веб-сервером?