×
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