Атрибут loop тега <audio> — повтор звуку
Атрибут loop — логічний атрибут.
Коли присутній, він вказує, що аудіо буде повторюватись кожного разу, коли воно буде закінчене.
автор: с3с
Загальний опис
автор: NagarD
Синтаксис
<audio loop>Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 3 | 11 | 3.1 | 10.5 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 3 | 18 | 14 | 3 |
Приклади
+ запропонувати свій приклад у пісочниці
Чотири плеєри з одним і тим самим коротким сигналом: із loop і без нього, а далі — пара «autoplay без звуку не запуститься / autoplay з muted запуститься». Третій плеєр лишається на паузі сам собою — це не помилка розмітки, а політика браузера щодо звуку без дії людини.
HTML
<p class="lbl">1. З атрибутом <code>loop</code> — натисніть відтворення:
сигнал повторюватиметься, поки не натиснете паузу.</p>
<audio controls loop src="data:audio/wav;base64,UklGRsQFAABXQVZFZm10IBAAAAABAAEAoA8AAKAPAAABAAgAZGF0YaAFAACAgYKAfHp/hoiAdnR+i4+CcW18kJaFbWZ5lJ2IaV51l6SNZldwmquSZFBrnLOXY0llnbqeYkJencGlYztWm8WqZjpTl8SuajtQk8OxbjxMj8K0cj5KisG3dz9Hhr+5e0FEgr28gENCfbu+hEZAebjAiEg+dbXBjUs9cLPDkU48bK/ElVE7aKzFmVU6ZKnFnVg6YKXFoVw6XKHFpWA6WJ3FqWQ6VZnFrGg7UZXEr2w8TpHDs3A9S43BtXU+SIjAuHlARoS+u31CQ3+8vYJEQXu5v4ZHP3e3wYpKPnK0wo9MPG6xw5NQO2quxJdTOmaqxZtWOmKnxZ9aOl6jxqNeOlqfxadiOlabxapmOlOXxK5qO1CTw7FuPEyPwrRyPkqKwbd3P0eGv7l7QUSCvbyAQ0J9u76ERkB5uMCISD51tcGNSz1ws8ORTjxsr8SVUTtorMWZVTpkqcScWj5iob2dYUVimracaExjlK+bbVRlj6iZcltoiqGWd2JrhpmSemlvg5KOfXB0gYuJf3d5gIWDf31+gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIA="></audio>
<p class="lbl">2. Той самий файл без <code>loop</code> — один сигнал, і плеєр зупиняється.</p>
<audio controls src="data:audio/wav;base64,UklGRsQFAABXQVZFZm10IBAAAAABAAEAoA8AAKAPAAABAAgAZGF0YaAFAACAgYKAfHp/hoiAdnR+i4+CcW18kJaFbWZ5lJ2IaV51l6SNZldwmquSZFBrnLOXY0llnbqeYkJencGlYztWm8WqZjpTl8SuajtQk8OxbjxMj8K0cj5KisG3dz9Hhr+5e0FEgr28gENCfbu+hEZAebjAiEg+dbXBjUs9cLPDkU48bK/ElVE7aKzFmVU6ZKnFnVg6YKXFoVw6XKHFpWA6WJ3FqWQ6VZnFrGg7UZXEr2w8TpHDs3A9S43BtXU+SIjAuHlARoS+u31CQ3+8vYJEQXu5v4ZHP3e3wYpKPnK0wo9MPG6xw5NQO2quxJdTOmaqxZtWOmKnxZ9aOl6jxqNeOlqfxadiOlabxapmOlOXxK5qO1CTw7FuPEyPwrRyPkqKwbd3P0eGv7l7QUSCvbyAQ0J9u76ERkB5uMCISD51tcGNSz1ws8ORTjxsr8SVUTtorMWZVTpkqcScWj5iob2dYUVimracaExjlK+bbVRlj6iZcltoiqGWd2JrhpmSemlvg5KOfXB0gYuJf3d5gIWDf31+gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIA="></audio>
<p class="why">У файлі 0,36 секунди: короткий тон і тиша після нього. Тиша —
частина запису, тому в першому плеєрі сигнали йдуть із паузою: атрибут крутить
файл як є й нічого не обрізає.</p>
<p class="lbl">3. З <code>autoplay loop</code>, але без приглушення — само не почнеться.</p>
<audio controls autoplay loop src="data:audio/wav;base64,UklGRsQFAABXQVZFZm10IBAAAAABAAEAoA8AAKAPAAABAAgAZGF0YaAFAACAgYKAfHp/hoiAdnR+i4+CcW18kJaFbWZ5lJ2IaV51l6SNZldwmquSZFBrnLOXY0llnbqeYkJencGlYztWm8WqZjpTl8SuajtQk8OxbjxMj8K0cj5KisG3dz9Hhr+5e0FEgr28gENCfbu+hEZAebjAiEg+dbXBjUs9cLPDkU48bK/ElVE7aKzFmVU6ZKnFnVg6YKXFoVw6XKHFpWA6WJ3FqWQ6VZnFrGg7UZXEr2w8TpHDs3A9S43BtXU+SIjAuHlARoS+u31CQ3+8vYJEQXu5v4ZHP3e3wYpKPnK0wo9MPG6xw5NQO2quxJdTOmaqxZtWOmKnxZ9aOl6jxqNeOlqfxadiOlabxapmOlOXxK5qO1CTw7FuPEyPwrRyPkqKwbd3P0eGv7l7QUSCvbyAQ0J9u76ERkB5uMCISD51tcGNSz1ws8ORTjxsr8SVUTtorMWZVTpkqcScWj5iob2dYUVimracaExjlK+bbVRlj6iZcltoiqGWd2JrhpmSemlvg5KOfXB0gYuJf3d5gIWDf31+gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIA="></audio>
<p class="lbl">4. З <code>autoplay loop muted</code> — браузер дозволяє, бо тихо.</p>
<audio controls autoplay loop muted src="data:audio/wav;base64,UklGRsQFAABXQVZFZm10IBAAAAABAAEAoA8AAKAPAAABAAgAZGF0YaAFAACAgYKAfHp/hoiAdnR+i4+CcW18kJaFbWZ5lJ2IaV51l6SNZldwmquSZFBrnLOXY0llnbqeYkJencGlYztWm8WqZjpTl8SuajtQk8OxbjxMj8K0cj5KisG3dz9Hhr+5e0FEgr28gENCfbu+hEZAebjAiEg+dbXBjUs9cLPDkU48bK/ElVE7aKzFmVU6ZKnFnVg6YKXFoVw6XKHFpWA6WJ3FqWQ6VZnFrGg7UZXEr2w8TpHDs3A9S43BtXU+SIjAuHlARoS+u31CQ3+8vYJEQXu5v4ZHP3e3wYpKPnK0wo9MPG6xw5NQO2quxJdTOmaqxZtWOmKnxZ9aOl6jxqNeOlqfxadiOlabxapmOlOXxK5qO1CTw7FuPEyPwrRyPkqKwbd3P0eGv7l7QUSCvbyAQ0J9u76ERkB5uMCISD51tcGNSz1ws8ORTjxsr8SVUTtorMWZVTpkqcScWj5iob2dYUVimracaExjlK+bbVRlj6iZcltoiqGWd2JrhpmSemlvg5KOfXB0gYuJf3d5gIWDf31+gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIA="></audio>CSS
.lbl {
margin: 18px 0 6px;
max-width: 520px;
font-weight: 600;
}
code {
padding: 1px 5px;
border-radius: 3px;
background: #eef1f5;
font-family: ui-monospace, monospace;
}
audio {
display: block;
max-width: 100%;
}
.why {
margin: 8px 0 0;
max-width: 520px;
padding: 8px 10px;
border-left: 6px solid #2f6fd0;
background: #f6f9ff;
color: #5a6472;
font-size: .9em;
}<p> З використанням <code>loop</code></p>
<p><audio controls autoplay loop >
Ваш браузер не підтримує фотмат даних аудіо фвйлів.
</audio></p>
<p> Без використанням <code>loop</code></p>
<p><audio controls autoplay>
Ваш браузер не підтримує фотмат даних аудіо фвйлів.
</audio></p>Різниця між HTML 4.01 та HTML5
Атрибут loops з'явився для тега <audio> тільки у HTML5.
Різниця між XHTML та HTML
У XHTML мінімізований запис атрибутів заборонено, тому атрибут loop повинен бути визначений як loop="loop"
Коментарі
Коментарів ще немає — будьте першим!