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

Martin Baroch · 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

ChrisTaylor · 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 · 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

ChrisTaylor · 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 · 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

ChrisTaylor · 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 · 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

ChrisTaylor · 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 · 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

ChrisTaylor · 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.

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

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

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

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

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

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

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

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

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

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

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

Kdo je online