Зараз обговорюють

"Тобто є ряд завдань, які взагалі без рекурсії не наважуються."  - це як розуміти? Перефразуй, будь ласка. 

виправив, йшлося про те що деякі завдання можна вирішити лише при використанні рекурсії

Спасибі дуже корисна стаття

А ще щось планується подібного найближчим часом?


Дякую за підтримку, радий що Вам сподобалось!

Так маю вже майже дороблений проект по управлінні Audio файлом, на заміну стандартним клавішам управління HTML5, але ще не встиг відтестувати програвання файлів з інтернету, поки лише локально працює

Надіюсь найближчим часом дороблю й закину

Рахунки

webmoneyeur - E385818210641
usd - Z304643423050
uah - U354026817492
rub - R301704373231easypay80002677bitcoin1F5HRGroUtEQW9HBNbeew8iKh5KQ8vJxzw

Зворотній зв'язок

Для покращення роботи сайту надсилайте свої зауваження:
mailЗауваження
mailПропозиція

Статистика

UkrNET - поисково-информационный ресурс

JavaScript : Як створити власний модуль управління Audio плеєром для HTML5

Сьогодні створимо, як видно із теми, повністю свої кнопки управління для аудіо файлу, використовуючи тег Audio із HTML5

Примітка: працюватимемо із форматом mp3 так як він найбільш поширений.

Додатково для роботи ми також буде використовувати наступні бібліотеки:

- jQuery - v3.1.1 jquery.com

- jQuery UI - v1.10.4 jqueryui.com

Примітка: jQuery UI - містить різні готові надбудови користувацького інтерфейсу (Menu, Progressbar, Selectmenu, Slider, Tabs, Tooltip та інші). Нам знадобиться лише Slider

Для кнопок використаємо прості символи, дизайн кожен може зробити собі в залежності від своїх потреб, а поки перейдемо до самого написання коду.


HTML - код

Усі потрібні компоненти будемо наповняти в наступний блок

<div id="myAudio">
	<div id="CurAudio"></div> //блок де буде містити поточний трек, та кнопки управління
	<div id="PlayList"></div> //блок із списком пісень для відтворення
</div>

CurAudio

В даному блоці розмістимо наше візуальне представлення плеєра із усіма кнопками:

<div id="playerView">
	<div id="Play" title="Відтворити">►</div>
	<div id="CurTime" title="Поточний час">00:00</div>
	<div id="PreviousFile" title="Попередній файл">◄</div>
	<div class="ProgressBar" title="00:00"></div>
	<div id="NextFile" title="Наступний файл">►</div>
	<div id="MaxTime" title="Тривалість пісні">00:00</div>
	<div id="VolumeMute" title="Викл. звук">♫</div>
	<div class="VolumeSlider" title="100%"></div>
	<div id="PlayMode" title="Список до кінця">А→</div>
	<div id="DownloalFile" title="Завантажити файл">▼</div>
</div>

Для ProgressBar та VolumeSlider ми використаємо якраз Slider із бібліотеки jQuery UI

id="Play" буде виконувати функції Play/Pause

id="PlayMode" буде переключатись між двома режимами "Відтворення від початку до кінця списку" та "Відтворення списку по колу"

І додаємо сам тег audio, в який будемо поміщати потрібний запис формату mp3

PlayList

Список відтворення буде простий нумерований:

<ol>
	<li data-src="[url1]"><span></span>[audio name 1]</li>
	<li data-src="[url2]"><span></span>[audio name 2]</li>
	<li data-src="[url3]"><span></span>[audio name 3]</li>
</ol>

Пустий тег span буде відображати який трек відтворюється, чи помилку завантаження (х)


JS - код

Для початку нам потрібно буде створити змінні які будуть відповідати за кожен елемент управління:

var playList = [] //масив url треків із нашого плейлисту
var audioElm; //наш HTML5 плеєр
//присвоюємо усі потрібні в подальшому блоки із кнопками управління
var playerViewElm = "#playerView";
var sourceElm = "#sourceSong";
var playElm = "#Play";
var previousElm = "#PreviousFile";
var nextElm = "#NextFile";
var volumeElm = ".VolumeSlider";
var muteElm = "#VolumeMute";
var progresElm = ".ProgressBar";
var curTimeElm = "#CurTime";
var maxTimeElm = "#MaxTime";
var playModeElm = "#PlayMode";
var playListElm = "#PlayList";
var downloadElm = "#DownloalFile";
var curAudio = null; //№ поточного запису
var curProgress = 0; //секунда на якій перебуває відтворення
var curMode = 0; //режим відтворення для переключення playModeElm
var mouseIsHoldProgress = false; //булева змінна знадобиться при внесені змін користувачем в progresElm

Основний наш код розмістимо в наступній функції:

$(document).ready(function () {
	try{
		[управління плеєра]
	}
	catch (e){
		alert(e);
	}
});

Функція буде спрацьовувати після завантаження структури сторінки з якою ми вже зможемо працювати, а блоки try/catch будуть перехоплювати несподівані помилки при роботи коду, якщо такі виникатимуть.

Тобто блок try намагатиметься виконати все йому задане, а якщо в він не зможе щось обробити та викличе помилку то її перехопить catch та виведе повідомлення із помилкою.

Управління плеєра

Присвоюємо наш тег плеєра

audioElm = document.getElementById("AudioPlayer");

Так як сторінка може змінюватись в розмірах залежно від ширини екрану то відповідно треба буде змінювати progresElm до відповідної ширини (розглянемо детальніше дану функцію пізніше)

changeProgressWidth();

Наповнюємо масиви даними з плейлиста:

$(playListElm).find('li').each(function(){
	playList.push($(this).attr('data-src'));
});

find - знаходить усі дочірні елементи в блоці зі списком, а each - забезпечує виконання функції для кожного знайдено елементу


При натисканні на елемент плейлисту нам потрібно буде відтворювати трек на який натиснули, тож:

$(playListElm).on("click", "li", function(){
	for(var i = 0; i < playList.length; i++){ // перебираємо масив навших url
		if($(this).attr('data-src') == playList[i]){ // якщо знаходимо відповідний елемент в масиві
			changeFile(i); // змінити трек на i-тий елемент
			break; // перервати виконання циклу
		}
	}
});

Обробка кнопки Play/Pause. Відповідно запускає, або зупиняє відтворення

$(playElm).on("click", function(){
	if($(sourceElm).attr('src').length > 0)
		(audioElm.paused == true) ? audioElm.play() : audioElm.pause();	
});

Кнопки переключення треку:

//Попередній файл
$(previousElm).on("click", function(){
	changeFile(checkNeedFile(0));
});
//Наступний файл
$(nextElm).on("click", function(){
	changeFile(checkNeedFile(1));
});

checkNeedFile() перевіряє елемент на який ми хочемо переключити. 0 - попередній, 1 - наступний (розглянемо детальніше дану функцію пізніше)


Вкл/Викл звуку

$(muteElm).on("click", function(){
	(audioElm.muted == true) ? audioElm.muted = false : audioElm.muted = true;
	(audioElm.muted == true) ? $(muteElm)[0].innerHTML = "♫x" : $(muteElm)[0].innerHTML = "♫";
	(audioElm.muted == true) ? $(muteElm).attr('title', 'Вкл. звук') : $(muteElm).attr('title', 'Викл. звук');
});

Управління режимом відтворення

$(playModeElm).on("click", function(){
	if(curMode == 0){
		curMode = 1;
		$(playModeElm).attr('title', 'Відтворити до кінця списку');
		$(playModeElm)[0].innerHTML = "A☼";
	}
	else{
		curMode = 0;
		$(playModeElm).attr('title', 'Відтворити по колу');
		$(playModeElm)[0].innerHTML = "A→";
	}
});

Зміна атрибуту title для відображення часу на який перемотається час відтворення

$(progresElm).mousemove(function(e){
	var x = e.pageX - $(progresElm).offset().left;
	$(progresElm).attr('title', converToTime(audioElm.duration * (x / $(progresElm).width())));
});

Обробка помилок

//помилка при роботі з файлом джерелом
$(sourceElm).on("error", function (){
	checkPlaylist(1);
});
audioElm.onerror = function(){
	checkPlaylist(1);
};

checkPlaylist() відповідає за відображеня відтворення, чи помилок в плейлисті. 0 - відтворюється, 1 - помилка (розглянемо детальніше дану функцію пізніше)


Якщо пісню можна відтворити тоді запускаємо її на відтворення:

audioElm.oncanplay = function(){
	$(progresElm).slider("option", "value", 0);
	audioElm.play();
	checkPlaylist(0);
};

Подія початку відтворення та встановлення паузи для треку буде змінювати символ елемента на потрібний

audioElm.onplay  = function(){
	$(playElm)[0].innerHTML = "❚❚";
	$(playElm).attr('title', 'Пауза');
};

audioElm.onpause  = function(){
	$(playElm)[0].innerHTML = "►";
$(playElm).attr('title', 'Відтворити');
};

Перевірка натиску клавіші миші на progresElm

$(progresElm).mousedown(function(){
	mouseIsHoldProgress = true;
});
$(document).mouseup(function(){
	if(mouseIsHoldProgress == true)
		mouseIsHoldProgress = false;
});

Подія що реагує на завершення треку, та перемикає на наступний при можливості

audioElm.onended = function(){
	changeFile(checkNeedFile(1));
};

Подія що реагує на початок процесу завантаження треку та здійснює відображення в плейлисті

audioElm.loadstart = function(){		
	checkPlaylist(0);				
};

подія що реагує на зміну тривалості запису (в нашому випадку це зміна треку) та занулює поточний час

audioElm.durationchange = function(){
	$(curTimeElm)[0].innerHTML = "00:00";
};

Подія що реагує на завантаження даних про трек та встановлює час треку maxTimeElm і змінює максимальне значення нашого слайдера progresElm

audioElm.onloadedmetadata = function(){
	$(maxTimeElm)[0].innerHTML = converToTime(this.duration);
	$(progresElm).slider("option", "max", +audioElm.duration);
};

converToTime() відповідає за конвертування секунд у часовий проміжок (розглянемо детальніше дану функцію пізніше)


Подія що реагує на зміну секунди відтворення та змінює позицію слайдера до поточного місця відтворення, якщо не натиснута клавіша миші на елементі

audioElm.ontimeupdate = function(){
	$(curTimeElm)[0].innerHTML = converToTime(audioElm.currentTime);
	if(mouseIsHoldProgress == false)
		$(progresElm).slider("option", "value", +audioElm.currentTime);
};

Подія що реагує на зміну гучності (змінює слайдер до поточного рівня звуку)

audioElm.onvolumechange = function(){
	$(volumeElm).slider("option", "value", +audioElm.volume);
	$(volumeElm).attr('title', Math.floor(+audioElm.volume * 100) + '%');
};

Регулятор гучності (UI елемент із бібліотеки)

$(volumeElm).slider({
	orientation: "horizontal",
	animate: true,
	range: "min",
	value: 1,
	min: 0,
	max: 1,
	step: 0.01,
	slide: function(event, ui){
		audioElm.volume = ui.value // при зміні слайдера встановлює відповідний рівень звуку 
	}			
});

Процес відтворення треку (UI елемент із бібліотеки)

$(progresElm).slider({
	orientation: "horizontal",
	animate: true,
	range: "min",
	value: 0,
	min: 0,
	max: 120,
	step: 1,
	stop: function(event, ui){
		if($(sourceElm).attr('src'))
			audioElm.currentTime = ui.value; // при зміні слайдера перемотує трек до потрібного місця
	}
});

Завантаження поточного треку

$(downloadElm).on("click", function(){
	var link = document.createElement('a'); // створюємо пустий тег a
	link.setAttribute('href',playList[curAudio]); // додаємо йому посилання на трек
	link.setAttribute('download','download'); // задаємо атрибут download
	onload=link.click(); // завантажити елемент
});

Додаткові функції

Дані функції не включаються у блок [управління плеєра] та розміщаються поза межами функції $(document).ready

Визначаємо потрібний елемент масиву, та перевіряємо чи можна на нього переключити:

function checkNeedFile(param){
	var needFile;
	if(curMode == 0){ // розгалуження для різних режимів відтворення
		if(param == 0){ // перевіряємо чи можна переключити на потрібний елемент
			if(curAudio > 0)
				needFile = curAudio - 1;
			else
				needFile = -1;
			
		} else{
			if(curAudio < (playList.length-1))
				needFile = curAudio + 1;
			else
				needFile = -1;
		}
	} else{
		if(param == 0){ // перевіряємо чи можна переключити на потрібний елемент
			if(curAudio > 0)
				needFile = curAudio - 1;
			else
				needFile = (playList.length-1);
		} else{
			if(curAudio < (playList.length-1))
				needFile = curAudio + 1;
			else
				needFile = 0;			
		}
	}
	return needFile; // повертаємо потрібний № елемента масиву
};

param - приймає значення 0 (на попередній), або 1 (на наступний)


Зміна поточного треку

function changeFile(newFile){
	if(newFile >= 0){
		curAudio = newFile; // зберігаємо в глобальній змінній значення поточного запису
		if(audioElm.canPlayType('audio/mp4;codecs="mp4a.40.5"') != ""){ // якщо браузер може відтворити відповідний тип тоді:
			// очищаємо попередній url треку
			audioElm.pause();
			$(sourceElm).attr('src', '');
			audioElm.load();
			// завантажуємо новий
			$(sourceElm).attr('src', playList[curAudio]);
			audioElm.load();
		} else{
			checkPlaylist(1); // вивести помилку відтворення в плейлист
		}
	}
};

Позначки в плейлисті по поточному треку (відтворюється, чи сталась помилка). Приймає аргумент param: 0 - якщо відтворюється, 1 - якщо помилка

function checkPlaylist(param){
	var symbol;
	var i = 0;
	(param == 0) ? symbol = "♫ " : symbol = "x "
	$(playListElm).find('li').each(function(){ // перебираємо плейлист для відображення його стану
		if(i == curAudio){
			$(this).find("span")[0].innerHTML = symbol;
			$(this).css('color', 'black');
		}
		else{
			$(this).find("span")[0].innerHTML="";
			$(this).css('color', '#ccc');
		}
		i++;
	});
};

Зміна ширина блоку з прогресом відтворення до потрібних розмірів:

function changeProgressWidth(){ $(progresElm).width($(playerViewElm).width() - 420); };

Управління плеєром з клавіатури

$(document).keydown(function(e){
	var unicode = e.charCode ? e.charCode : e.keyCode; // зберігаємо натиснуту клавішу
	if (unicode == 37) //Ліва стрілка
		changeFile(checkNeedFile(0));
	else if (unicode == 39) // Права стрілка
		changeFile(checkNeedFile(1));
	else if (unicode == 32) //Пробіл
		playPause();
	else if (unicode == 38) { //Стрілка вгору		
		if(Math.floor(audioElm.volume * 100) <= 95)
			audioElm.volume = (Math.floor(audioElm.volume * 100) + 5) / 100;
		else if(Math.floor(audioElm.volume * 100) > 95)
			audioElm.volume = 1;
	} else if (unicode == 40) { //Стрілка вниз
		if(Math.floor(audioElm.volume * 100) >= 5)
			audioElm.volume = (Math.floor(audioElm.volume * 100) - 5) / 100;
		else if(Math.floor(audioElm.volume * 100) < 5)
			audioElm.volume = 0;
	}
});

Перетворення секунд в час для відображення значень поточного відтворення та тривалості треку в часовому форматі. Приймає аргумент seconds - секунди

function converToTime(seconds){
	var h, m, s;
	h = Math.floor(seconds/3600);
	m = Math.floor((seconds-(h*3600))/60);
    s = Math.floor(seconds-(h*3600)-(m*60));
	// повертаємо рядок потрібного формату
	if(h > 0)
		return (h < 10 ? "0":"") + h + ":" + (m < 10 ? "0":"") + m + ":" + (s < 10 ? "0":"") + s;
	else
		return (m < 10 ? "0":"") + m + ":" + (s < 10 ? "0":"") + s;	
};

При зміні розмірів вікна браузера - змінити ширину слайдера із прогресом відтворення

$(window).resize(function(){
	changeProgressWidth();
});

Приклад реалізованого плеєра

В кінці після зібрання всього коду ми отримаємо наступний плеєр:

Примітка: усі використані CSS стилі та JS код можна завантажити за посиланнями наведеними в розділі "Файли для завантаження"

00:00
00:00
А→
  1. We As Human - Double Life
  2. Nine Lashes - Get Back
  3. Within Temptation - Edge Of The World
  4. Emphatic - Bounce
  5. HIM - Heartache Every Moment

Файли для завантаження

Завантажити з Завантажити з


view228like1dislike0 avatard_l4w clock 2017-04-12 06:56

Коментарі:



Для даної статті відсутні коментарі

Про нас

"Programmers World" розроблено з метою полегшення в освоєнні навичок програмування, та поширення матеріалів з сфери ІТ Українською мовою.

Кожен бажаючий може безкоштовно користуватися ресурсами сайту, щоб:

- Вивчати теоретичні аспекти мов програмування

- Переглядати практичне застосування теорії при виконанні різних міні проектів з відкритим кодом

- Розміщати свої завдання на форумі для допомоги в їх реалізації, або готового коду який може бути корисний іншим користувачам

- Спілкуватись з іншими користувачами та обмінюватись досвідом

Сайт функціонує на безопланій основі та ентузіазмі розробника, якщо Ви бажаєте долучитись до розвитку даного проекту то можете пожертвувати кошти на рахунки розміщені в блоці "Допомога сайту".

Сайт

Зареєстровані користувачі можуть скористатися системою діалогів, в профілі користувача, для отримання потрібної інформації. Написати!

Також Ви можете використати форми відправки Зауважень та Пропозицій.


Електронна пошта

Ви можете звертатись на нашу поштову скриньку site.programmersworld@gmail.com

www.000webhost.com