Ve videu jsme si ukázali, jak vložit na stránky zvuk pomocí HTML elementu audio a jak zvuk pomocí javascriptu nechat zaznít.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Nela Hrabcová - Dokážeš cokoli 0005 - Dívčí sbor</title>
<link href="styly.css" rel="stylesheet" />
<script type="text/javascript" src="skripty.js"></script>
</head>
<body style="position:relative">
<audio id="au_c1" preload="auto" src="zvuky/c1.mp3"></audio>
<audio id="au_d1" preload="auto" src="zvuky/d1.mp3"></audio>
<audio id="au_e1" preload="auto" src="zvuky/e1.mp3"></audio>
<audio id="au_f1" preload="auto" src="zvuky/f1.mp3"></audio>
<audio id="au_g1" preload="auto" src="zvuky/g1.mp3"></audio>
<audio id="au_a1" preload="auto" src="zvuky/a1.mp3"></audio>
<audio id="au_h1" preload="auto" src="zvuky/h1.mp3"></audio>
<audio id="au_c2" preload="auto" src="zvuky/c2.mp3"></audio>
<img id="obrazek_c1" src="obrazky/c1_z.jpg" class="ton">
<img id="obrazek_d1" src="obrazky/d1_z.jpg" class="ton">
<img id="obrazek_e1" src="obrazky/e1_z.jpg" class="ton">
<img id="obrazek_f1" src="obrazky/f1_z.jpg" class="ton">
<img id="obrazek_g1" src="obrazky/g1_z.jpg" class="ton">
<img id="obrazek_a1" src="obrazky/a1_z.jpg" class="ton">
<img id="obrazek_h1" src="obrazky/h1_z.jpg" class="ton">
<img id="obrazek_c2" src="obrazky/c1_z.jpg" class="ton">
<br>
<br>
<br>
<img id="obrazek_akord_c" src="obrazky/c.jpg" class="akord">
<img id="obrazek_akord_d" src="obrazky/d.jpg" class="akord">
<img id="obrazek_akord_e" src="obrazky/e.jpg" class="akord">
<img id="obrazek_akord_f" src="obrazky/f.jpg" class="akord">
<img id="obrazek_akord_g" src="obrazky/g.jpg" class="akord">
<img id="obrazek_akord_a" src="obrazky/a.jpg" class="akord">
</body>
</html>
body {
background-color: black;
}
.ton {
width: 200px;
height: 350px;
border-radius: 10px;
}
.akord {
width: 100px;
height: 100px;
border-radius: 10px;
}
function otevric1(){ obrazek_c1.src="obrazky/c1_o.jpg"};
function otevrid1(){ obrazek_d1.src="obrazky/d1_o.jpg"};
function otevrie1(){ obrazek_e1.src="obrazky/e1_o.jpg"};
function otevrif1(){ obrazek_f1.src="obrazky/f1_o.jpg"};
function otevrig1(){ obrazek_g1.src="obrazky/g1_o.jpg"};
function otevria1(){ obrazek_a1.src="obrazky/a1_o.jpg"};
function otevrih1(){ obrazek_h1.src="obrazky/h1_o.jpg"};
function otevric2(){ obrazek_c2.src="obrazky/c1_o.jpg"};
function sklapnic1(){ obrazek_c1.src="obrazky/c1_z.jpg"};
function sklapnid1(){ obrazek_d1.src="obrazky/d1_z.jpg"};
function sklapnie1(){ obrazek_e1.src="obrazky/e1_z.jpg"};
function sklapnif1(){ obrazek_f1.src="obrazky/f1_z.jpg"};
function sklapnig1(){ obrazek_g1.src="obrazky/g1_z.jpg"};
function sklapnia1(){ obrazek_a1.src="obrazky/a1_z.jpg"};
function sklapnih1(){ obrazek_h1.src="obrazky/h1_z.jpg"};
function sklapnic2(){ obrazek_c2.src="obrazky/c1_z.jpg"};
function zvukc1() { otevric1(); au_c1.currentTime=0; au_c1.play(); }
function zvukd1() { otevrid1(); au_d1.currentTime=0; au_d1.play(); }
function zvuke1() { otevrie1(); au_e1.currentTime=0; au_e1.play(); }
function zvukf1() { otevrif1(); au_f1.currentTime=0; au_f1.play(); }
function zvukg1() { otevrig1(); au_g1.currentTime=0; au_g1.play(); }
function zvuka1() { otevria1(); au_a1.currentTime=0; au_a1.play(); }
function zvukh1() { otevrih1(); au_h1.currentTime=0; au_h1.play(); }
function zvukc2() { otevric2(); au_c2.currentTime=0; au_c2.play(); }
function akord_c() {zvukc1(); zvuke1(); zvukg1(); }
function akord_d() {zvukd1(); zvukf1(); zvuka1(); }
function akord_e() {zvuke1(); zvukg1(); zvukh1(); }
function akord_f() {zvukf1(); zvuka1(); zvukc2(); }
function akord_g() {zvukg1(); zvukh1(); zvukd1(); }
function akord_a() {zvuka1(); zvukc1(); zvuke1(); }
window.addEventListener("load", poNacteni, false);
function poNacteni() {
obrazek_c1.addEventListener("mousedown", zvukc1, false);
obrazek_d1.addEventListener("mousedown", zvukd1, false);
obrazek_e1.addEventListener("mousedown", zvuke1, false);
obrazek_f1.addEventListener("mousedown", zvukf1, false);
obrazek_g1.addEventListener("mousedown", zvukg1, false);
obrazek_a1.addEventListener("mousedown", zvuka1, false);
obrazek_h1.addEventListener("mousedown", zvukh1, false);
obrazek_c2.addEventListener("mousedown", zvukc2, false);
obrazek_akord_c.addEventListener("mousedown", akord_c, false);
obrazek_akord_d.addEventListener("mousedown", akord_d, false);
obrazek_akord_e.addEventListener("mousedown", akord_e, false);
obrazek_akord_f.addEventListener("mousedown", akord_f, false);
obrazek_akord_g.addEventListener("mousedown", akord_g, false);
obrazek_akord_a.addEventListener("mousedown", akord_a, false);
au_c1.addEventListener("ended", sklapnic1, false);
au_d1.addEventListener("ended", sklapnid1, false);
au_e1.addEventListener("ended", sklapnie1, false);
au_f1.addEventListener("ended", sklapnif1, false);
au_g1.addEventListener("ended", sklapnig1, false);
au_a1.addEventListener("ended", sklapnia1, false);
au_h1.addEventListener("ended", sklapnih1, false);
au_c2.addEventListener("ended", sklapnic2, false);
}
Tady je tento kód jako ukázková stránka.
Pokud jste to ještě neudělali, podívejte se na mé video (níže) a pak zkoušejte, zkoušejte, zkoušejte... Prostě si s těmi obrázky a zvuky hrajte. Jak myslíte, že se to učím já?