← strona główna

Automatyczny odtwarzacz próbek – zmienne parametry

aby zatrzymać odtwarzanie wszystkich ścieżek:
odśwież stronę, zamknij ją lub wróć do poprzedniej.


Elementy interfejsu od lewej:
  • element Audio
  • suwak maksymalnej głośności i aktualna wartość
  • suwak czasu falowania i aktualna wartość (w milisekundach)
  • chceckbox uruchamiający falowanie dynamiki
  • aktualna głośność

kod html + javascript:


<div id="rezultat"><p>
aby zatrzymać odtwarzanie wszystkich ścieżek:<br/>
odśwież stronę, zamknij ją lub wróć do poprzedniej.<hr/>
Elementy interfejsu od lewej:
<ul>
<li>element Audio
<li>suwak maksymalnej głośności i aktualna wartość
<li>suwak czasu falowania i aktualna wartość (w milisekundach)
<li>chceckbox uruchamiający falowanie dynamiki
<li>aktualna głośność
</ul>
</p></div>

<script type="text/javascript">
	var arrStepVol = new Array ();;
	var arrCurrVol = new Array ();
	var arrMultVol = new Array ();
	var arrInterval = new Array ();
	var arrTimer = new Array ();
		
	var arrPathLbl = new Array();
	var arrAudio = new Array ();
	var arrSldVolMult = new Array ();
	var arrValVolMult = new Array ();
	var arrSldTime = new Array ();
	var arrValTime = new Array ();
	var arrChbTimer = new Array ();
	var arrValVolCurr = new Array ();
	var arrPath = new Array ();
	var path;
	for (k=24; k<=108; k++) {
		path = 'piano_mp3/'+k+'.mp3';
		arrPath[arrPath.length] = path;
	}
	id = 0;
	arrPath.forEach ( function (path) {

		var wiersz = window.document.createElement('div')
		wiersz.style.margin = '5px';
		wiersz.style.border = 'dashed 1px gray';
		wiersz.style.zoom = "0.5";

		id++;
		arrCurrVol[id] = 0;
		arrMultVol[id] = 1;
		arrInterval[id] = 1;
		arrStepVol[id] = 0.01; 
		arrPathLbl[id] = document.createElement("span");
		arrPathLbl[id].setAttribute('fontsize', '10');
		arrPathLbl[id].innerHTML = path;
		wiersz.appendChild(arrPathLbl[id]);
		
		window.document.body.appendChild(document.createElement("br"));
		arrAudio[id] = document.createElement("audio");
		arrAudio[id].setAttribute('id', 'audio-'+id);
		arrAudio[id].setAttribute('controls', 'true');
		arrAudio[id].setAttribute('preload', 'true');
		arrAudio[id].setAttribute('loop', 'true');
		arrAudio[id].setAttribute('src', path);
		wiersz.appendChild(arrAudio[id]);
		
		arrSldVolMult[id] = document.createElement("input");
		arrSldVolMult[id].setAttribute('type', 'range');
		arrSldVolMult[id].setAttribute('min', '0.0');
		arrSldVolMult[id].setAttribute('max', '1.0');
		arrSldVolMult[id].setAttribute('step', '0.01');
		arrSldVolMult[id].setAttribute('value', '1');
		arrSldVolMult[id].setAttribute('onchange', 'setVolumeMult('+id+')');
		wiersz.appendChild(arrSldVolMult[id]);
		
		arrValVolMult[id] = document.createElement("input");
		arrValVolMult[id].setAttribute('type', 'text');
		arrValVolMult[id].setAttribute('size', '5');
		arrValVolMult[id].setAttribute('value', '1');
		arrValVolMult[id].setAttribute('readonly', 'true');
		wiersz.appendChild(arrValVolMult[id]);		
		
		arrSldTime[id] = document.createElement("input");
		arrSldTime[id].setAttribute('type', 'range');
		arrSldTime[id].setAttribute('min', '10');
		arrSldTime[id].setAttribute('max', '5000');
		arrSldTime[id].setAttribute('step', '1');
		arrSldTime[id].setAttribute('value', '1000');
		arrSldTime[id].setAttribute('onchange', 'setTime('+id+')');
		wiersz.appendChild(arrSldTime[id]);
		
		arrValTime[id] = document.createElement("input");
		arrValTime[id].setAttribute('type', 'text');
		arrValTime[id].setAttribute('size', '5');
		arrValTime[id].setAttribute('value', '1000');
		arrValTime[id].setAttribute('readonly', 'true');
		wiersz.appendChild(arrValTime[id]);		
		
		arrChbTimer[id] = document.createElement('input');
		arrChbTimer[id].setAttribute('type', 'checkbox');
		//arrChbTimer[id].setAttribute('checked', 'false');
		arrChbTimer[id].setAttribute('onchange', 'setTimer('+id+')');
		wiersz.appendChild(arrChbTimer[id]);
		
		arrValVolCurr[id] = document.createElement("input");
		arrValVolCurr[id].setAttribute('type', 'text');
		arrValVolCurr[id].setAttribute('size', '5');
		arrValVolCurr[id].setAttribute('value', '0');
		arrValVolCurr[id].setAttribute('readonly', 'true');
		wiersz.appendChild(arrValVolCurr[id]);
				
		rezultat.appendChild(wiersz);
	} );
        window.onload = function() {
	}
	function setVolumeMult (id) {
		arrMultVol[id] = arrSldVolMult[id].value;
		arrValVolMult[id].value = arrMultVol[id];
		arrAudio[id].volume = arrCurrVol[id] * arrMultVol[id];
	}
	function setTime (id) {
		time = arrSldTime[id].value;
		arrValTime[id].value = time;
		if (arrStepVol[id] < 0) {
			arrStepVol[id] = -1 / ( time / arrInterval[id]);
		} else {
			arrStepVol[id] = 1 / ( time / arrInterval[id]);
		}		
	}	
	function setTimer (id) {
		if (arrChbTimer[id].checked == true) {
			arrTimer[id] = window.setInterval(function () {doTimer(id)}, arrInterval[id]);
		} else {
			window.clearInterval (arrTimer[id]);
		}
	}

	function doTimer (id) {
	
		var newVol = arrCurrVol[id] + arrStepVol[id];
		if ( newVol > 1) {
			arrStepVol[id] = arrStepVol[id] * -1;
			arrCurrVol[id] = 1;
		} else if (newVol < 0) {
			arrStepVol[id] = arrStepVol[id] * -1;
			arrCurrVol[id] = 0;
		} else {
			arrCurrVol[id] = newVol;
		}
		arrValVolCurr[id].value = arrCurrVol[id];
		arrAudio[id].volume = arrCurrVol[id] * arrMultVol[id];
	}
</script>

                

Autorstwo kodu: Marcin Strzelecki