Перед вами урок по созданию flash mp3 плеера с плейлистом (xml), который можно поставить себе на сайт. Урок будет полезен начинающим программировать на actionscript 2, так как мы будем учиться разбирать xml формат данных и работать с классом Sound.Скорее всего, вы уже много раз встречали на сайтах подобные mp3 плееры, позволяющие прослушать песню прямо на сайте, не скачивая её к себе на компьютер (так называемой, потоковое воспроизведение). Сейчас мы с вами сделаем сами такой флеш mp3 плеер (flash actionscript 2), который вы сможете установить на свой сайт. Если вдруг у вас что-то не получится, вы можете бесплатно скачать исходник flash mp3 плеера, который я сделал для примера. Наш плеер будет брать плейлист из внешнего .xml файла, то есть количество треков не является фиксированным и ничем не ограничено.В нашей флешке – mp3 плеере будет всего два кадра: первый – пустой, второй – сам плеер. Пока не загрузится xml файл с плейлистом, флешку будет стоять на первом кадре. В первый кадр пишем код:// для того, чтобы флешка не масштабировалась при изменении размеровStage.scaleMode = 'noScale';// для того, чтобы флешка могла работать с кириллическими символамиSystem.useCodepage = false;// останавливаем флешку на первом кадре,// и ждём пока загрузится xml // после загрузки переводим нашу флешку на второй кадр,// с нашим mp3 плееромstop();playlist = new XML();playlist.ignoreWhite = true;playlist.onLoad = function() { _root.gotoAndStop(2);}playlist.load("playlist.xml");Теперь переходим на второй кадр и начинаем делать все функциональные элементы плеера: кнопки и список воспроизведения. Плеер, который я сделал для примера, не отличается шикарным дизайном, ещё раз повторюсь, это только пример Названия (instance name) мувиклипов:play_but – кнопка play;pause_but – кнопка pause. Она находится точно под кнопкой play.stop_but – кнопка stop;scroll – клип со скроллером (полосой прокрутки) для списка воспроизведения (плейлиста). В нём находится горизонтальная линия, а также сам бегунок, его instance name – bar;Клип – список воспроизведения называется pl. В нём находятся рамка, пустой клип-контейнер (container), маска для него (m), такого же размера, как и рамка;vol – регулятор громкости. Внутри него – горизонтальная линия-подложка и линия другого цвета (bar), которая будет показывать уровень громкости;position – отображение прогресса загрузки и воспроизведения. На самом нижнем слое находится подложка, выше – линия другого цвета (mp3_load), отображающая загрузку mp3 трека, ещё выше – линия, показывающая позицию воспроизведения (bar).В самом верху есть динамическое текстовое поле (var = song), которое показывает название играющей песни.Также необходимо сделать клип – элемент плейлиста. В моём примере он устроен так: в самом низу находится клип fon (как бы картинка – подложка), в нём есть три кадра, которые будут сменяться при наведении мыши и выборе песни (первый кадр – неактивное состояние, второй – при наведении мыши, третий – если играет эта песня), в первом кадре этого клипа висит stop();Над клипом fon находятся два текстовых поля, для отображения названия песни и длительности (var label и time). Клипу – элементу плейлиста нужно дать идентификатор экспорта item. В его первом (и единственном) кадре находится код:// делаем обработчики кликов на xml плейлист (выбор песни)// а также смену фона при наведении/уходе курсора с элемента списка воспроизведения// При наведении на пункт:fon.onRollOver = function () { if (_root.isPlaying != i) { // если сейчас играет не эта песня, fon.gotoAndStop(2); // то переводим мувилип fon на второй кадр }}// При уведении курсора и при отпускании кнопки мыши вне пункта спискаfon.onRollOut = fon.onReleaseOutside = function () { if (_root.isPlaying != i) {// если сейчас играет не эта песня, fon.gotoAndStop(1);// то переводим мувилип fon обратно на первый кадр }}fon.onRelease = function() {// playSong – функция, при вызове которой будет проигрываться песня номер i _root.playSong(i);}Для того, чтобы проверять наш плеер, создадим xml плейлист (playlist.xml) в одной папке с нашим mp3 плеером. Его содержание должно быть примерно таким:<data><item url="1.mp3" label="Stigmata – Цена твоей жизни" time ="3:31" /><item url="2.mp3" label="Mushroomhead - These Filthy Hands" time ="5:23" /><item url="3.mp3" label="###### - Мёртвые тела" time ="4:13" /><item url="4.mp3" label="Bullet For My Valentine - Waking the demon" time ="4:14" /><item url="5.mp3" label="Slipknot - Psychosocial " time ="4:43" /></data>Атрибут url хранит ссылку на mp3 файл, label – название трека, time – время (продолжительность) песни.Переходим на временную диаграмму, во второй кадр вставляем код (комментарии по ходу):// инициализацияyy = 5; // размещать элементы плейлиста будем от 5dif = 3; // расстояние по высоте между элементами в спискеurl = []; // массив для хранения ссылок на песни// перебираем все элементы xml файла плей-листа нашего mp3 плеераfor (i=0; i<playlist.firstChild.childNodes.length; i++) { mc = _root.pl.container.attachMovie('item', 'item'+i, i); // в список воспрозведения из библиотеки добавляем мувиклип item mc._x = 5; // немного сдвигаем его по оси _x mc._y = yy; // назначаем новую координату по _y yy += mc._height+dif; // считаем координаты для следующего элемента плей-листа dataHolder = playlist.firstChild.childNodes[i];// в каждый элемет плейлиста (списка) пишем несколько переменных: mc.label = dataHolder.attributes.label; // название песни mc.time = dataHolder.attributes.time; // время звучания песни mc.i = i; // в каждый пункт списка пишем его номер mc.playing = false; // значит, что текущая песня не является выбраной в данный момент url[i] = dataHolder.attributes.url; // заносим ссылку на mp3 файл в массив}///////////////////////////// для того, чтобы текст в динамических полях отображался, маску нужно применять программно.pl.container.setMask(pl.m);// что мы и делаем =)// если список умещается в контейнер, то полоса прокрутки (скроллер) нам не нужен.if (pl.container._height < pl.m._height) { // проверяем scroll._visible = false; // если это так, скрываем скроллер}// если скроллер нам всё-таки нужен// при нажатии на ползунокscroll.bar.onPress = function() {// начинаем его перетаскивать от самого верху (0) до низа-выоста ползунка scroll.bar.startDrag(false, 4, 0, 4, scroll._height-scroll.bar._height); scroll.onMouseMove = function () { // при движении курсора // двигаем контейнер со списком воспроизведения на нужное расстояние pl.container._y = 0-((pl.container._height-pl.m._height+10) * scroll.bar._y / (scroll._height-scroll.bar._height)); }}// когда пользователь отпускает кнопку мыши, нужно остановить движение ползункаscroll.bar.onRelease = scroll.bar.onReleaseOutside = function() { scroll.bar.stopDrag();}////////////////isPlaying = null; // изначально при заходе на страницу песня у нас не играет//////////////////////// функция playSong принимает номер песни, которую нужно играть как параметр//////////////////////////function playSong(mp3) { sound = new Sound(); // создаём новый обьект класса Sound sound.loadSound(url[mp3], true); // вызываем метод loadSound // первый параметр - ссылка, откуда нужно грузить mp3 трек (берётся из массива url)), // второй параметр означает, что можно проигрывать звук, не дожидаясь его полной загрузки // (потоковое воспроизведение) // нужно "выделить" пункт, который сейчас играет pl.container['item'+mp3].fon.gotoAndStop(3); // также нужно перевести в неактивное состяние пункт списка, который играл до этого pl.container['item'+isPlaying].fon.gotoAndStop(1); // isPlaying - номер песни, котора сейчас играет, переопределяем её isPlaying = mp3; // song - навзвание mp3 трека вверху song = pl.container['item'+isPlaying].label; // скрываем кнопку play, показываем кнопки pause и stop play_but._visible = false; pause_but._visible = true; stop_but._visible = true; // ставим шириниу индикатора загрузки mp3 равной 0position.mp3_load._width = 0;// точно то же для индикатора позиции mp3 файлаposition.bar._width = 0; }// регулировка громкостиvol.onRelease = function() { vol.bar._width = vol._xmouse; sound.setVolume(vol._xmouse/vol._width * 100);}// изначально пользователь не видит кнопок play, pause и stopplay_but._visible = false;pause_but._visible = false;stop_but._visible = false;// ставим шириниу индикатора загрузки mp3 равной 0position.mp3_load._width = 0;// точно то же для индикатора позиции mp3 файлаposition.bar._width = 0;// остановка воспроизведения (кнопка stop)stop_but.onRelease = function() {sound.stop(); // останавливаем воспроизведение// скрываем кнопки play, pause и stopplay_but._visible = false;pause_but._visible = false;stop_but._visible = false;// текущую песню (в плейлисте) переводим в "неактивное" положение (первый кадр)pl.container['item'+isPlaying].fon.gotoAndStop(1);isPlaying = null; // отмечаем, что сейчас не играет не одна песня// ставим шириниу индикатора загрузки mp3 равной 0position.mp3_load._width = 0;
Создание flash mp3 плеера с плей-листом (xml)
Загрузка. Пожалуйста, подождите...
Создание flash mp3 плеера с плей-листом (xml) » Мир технологии flash. Флеш игры, исходники, примеры, статьи, уроки, советы.
Комментариев нет:
Отправить комментарий