Jak stanovit počet audio smyček (loop)? Vyřešeno

...

Moderátor: Mods_senior

Martin Baroch
Level 2
Level 2
Příspěvky: 201
Registrován: říjen 13
Pohlaví: Muž
Stav:
Offline

Jak stanovit počet audio smyček (loop)?

Příspěvekod Martin Baroch » 10 srp 2019 19:50

Mám na testovacïm webu vloźeno: <audio autoplay loop>, takže se huba stále přehrává. Chtěl bych omezit počet smyček na 2-3.
Jak by v takovém případě měl vypadat zápis kódu? <audio autoplay loop=3> mi NEFUNGUJE.

Děkuji za informaci.

MB

Reklama
Uživatelský avatar
ChrisTaylor
Level 2
Level 2
Příspěvky: 161
Registrován: duben 14
Pohlaví: Muž
Stav:
Offline

Re: Jak stanovit počet audio smyček (loop)?

Příspěvekod ChrisTaylor » 10 srp 2019 20:38

Značka audio takovou hodnotu atributu loop nepodporuje, tj. lze to udělat jedině pomocí JavaScriptu.

Martin Baroch
Level 2
Level 2
Příspěvky: 201
Registrován: říjen 13
Pohlaví: Muž
Stav:
Offline

Re: Jak stanovit počet audio smyček (loop)?

Příspěvekod Martin Baroch » 10 srp 2019 22:22

Vytvořil jsem tento kód v JS:

<script>
var audio = new Audio() ;
audio.src ="spojeno 1.mp3";
audio.loop = true;
audio.play();
</script>

Kam mám napsat údaj o redukovaném počtu opakování nahrávky?

MB

Uživatelský avatar
ChrisTaylor
Level 2
Level 2
Příspěvky: 161
Registrován: duben 14
Pohlaví: Muž
Stav:
Offline

Re: Jak stanovit počet audio smyček (loop)?

Příspěvekod ChrisTaylor » 11 srp 2019 12:33

Samotná třída pro přehrávání zvuku nepodporuje opakování zvuku nkrát, to si člověk musí vytvořit sám. Například:

Kód: Vybrat vše

let audioPlayer = new Audio("audio.mp3");
let playsCounter = 0;

const numberOfRepeats = 3;

audioPlayer.addEventListener("ended", function()
{
    playsCounter++;
   
    if (playsCounter < numberOfRepeats)
    {
        this.play();
    }
});

audioPlayer.play();

Martin Baroch
Level 2
Level 2
Příspěvky: 201
Registrován: říjen 13
Pohlaví: Muž
Stav:
Offline

Re: Jak stanovit počet audio smyček (loop)?

Příspěvekod Martin Baroch » 11 srp 2019 17:49

Jak a kam mám na stránce ten kód vložit. Má být uzavřen do nějakých tagů?
Děkuji
MB

Uživatelský avatar
ChrisTaylor
Level 2
Level 2
Příspěvky: 161
Registrován: duben 14
Pohlaví: Muž
Stav:
Offline

Re: Jak stanovit počet audio smyček (loop)?

Příspěvekod ChrisTaylor » 11 srp 2019 18:07

Jako nejvhodnější se jeví vytvořit externí soubor pro kód, např. main.js, ten se umístí do adresáře pro web a poté na se něj odkáže v hlavičce následovně:

Kód: Vybrat vše

<head>
        /* … */
        <script src="main.js"></script>
</head>

Martin Baroch
Level 2
Level 2
Příspěvky: 201
Registrován: říjen 13
Pohlaví: Muž
Stav:
Offline

Re: Jak stanovit počet audio smyček (loop)?

Příspěvekod Martin Baroch » 11 srp 2019 18:48

Mám v externím souboru uzavřít ten kód mezi tagy <script> a </script> nebo mám do něho jen zkopírovat text kódu?

MB

Dodatečně přidáno po 51 minutách 35 vteřinách:
Vložil jsem to do scriptu takto:

<head>
/* … */
<script src="main.js"></script>
</head>
<script>
var audio = new Audio() ;
audio.src ="spojeno 1.mp3";
audio.loop = true;
audio.play();
</script>

Ale omezení na 3 přehrávky mi nefunguje. Co s tím mohu udělat?

MB

Uživatelský avatar
ChrisTaylor
Level 2
Level 2
Příspěvky: 161
Registrován: duben 14
Pohlaví: Muž
Stav:
Offline

Re: Jak stanovit počet audio smyček (loop)?

Příspěvekod ChrisTaylor » 11 srp 2019 20:21

Půjdu tedy na to více podrobněji. Zvuk se opakovaně přehraje až po stisknutí tlačítka, neboť některé prohlížeče blokují automatické přehrávání bez interakce uživatele. V adresáři tvého projektu vytvoř soubory index.html a main.js.

Obsah souboru index.html:

Kód: Vybrat vše

<!doctype html>
<html lang="cs">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Opakování zvuku</title>
        <script src="main.js" defer></script>
    </head>
    <body>
        <button id="play-sound">Přehrát zvuk opakovaně</button>
    </body>
</html>

Obsah souboru main.js:

Kód: Vybrat vše

document.querySelector("#play-sound").addEventListener("click", () =>
{   
    let audioPlayer = new Audio("file-name.mp3");
    let playsCounter = 0;

    const numberOfRepeats = 3;
   
    audioPlayer.addEventListener("ended", function()
    {
        playsCounter++;
       
        if (playsCounter < numberOfRepeats)
        {
            this.play();
        }
    });

    audioPlayer.play();
});

V kódu výše akorát nahraď textový řetězec v konstruktoru třídy Audio na cestu k tvému zvukovému souboru, nynější je tam jako příklad.

Martin Baroch
Level 2
Level 2
Příspěvky: 201
Registrován: říjen 13
Pohlaví: Muž
Stav:
Offline

Re: Jak stanovit počet audio smyček (loop)?  Vyřešeno

Příspěvekod Martin Baroch » 11 srp 2019 20:32

Už je to v pořádku. Jsem asi trochu mdlého rozumu a nacpal jsem na stránku jak původní kód audio, tak odkaz na main.js
Púvodní kód audio jsem odstranil a ponechal jen odkaz na main.js
Funguje to perfektně a v externím souboru mohu libovolně stanovovat počet přehrávek.

Mnohokrát děkuji.

Martin Baroch

Uživatelský avatar
ChrisTaylor
Level 2
Level 2
Příspěvky: 161
Registrován: duben 14
Pohlaví: Muž
Stav:
Offline

Re: Jak stanovit počet audio smyček (loop)?

Příspěvekod ChrisTaylor » 11 srp 2019 21:04

Není zač, případně označ téma jako „Vyřešené“ (symbol fajfky), aby mohlo jako sloužit vzory pro ty, kteří mají obdobný problém.


Zpět na “Vše ostatní (sw)”

Kdo je online

Uživatelé prohlížející si toto fórum: Žádní registrovaní uživatelé a 1 host