← strona główna

Wykorzystanie przeglądarki internetowej jako zautomatyzowanego odtwarzacza próbek dźwiękowych

W tych przykładach instrument generatywny składa się z trzech elementów:

Przykłady można modyfikować i uruchamiać na własnym komputerze.

Strona może generować dużo głośnych dźwięków. Może też spowolnić pracę przeglądarki. Aby wyłączyć wszystkie dźwięki na raz należy odświeżyć stronę, zamknąć ją lub zamknąć przeglądarkę.

lista przykładów:

Prosty odtwarzacz audio, działający w pętli


kod html:

<audio src="60.mp3" loop controls ></audio>

Kilka próbek dźwiękowych (akord)




kod html:

<audio src="60.mp3" loop controls ></audio><br/>
<audio src="64.mp3" loop controls ></audio><br/>
<audio src="67.mp3" loop controls ></audio><br/>

Kilka fragmentów muzycznych granych w zapętleniu

kod html:

<audio src="fragmenty/a.mp3" controls loop="true"></audio>
<audio src="fragmenty/b.mp3" controls loop="true"></audio>
<audio src="fragmenty/c.mp3" controls loop="true"></audio>
<audio src="fragmenty/e.mp3" controls loop="true"></audio>
<audio src="fragmenty/f.mp3" controls loop="true"></audio>
<audio src="fragmenty/g.mp3" controls loop="true"></audio>

Cały fortepian (ponumerowany)

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

kod javascript

var rezultat = document.getElementById('rezultat');
for (k=24; k<=108; k++) {
    var path = 'piano_mp3/'+k+'.mp3'
    var id = 'audio'+k;
    var audio = window.document.createElement("audio");
    audio.setAttribute('id', id);
    audio.setAttribute('controls', 'true');
    audio.setAttribute('preload', 'true');
    audio.setAttribute('loop', 'true');
    audio.setAttribute('src', path);	
    var numer = window.document.createElement("div");
    numer.style.margin = '10px';
    numer.innerHTML = k;
    numer.style.border = 'dashed 1px gray';
    numer.appendChild(audio);
    rezultat.appendChild(numer);
}

Autorstwo kodu: Marcin Strzelecki
Marcin Strzelecki © 2024