Мини плеер для flash-сайта… - Форум для web мастеров

redWolf · 13.04.2008, 23:06

Вот вам ещё один урок от меня...

Я думаю для флеш сайта надо компактный плеер. Я смастерил максимально малый плеер, который можно поместить в любое место на сайте. Плеер берёт список проигрываемой музыки с XML файла…

Для начала поработает с клипами.

1) Создадим клип (F8) и назовём его [butLoad], в нём создадим текстовое динамическое поле [numbMusic]. Клип, НЕ КНОПКУ…

2) Создайте динамическое поле [percentInfo], не больших размеров, в него будет, заносится процент загрузки…

3) Потрудитесь создать ещё один клип [setVol], создайте 4 кадра (выделите ещё 3 кадра и нажмите F6). Добавьте ещё один слой (Insert>Timeline>Layer), поместите его выше предыдущего. Выделите первый кадр этого слоя, откройте панель скрипта (F9), и пишите:

Код:

_root.sound.setVolume(100);

во втором кадре:

Код:

_root.sound.setVolume(50);

в третьем:

Код:

_root.sound.setVolume(10);

и в последнем:

Код:

_root.sound.setVolume(0);

Это уровень звучания музыки, в оставшемся слое по кадрам нарисуйте это графически. В первом звук во всё, во втором на половину, в третьем на 10 процентов и в последнем звука нет…

Выйдете из клипа на главную шкалу (root), откройте панель скрипта. Теперь будем работать со скриптом.

Сначала загрузим список проигрываемой музыки, она записывается в XML файле таким образом:

Код:

<music>
	<sound url = "Duowsday.mp3"/>
	<sound url = "24s.mp3"/>
	<sound url = "BodyRock.mp3"/>
</music>

Вроде проще не куда, в строчке url записываем путь к файлу, если он находиться в одной папке с флешкой, можно писать только его название, только не забывайте добавлять расширение, кроме mp3 я не советую ничё туда пихать. Если на каком то другом сервере, тогда нужно прописывать полный адрес, например: http://www.music.com/roby.mp3

Функция, которая загружает этот файл loadList(), давайте разберём её подробнее:

Сперва создадим объект хмл:

Код:

listXML = new XML();

Лишние проблемы с расшифровкой файла нам не к чему, потому пропустим все внеплановые пробелы:

Код:

listXML.ignoreWhite = true;

Загружаем файл:

Код:

listXML.load("listMusic.xml");

Когда файл загрузиться нам нужно его прочитать и куда нибуть занести полученные данные, узнаём про окончании загрузки с помощу обработчика событий onLoad:

Код:

listXML.onLoad = function(){
}

Облегчим задачу, присвоим переменной list значение вторых нодов, где записаны адреса:

Код:

list = listXML.firstChild.childNodes

Теперь прочитаем все атрибуты, и запишем их в объект, этот объект занесем в предварительно объявленный массив:

Код:

for(var j = 0; j < list.length; j++){
			var tempAtr = list[j].attributes;
			ob = {}
			for (var g in tempAtr){
				ob[g] = tempAtr[g]
				//trace(ob[g] +" = "+ ob[g])
			}
			arr.push(ob)
}

Атрибутов может быть несколько, допустим название и артист, или какой нибудь номер, всё что хотите, эти все значения заносятся в объект ob, а он в свою очередь в массив. Таким образом, длина массива это кол-во песен в списке.

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

Мы работает с подгружаемым звуком, потому надо бы создать специальный объект класса Sound:

Код:

var sound:Sound = new Sound()

Теперь разберём основную функцию loadMusic(), она загружает музыку и показывает процент загрузки.

Этой функции будет передаваться номер загружаемой песни (numbLM), песня будет доставаться из ранее созданного массива (мы его создали, когда читали файл с адресами), а так как в массиве нумерация идёт с нуля, а не с единице, от полученного номера надо отнять один:

Код:

arrNumb = numbLM-1

Загружает музыку извне, функция loadSound(), она принимает два параметра, первый это адрес песни, его мы будем доставать из массива, второй это режим загрузки звука, потоковый или нет, мы будем загружать не потоковым, то есть пользователь(и флеш) будет ждать пока, загрузиться весь файл:

Код:

sound.loadSound(arr[arrNumb].url, false);

Дальше стоит простейший загрузчик, который будет просчитывать процент загружённости, и выводить в поле percentInfo:

Код:

onEnterFrame = function(){
var percent:Number = Math.round((sound.getBytesLoaded()/sound.getBytesTotal())*100)
_root.percentInfo.text = percent + "%"
}

Когда файл загрузиться надо начать проигрывание музыки функцией start():

Код:

sound.onLoad = function() {
	sound.start()
};

Если вы хотите что бы музыка загружалась сразу после загрузки сайта, нужно создать ф-цию первой загрузки, в которой мы вызываем ф-цию loadMusic() и передаём ей значение, которое надо предварительно задать:

Код:

function firstLoad(){
	loadMusic(numb)
	_root.butLoad.numbMusic.text = numb
}

Эту ф-цию надо вставить в ф-цию загрузки. Вторую строку вы позже поймёте.

Теперь давайте определимся с уровнем звука, обратимся к кнопке, которую мы создали (setVol), при нажатии на неё надо переключить на следующий кадр, в котором задан параметр громкости, переменную getVol надо задать заранее:

Код:

this.setVol.onRelease = function(){
	if(getVol<4){
		getVol++
	}else{
		getVol = 1
	}
	_root.setVol.gotoAndStop(getVol)
}

Я думаю, пользователю надоест одна и та же музыка, потому давайте повесим на кнопочку, которую мы создали ранее. При нажатие на неё переменная numb будет увеличиваться на единицу после чего вызывается ф-ци загрузки, в неё мы передаем переменную numb. И что бы пользователь был в курсе дела, в поле этой кнопки (numbMusic) запишем текущее значение номера песни (this.numbMusic.text = numb). Здесь есть плюс и минус, плюс в том, что кнопка компактная, минус, что музыка перебирается по порядку в одну сторону:

Код:

this.butLoad.onRelease = function(){
	if(numb < list.length){
		numb++
	}else{
		numb = 1
	}
	this.numbMusic.text = numb
	loadMusic(numb)
}

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

Код:

sound.onSoundComplete = function(){
	if(numb < list.length){
		numb++
	}else{
		numb = 0	
	}
loadMusic(numb)
this.numbMusic.text = numb
}

Ещё перед эти всем надо бы кнопку громкости поставить в то положение, в какое вам удобно, а этот параметр принимает переменная getVol, если указана цифра 1, звук будет орать на полную, 2 - на половину, 3 - на 10 процентов, 4 – песня не будет звучать:

Код:

this.setVol.gotoAndStop(getVol)

----------------------------------

Вот весь код, который написан в первом кадре:

Код:

var numb = 1//Переменная номера песни
var sound:Sound = new Sound()//Создаётся объект класса Sound
var arr:Array = new Array()//Создаём массив
var getVol = 2//громкость   ---   если указана цифра 1, звук будет орать на полную, 
//2 -  на половину, 3  - на 10 процентов, 4 – песня не будет звучать
this.setVol.gotoAndStop(getVol)//Начальное положение кнопки громкости
function loadList() {//Загрузка списка песен
	listXML = new XML();//Создаём обьект класса XML
	listXML.ignoreWhite = true;//Игнорируем лишнии пробелы
	listXML.load("listMusic.xml");//Загружаем файл
	listXML.onLoad = function(){//Действие при загрузки
		list = listXML.firstChild.childNodes//Записываем переменную второго узла
		for(var j = 0; j < list.length; j++){//Просчитываем все атрибуты
			var tempAtr = list[j].attributes;
			ob = {}
			for (var g in tempAtr){
				ob[g] = tempAtr[g]
				//trace(ob[g] +" = "+ ob[g])
			}
			arr.push(ob)
			firstLoad()//Вызываем ф-цию первой загрузки песни
		}
	}
}
loadList()//Вызываем ф-цю загрузки списка песен
function firstLoad(){//ф-цию первой загрузки песни
	loadMusic(numb)//Вызываем ф-цю загрузки песни с загрузчиком
	_root.butLoad.numbMusic.text = numb//в текстовое поле 
//записываем номер проигрываемой песни
}
sound.onLoad = function() {//При загрузки
	sound.start()//запускаем песню
};
this.butLoad.onRelease = function(){//При нажатии на кнопку следующей песни
	if(numb < list.length){//Проверяем значение текущей 
//песни с длиной массива(кол-вом песен)
		numb++//если оно меньше добавляем к текущему ещё еденицу
	}else{
		numb = 1//если нет, устанавлеваем значение на первую песню
	}
	this.numbMusic.text = numb//выводим текущий номер песни
	loadMusic(numb)//Вызываем ф-цю загрузки, передавая ей параметр номера песни
}
function loadMusic(numbLM){//Ф-ция загрузки песни
	arrNumb = numbLM-1//вводим ещё одну переменную 
//для страховки, и для удоюства в чтение массива
	sound.loadSound(arr[arrNumb].url, false);//загружаем песню
	onEnterFrame = function(){//включаем цыкл
		var percent:Number = Math.round((sound.getBytesLoaded()/sound.getBytesTotal())*100)
		_root.percentInfo.text = percent + "%"//выводим процент загружонности файла
	}
}
this.setVol.onRelease = function(){//Принажатии на кнопку звука
	if(getVol<4){//если значение меньше 4 (кол-во кадров)
		getVol++//инкриминтируем значение
	}else{
		getVol = 1//если нет, присваиваем первое 
//(0 кадра не бывает, потому присваеваем 1)
	}
	_root.setVol.gotoAndStop(getVol)//переключам кнопку на заданный кадр
}
sound.onSoundComplete = function(){//При окончание проигрываения песни
	if(numb < list.length){//Если текущее значение меньше кол-ва песен всего
		numb++//инкриминтируем
	}else{
		numb = 1//если нет тогда устанавлеваем первое значение
	}
	loadMusic(numb)//Вызываем ф-цию загрузки песни,
//передавая параметр номера песни
	this.numbMusic.text = numb//выводим текущий номер песни
}

-----------------------------------

Это самый примитивный плеер, но он очень компактный его можно поставить где-нибудь в уголок, где он не будет бросаться в глаза. Можно добавить ещё много чего, но пользователь пришёл на ваш сайт не музыку послушать, а если так то тогда этим плеером вы не обойдётесь. Единственное что сюда можно добавить так это строку, в которой будет показываться название песни, артист, и т. д., этого можно достичь с помощу метода id3 который читает теги песни, например, что бы прочитать все теги надо воспользоваться циклом:

Код:

var temp = ""
sound.onID3 = function(){
	for(var i in sound.id3){
	temp += i + ": " + sound.id3[i] + "\n"
	}
	_root.tegInfo.text = temp
}

После этого можно выводить вместимость этих тегов переменной temp, например, в текстовое поле:

Код:

_root.tegPole.text = temp

Но все теги я думаю не понадобиться, а только два или три, тогда просто проверти подходим вам или нет, результат выведите в бегущую строку, которую совсем не тяжело создать…

Думаю сам скрипт я разъяснил понятно.

ЗЫ: А вообще учитесь писать в классах...))) Мне стыдно что я вас учу плохому, но мне так фпадло переписывать всё эту чушь... А вам может и пригодится...)))

Devil · 23.04.2008, 18:01

Ой какая прелесть, я вот что-то подобное и искал в своё время