›_ ebskola.lv
← 2.3 2.5 →

2.4 Audio materiālu apstrāde un integrācija

Stundas uzdevums: Izvēlēties spēles noskaņai atbilstošus skaņas efektus, veikt to pēcapstrādi un sagatavot tos integrācijai tīmekļa projektā.

2.4.6. Veic iegūto materiālu pēcapstrādi; 2.4.10. Saglabā dokumentu mākoņkrātuvē atbilstošā formātā.
SR 2.4.9. Satura sinhronizācija starp dokumentiem

70 min darba sadalījums: 1. uzdevums (~20 min) - atjauno teorijas piemēru vai minimālo prototipu; 2. uzdevums (~25 min) - pielieto to galvenajā uzdevumā; 3. uzdevums (~25 min) - pārbaudi rezultātu, izlabo kļūdas un tikai beigās pieraksti vienu secinājumu. Papildus/4. līmeņa uzdevums ir paredzēts tikai tad, ja pamatdarbs ir pabeigts.

Pirms sāc: izmanto iepriekš apgūto un šīs lapas teorijas/koda piemērus. Ja vajadzīga jauna komanda vai rīks, vispirms atrodi tās paraugu teorijas sadaļā.

Teorija: Audio formāti un lietojamība

Tīmekļa spēlēs mēs parasti izmantojam divu veidu skaņas:

Formāti: Visizplatītākais ir MP3 (labs kompromiss starp kvalitāti un izmēru), bet modernākais un efektīvākais ir Ogg Vorbis vai AAC. Piezīme: Skaņa nedrīkst sākt skanēt automātiski, pirms lietotājs ir mijiedarbojies ar lapu (pārlūku drošības noteikums). 

<!-- Audio integrācija ar atskaņošanas vadību -->
<audio id="sound-jump" src="skanas/jump.mp3" preload="auto"></audio>
<script>
  document.getElementById("sound-jump").play();
</script>

Praktiskie uzdevumi

1. uzdevums - Iesildies ar gatavu piemēru

Šis ir īss iesildīšanās uzdevums. Nokopē sagatavi, ielīmē to pareizajā koda vietā un palaid. Šeit pietiek droši izmēģināt tēmu 2.4 Audio materiālu apstrāde un integrācija; detalizētu izpratni veidosi nākamajos uzdevumos.

Kopējamais piemērs vai sagatave: izmanto šo bloku kā starta punktu, nevis kā gala risinājumu.

<!-- Audio integrācija ar atskaņošanas vadību -->
<audio id="sound-jump" src="skanas/jump.mp3" preload="auto"></audio>
<script>
  document.getElementById("sound-jump").play();
</script>
  1. Atver darba failu vai rīku. HTML fragmentu ievieto index.html faila <body> daļā.
  2. Nokopē visu piemēra bloku no šī uzdevuma un ielīmē to norādītajā vietā.
  3. Palaid kodu tieši tādu, kāds tas ir, un pārliecinies, ka parādās rezultāts, izvade vai vismaz nav kļūdas paziņojuma.
  4. Atrodi vienu drošu vietu, ko drīkst mainīt: tekstu, skaitli, krāsu, mainīgā vērtību vai testa ierakstu.
  5. Maini tikai šo vienu vērtību un palaid kodu vēlreiz.
  6. Salīdzini rezultātu pirms un pēc izmaiņas. Ja parādās kļūda, atcel pēdējo izmaiņu un palaid vēlreiz.
  7. Turpini pie 2. uzdevuma tikai tad, kad šis mazais piemērs darbojas.

2. uzdevums - Ievieto algoritmu projektā

Pievieno šīs stundas paņēmienu kā nelielu, lietotājam redzamu projekta daļu.

  1. Izveido mapi skanas projekta mapē un ieliec tajā MP3 failu (piemēram, klikskis.mp3).
  2. Atver index.html un pievieno <audio id="sana" src="skanas/klikskis.mp3" preload="auto"></audio>.
  3. Pievieno pogu: <button onclick="skanet()">Skaņas tests</button>.
  4. Atver script.js un pievieno funkciju: function skanet() { let s = document.getElementById("sana"); s.currentTime = 0; s.play(); }.
  5. Saglabā un atver pārlūkā - nospied pogu un pārbaudi, vai skaņa atskaņojas.
  6. Salabo, ja skaņa neatskaņojas - pārbaudi faila ceļu un formātu (MP3 ir piemērots).
  7. Pārbaudi DevTools "Console" - nav jābūt kļūdas ziņojumam par audio.
  8. Veic git commit -m "Add click sound effect".

3. uzdevums - Testē kodu un izdari secinājumu

Pārbaudi, vai algoritms darbojas paredzami vairākās situācijās.

  1. Atver pārlūkā un nospied pogu - pārbaudi, vai skaņa atskaņojas nekavējoties.
  2. Nospied pogu vairākas reizes ātri - pārbaudi, vai skaņa atsāk no sākuma (currentTime = 0).
  3. Atver DevTools → "Network" - pārlādē lapu un pārbaudi, vai audio fails ielādējas bez kļūdas (200 OK).
  4. Pārbaudi audio faila izmēru - tam jābūt mazākam par 500 KB.
  5. Salabo, ja audio atskaņošanā ir pauze - audio faila sākumā var būt klusums, ko griez.
  6. Pārbaudi, ka poga darbojas arī Chrome un Firefox pārlūkos.
  7. Pieraksti vienu secinājumu: kāpēc preload="auto" samazina atskaņošanas kavēšanos.

Papildu uzdevums - Pievieno mazu funkciju

Ja pamatdarbs ir pabeigts, paplašini projektu ar vienu nelielu programmētu uzlabojumu.

  1. Pievieno otru skaņas efektu (piemēram, uzvara.mp3) mapē skanas.
  2. Atver index.html un pievieno otru <audio id="sana-uzvara" src="skanas/uzvara.mp3"></audio>.
  3. Atver script.js un pievieno otro funkciju skanetUzvaru(), kas atskaņo otro skaņu.
  4. Pievieno pogu "Uzvara!" un piesaisti to skanetUzvaru().
  5. Atver pārlūkā - pārbaudi, ka abas pogas atskaņo atšķirīgas skaņas.
  6. Veic git commit -m "Add win sound effect".
  7. Palūdz klasesbiedram - vai viņš dzird atšķirību starp abiem skaņas efektiem?

Biežākās kļūdas (un kā tās labot):

Koda piemērs (HTML5 Audio)

<!-- Audio atskaņotājs ar kontrolēm -->
<div class="audio-item">
    <p>Fona mūzika (cikliska):</p>
    <audio controls loop>
        <source src="assets/audio/background.mp3" type="audio/mpeg">
        Tavs pārlūks neatbalsta audio elementu.
    </audio>
</div>

Fona mūzika (piemērs):

▶ 0:00 / 1:30
⬅ Iepriekšējā stunda Nākamā stunda ➡