2.4. tēma: Audio materiālu apstrāde un integrācija

Tavs šīs stundas izaicinājums: 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ā.

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. Svarīgi: Skaņa nedrīkst sākt skanēt automātiski, pirms lietotājs ir mijiedarbojies ar lapu (pārlūku drošības noteikums).

1. uzdevums: Bezmaksas audio resursu atlase

Atrast vismaz 3 skaņas efektus un vienu fona mūziku, ievērojot licencēšanas noteikumus.

Izpildes soļi:

  1. Izmanto resursus kā Freesound.org vai Pixabay Music.
  2. Atrodi skaņas: 1. Spēles sākumam, 2. Punktu gūšanai, 3. "Game Over" situācijai.
  3. Atrodi vienu mierīgu fona melodiju, kas atbilst tavas spēles vizuālajam stilam.

2. uzdevums: Audio pēcapstrāde (Editing)

Nogriezt lieko klusumu audio failu sākumā/beigās un noregulēt skaļuma līmeņus.

Izpildes soļi:

  1. Izmanto tiešsaistes rīku, piemēram, 123Apps Audio Cutter vai Sodaphonic.
  2. Nogriez klusuma pauzes failu sākumā, lai skaņa spēlē atskanētu tūlītēji pēc darbības.
  3. Samazini fona mūzikas skaļumu (gain), lai tā nebūtu pārāk skaļa salīdzinājumā ar efektiem.
  4. Saglabā failus mapē assets/audio ar saprotamiem nosaukumiem (piem., jump.mp3).

3. uzdevums: Audio integrācija ar HTML5

Pievienot skaņas failus dokumentācijai, izmantojot <audio> tagu ar kontroles pogām.

Izpildes soļi:

  1. Failā index.html izveido jaunu sadaļu "Spēles audio materiāli".
  2. Katram skaņas failam pievieno <audio controls> elementu, lai lietotājs varētu tos noklausīties jau pieteikuma lapā.
  3. Veic Commit un Push uz GitHub, norādot: "Pievienoti un optimizēti audio resursi".

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 ➡