Mp3-плеер на Flash'e

Автор: Nikitar
Сайт: Rusforumz.com

Последний месяц меня буквально завалили предложениями рассказать как сделать mp3-плеер на flash'e. Конечно, внимательные читатели заметили, что в 6-м выпуске журнала WebDix я уже рассказывал, как сделать такой плеер. Но там было непонятно и как-то сумбурно всё рассказано. Сейчас я расскажу подробно как всё это можно реализовать. Итак, делаем плеер на 1 mp3-файл (несложно будет сделать потом и на много файлов), который будет загружаться к нам в плеер.

1. Создайте новый документ в программе Macromedia Flash и задайте ему fps 25, а размеры произвольные.

2. То, что мы будем делать вы видите внизу страницы. Состоит вся эта конструкция из 3-х частей: кнопок, полоски загрузки, а потом индикатора состояния проигрывания композиции (то что на английском называется seeking bar) и какой-то текстовой информации (в данном случае, название песни и её продолжительность в секундах). Начнём с кнопок. На главной сцене создайте мувиклип (F8), в котором у нас будут располагаться кнопки. В instance name (имя экземпляра) впишите controls_mc. Войдите в мувиклип двойным кликом и создаёте в нём следующие кнопки.

Пауза - instance name pause_mc
Стоп - instance name stop_mc
Играть - instance name play_mc
Скачать mp3 - instance name down_mc
В общем всё, как на скриншоте, который вы видите ниже.

3. Возвращаемся на главную сцену и начинаем делать полоску, которая будет отображать где сейчас проигрывается композиция. На главной сцене нарисуйте линию, над кнопками, у меня она шириной 274 пикселя, у вас может быть какая угодно. Сделайте из неё мувиклип (F8) и в instance name назовите его ss. Войдите в него и прямоугольник опять сделайте мувиклипом, присвойте ему имя в instance name fon. Затем создайте 3 слоя выше этого и скопируйте туда данный прямоугольник-мувиклип. Итак, у нас 4 одинаковых слоя. Верхний слой сделайте маской и удалите имя из instance name, второй и третий поставьте под маску, 4-й слой будет вне маски. С помощью Color - Tint (выделите мувиклип и найдие внизу выпадающий список Color) сделайте мувиклипы, которые располагаются на втором и третьем слое разноцветными. Например, второй слой - красным, instance name red и третий слой - синим, istance name blue. Очень важное замечание. Мувиклипы на втором и третьем слое расположите так, чтобы их правый конец приходился на начало левого конца у первого и четвёртого слоёв. То есть их координаты должны составлять примерно -274 пикселя. Впоследствии, это сыграет очень важную роль.

4. Красная полоска у нас будет показывать на каком моменте проигрывания у нас композиция, а синяя предназначена для индикации загрузки. Теперь будем делать текстовые поля на главной сцене. Текстовых поля нужно 2. Первое большое располагаем над линией, там у нас будет название композиции. Делаем ему левое выравнивание и делаем поле динамическим. В поле var прописываем song_name. Второе поле маленькое и располагается в конце линии, правое выравнивание не помешает. Тоже динамическое и в поле var пишем sec.

5. Теперь думаю самое время писать код. В главной сцене создайте новый слой и вставьте в кадр следующий код. Буду по частям объяснять и писать код, чтобы было понятно, что к чему.

mysound=new Sound();
mysound.loadSound("central.mp3",false)
_root.down="central.mp3"
_root.song_name="Владимирский централ"
duration=28;
sec="00:"+duration

Кратко поясню код.

Первой строчкой мы создаём объект Sound. Это обязательно нужно для того, чтобы потом подгружать звук.

Вторая строчка собственно подгружает mp3-файл с помощью метода loadSound. Первый параметр - название mp3-файла, в моём случае - это central.mp3, второй параметр - воспроизводить звук только после загрузки его, или сделать возможным воспроизведение его во время загрузки. Я выбрал первый вариант.

3-я строчка - файл, который будет у нас загружаться, если мы нажмём Скачать mp3 на плеере.

4-я строка - название песни
5-я строка - время звучания композиции. Лучше на всякий случай прибавить 1 секунду, во избежании разных побочных эффектов.

6-я строка - собственно текст, который вы видите в правом текстовом поле. Внимание, если у вас композиция будет больше 1 минуты, то нужно будет поменять код этой строки.

6. Дополним дальше код на главной сцене в кадре.

this.onEnterFrame=function(){
	if(mysound.getBytesLoaded()==mysound.getBytesTotal()){
	ss.blue._x=-ss.blue._width
	pos=Math.ceil(mysound.position/1000)
	ss.red._x=-ss.red._width+ss.red._width/duration*pos
	if(pos==duration){
		ss.red._x=-ss.red._width;
		controls_mc.play_mc.enabled=true;
		_root.str=0;
	}
	}
	else{
		gbl=mysound.getBytesLoaded();
		gbt=mysound.getBytesTotal();
		ss.blue._x=-ss.blue._width+ss.blue._width/100*Math.ceil(gbl/gbt*100);
	}	
}

Итак, это у нас onEnterFrame. Это означает, что код, заключённый в эту функцию будет повторяться так часто, как будто бы он у нас был прописан в каждом кадре. То есть постоянно обновляемый код. Сначала мы проверяем загрузился ли ролик или нет. Если нет, то выполняются команды, которые заключены в условный оператор else - это синяя полоска. Когда у нас всё удачно загрузилось, обрабатываются команды, заключённые в оператор if. А именно, красная полоска двигается в зависимости от продолжительности звучания мелодии.

7. И, наконец, завершающая часть кода для главной сцены.

ss.fon.onRelease=function(){
	xx=this._xmouse;
	mysound.stop();
	starttime=Math.floor(xx/this._width*100)/100*duration
	mysound.start(starttime)
	_root.srt=starttime
}

Данный код показывает, что происходит при нажатии на фоновую полоску. При нажатии у нас композиция выполняет быструю перемотку вперёд или назад, в зависимости от того, на какое место на линии мы кликнули.

8. Теперь осталось повесить события на кнопки. Заходим в мувиклип с кнопками, создаём новый слой и в кадр вставляем следующий код:

_root.srt=0;
play_mc.onRelease=function(){
	_root.mysound.stop();
	_root.mysound.start(_root.srt);
	this.enabled=false;
}
pause_mc.onRelease=function(){
	srt=_root.mysound.position/1000;
	_root.mysound.stop();
	play_mc.enabled=true;
}
stop_mc.onRelease=function(){
	_root.srt=0;
	_root.mysound.stop();
	play_mc.enabled=true;
}
down_mc.onRelease=function(){
	getURL(_root.down,"_blank");
}

Собственно, тут объяснять особо нечего. Переменная _root.srt предназначена для хранения текущего положения проигрывания мелодии. Для того, чтобы при нажатии на паузу у нас сохранялся момент, на котором мы закончили прослушивание, а при нажатии обратно на "Играть" - у нас воспроизводилась мелодия с этого момента. Также код делает кнопку "Играть" неактивной, когда мелодия уже проигрывается.

9. Теперь наконец-то и долгожданно жмём Ctrl+Enter и получаем mp3-плеер на одну песню, если вы не получили того, что видите внизу этой страницы (рабочий пример с песней, и возможностью скачать :)), то попробуйте ещё раз. Если уж совсем никак, то скачайте исходник к данному уроку.

ВНИМАНИЕ: Вы можете скачать исходник к данному уроку и самостоятельно разобраться что, куда и сколько раз. Исходники всех уроков выложены в Школе Флэша, которая располагается на портале RusForumz.com. Условия доступа в Школу Флэша

СКАЧАТЬ ИСХОДНИК